Tip: About includes / requires

[achebv]

Hi,

i have a question only:

Can anyone tell me if it's possible to make extjs like in dojo with includes/requires ? For exemple in dojo you will make a dojo.require (Dijit.form.TextField) before using a Textfield dijit. Can anyone think about this? Why it's not possible to have the same in extjs? For exemple i have some pages with extjs components, and in one i would like to use only layout (card layout, border layout), in another i would like to use only form elements(textfields, combos...) and i don't want to include all ext-.js file(to big when page load), i would like to make some includes, depending on my components.

Best regards!

PS: I know , Jack(jack.slocum) can answer me ;)

[Animal]

I don't see the need.

Your problem is that you are still thinking in "web pages" rather than A Web Application.

We have one "page". All the script needed is loaded only once.

[achebv]

Aha, it's clear for now, i will try to use it for web application, and for web pages i will use something smaller: (prototype maybe for ajax-request)

Thanks ! ~o)

[smudgeface]

I, personally, don't accept the "web application" answer. I see the real power of require/include/depends is how it improves the overall modularity (and therefore mantainability) of code and not it's ability to load a UI faster by deferring JS loading until required.

They way I envision an ext.require type architecture would occur as follows:
[in myapp.html]
1)parse script: extjs.js //include the core and global ext functions
2)parse script: myapp.js //parse my app
____[in myapp.js]
____2.a)parse script: ext.form
____2.b)parse script: ext.grid
____2.c)parse script: myapp.customformextension
_______[in ./myapp/customformextension.js]
________2.c.i)parse script: ext.something.else
________2.d.ii)parse .js file body
____2.d)parse .js file body
3)execute onLoad() function now!


As you can see, all the code is loaded BEFORE execution, so it runs exactly as it would if all the code was just <script ...>'ed into the main .html file. However the include/require method allows dependancies to be resolved automatically and lends to a more Obj Oriented style...It also means that all the un-necessary stuff in ext that I am not using will not load - saving memory space, speeding up exection time, and reducing initial page load latency!

it may not be a need but its a definite want

[Animal]

So there's no difference except that your makes more HTTP requests?

[harley.333]

speeding up exection time, and reducing initial page load latency

I have to question these claims. Execution time won't be affected one way or the other. Initial page load WILL be affected. One giant script is MUCH faster than a bunch of little ones. The YAHOO! group has done several real-world studies about this. If you want a customized version of Ext, they already provide a mechanism for that.

http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://extjs.com/products/extjs/build/

[jay@moduscreate.com]

I don't see the need.

Your problem is that you are still thinking in "web pages" rather than A Web Application.

We have one "page". All the script needed is loaded only once.

not everyone builds web applications with Ext dude. Many like to include Ext in their web pages :)

[smudgeface]

So there's no difference except that your makes more HTTP requests?

I'm not sure how you think I suggeted that there is no difference...


...the include/require method allows dependancies to be resolved automatically and lends to a more Obj Oriented style...It also means that all the un-necessary stuff in ext that I am not using will not load - saving memory space, speeding up exection time, and reducing initial page load latency! ...

Harley: While I am open to acknowledge Yahoo's studies which suggest that a single .js file downloads faster - this is obvious because of the fact that (as animal pointed out), we would be making many requests. However, if a user builds a simple web app that utilizes only 1/10th of EXTs functionality then only 1/10th of the library would need to be loaded with this scheme. I've read Yahoo's studies - they compare loading time for similar sized libraries, a different situation from this.

Also, you ignoring that fact that a modern, LARGE, web app can have many developers each woriking on a different part of the application. Expecting a custom Ext build to be maintained each time a developer adds a feature that requires a new part of the Ext is absurd - so is the task of maintaining the dependency list. An include mechanism would take care of this for you!

[Animal]

I see what you mean. The classes will be loaded incrementally in several HTTP requests as the application hits points which needs them.

There probably is a case for this to be made possible in Ext.

[SamuraiJack1]

Hi,

i have a question only:

Can anyone tell me if it's possible to make extjs like in dojo with includes/requires ? For exemple in dojo you will make a dojo.require (Dijit.form.TextField) before using a Textfield dijit. Can anyone think about this? Why it's not possible to have the same in extjs? For exemple i have some pages with extjs components, and in one i would like to use only layout (card layout, border layout), in another i would like to use only form elements(textfields, combos...) and i don't want to include all ext-.js file(to big when page load), i would like to make some includes, depending on my components.

Best regards!

PS: I know , Jack(jack.slocum) can answer me ;)

Actually the way to write application in modularized way exists for a long time already )
http://extjs.com/learn/JScout

And the toolkit for automatic combining several files into a single package to reduce the number of http requests too:
http://extjs.com/learn/Kanban

Currently it (Kanban) is not in production quality, I'll improve it during deploying of my app. jScout is stable for now.

[smudgeface]

The best part is, ext already has all of it's functionality broken up into separate modules so adding this type of functionality would not require any rewriting. Take a look at connection.js for example


line 73: Ext.extend(Ext.data.Connection, Ext.util.Observable, { ...

This implies that in order to implement Ext.data.connection, Ext.util.Observable is required. If Observable has not been defined, it will first be defined and then things progress normally.

Custom Ext builds and ext-all.js would not use this, since things are defined programatically, however it would still allow the process of adding extensions to work a bit nicer (eg, ext.require(extension_name); )

Plus, it would give dojo users one less thing to brag about when comparing to extjs :)