ExtJS 5 custom build using yui-compressor or other?

Question

I suppose at the end of the day I'm looking for an equivalent of the old ExtJS "build your own". I know this is "frowned" upon by sencha who have decided this isn't the way to create an app, but my requirements don't fit this.

Basically, I have a very large enterprise application. The js which will be loaded into each individual client will vary depending on their user profile, security access etc. This is a J2EE app and the user configuration is stored in a database.

In addition, to prevent loading huge amounts of unused javascript the required script for each individual configuration is loaded on the fly as the user requests a "page". This works well for us for an assortment of reasons, not least that users with lower security privileges are not loading script to their browser which they won't be able to use - the server side can manage which users can download individual script, this prevents untrustworthy users examining script looking for vulnerabilities.

We also have a number of users in remote locations on low bandwidth and/or mobile connections, and as such the size of the initial load of ext-all.js is becoming an issue.

Sencha cmd doesn't work for us. It doesn't fit our model as it can't scan all of the code for dependencies, and I need to have the ExtJS code separated from out application code.

So ultimately I'm looking for a way to reasonably cut down the size of ext-all.js by removing the parts we don't use. I would also like to build custom versions which the server side code can select on the fly depending on the user profile and requirement (i.e. a bare-bones version for those on mobile devices vs. a full-fat version for sys admins). I'm happy to have to maintain some sort of dependency list/script which I can then run through Sencha Cmd or yui-compressor to create the build file but really wondering the best way to do this. There must be a build script somewhere which gives the ext-all.js - is this something I can alter and cut down to fulfil my needs?

Alternatively is there a way to configure Sencha Cmd to produce a separate ext.js file for a dummy "app" in which I put skeleton code for the extjs features I need and it will produce the clean ext.js file without the dummy app code being included? In this way if I use a new extjs feature in my production code I can add a reference to this in the dummy app and regenerate a new ext.js version.

Answer 1

I think I might have misunderstood your question, but isn't this how Sencha Command is already supposed to work? By adding the requires config to a class, you're stating that it depends on another class to operate. Sencha Command understands this and will build you a file containing only those dependencies. However if you have partial builds (as you seem to indicate that you do as a security measure), then this becomes more complicated.

Cmd does let you do custom builds and you can see part of how to do this here:

https://docs.sencha.com/cmd/guides/advanced_cmd/cmd_compiler_reference.html

IMO this is all stupidly complex and is something that few people will need, but at least it's there. In your case, right down at the bottom of that page you can see mention of "The if directive", and that sounds like it might meet your requirements, at least in part. Could you wrap certain bits of code in an if directive that dictates some kind of "access level"?

However as you say, you could maintain all of your dependencies manually - it would be painful but I think it could be done. Since Ext JS bundles all of the source code in separate files you could probably generate a custom build that way. You might be able to use Cmd's ability to generate various types of metadata to help with that:

https://docs.sencha.com/cmd/guides/advanced_cmd/cmd_metadata.html

Check out the "Exporting Filenames" section that would let you get a list of files that contain the classes your application depends on. You could process those files further with Cmd or another build too.

Answer 2

There are three basic approaches you can use here:

• If it's a case that different users essentially have their own versions of the app, you can use tagging, as per the Sencha CMD docs (as noted in the answer by Colin Ramsay). This will let you produce multiple versions of your app, each minified and complete with their appropriate subsets. You can then direct the user to the appropriate version when they login.

• If there is significant functionality that is only occasionally used, and you don't want to download it every time, you can use Sencha CMD Packages to create bundled & minified files. These can then be downloaded on the fly using Ext.Loader. Note that in this case you need to pay attention to what the package requires, because it's not included by default.

  • Or... you can skip the whole 'packaged app' mode, and use the simple ext.js file that doesn't have any dependencies, and rely on the Ext.requires functionality to load your custom code dynamically. This could be augmented by making a small app that requires most of the common UI widgets & data that is common to a lot of modules.