ExtJS 3 Code Architecture : Best way to organize class files and load them dynamically

Question

I'am modernizing a legacy web application, with its frontend based on ExtJS 3.x.

Currently, user interface depends on large file of several thousand lines, with too many nested anonymous functions, encapsulated in an global `Ext.onReady()̀ per file. It's ugly, unreadable and not maintenable.

To maintain code and modernize it, I want gradually refactorize it by :

1. using namespaces
2. exploding big files : one class per file (grid, store, form ...)
3. organizing class files in a good directory structure (app/module/grid|store|...)
4. loading dynamically class files, when required (maybe with Ext.Loader.load() ?)
5. optimizing loading by using minifier, as assetic, if possible (in a next step).

All these problematics seems natively solved in ExtJS 4, with its class Loader, its dependency system (require), its Application Singleton and its structure folder conventions...

In ExtJS 3, it seems more confused. So :

• What are the best practices in extjs 3 to organize code "like" in extjs 4 ?
• Do you have clear examples illustrating these problematics ?

Answer 1

Ext3 is an entirely different beast than 4. Code organization is really up to the developer. I personally would avoid dynamic loading in favor of minification of the entire app. This is what ext4 would give you in a production app. They really only intend dynamic loading for debugging purposes. I have gone the dynamic loading/module route before with Ext3 and it was a regret. It is OK with 4 with it built into the class system.

1. If you are using a later version of 3, do namespaces with Ext.define. It will do the Ext.ns for you internally and will make upgrading to 4 easier down the path.

2. You are correct that you shouldn't have big files or config objects, but don't go too overboard. Try to group things into logical classes. A grid can be part of class that contains other components that make sense as a view.

3. If you do want to upgrade to 4 later, I would recommend trying to emulate the structure a little at least with stores and views. 3 doesn't really impose any structure.

4. I would avoid dynamic loading with 3. See above.

5. Definitely minify. Not only will there be much less data going over the wire, but you get huge savings by removing all the overhead of a GET for each script. Gzip might help a little too.