PDA

View Full Version : How can I use JSBuilder for Dynamic Loading



jonathanmv
2 Mar 2012, 8:58 AM
Hello,

When you have a relatively small ExtJS aplication, you can use JSBuilder or the Sencha tools to generate one single JS file with the classes required from ExtJS and your application.

What happens when there's a relatively big application that uses Dynamic loading to get the js files on demand. How can i take advantage of the minifing and obfuscating the files? Should i have to minify and obfuscate every single file (this will require to have a hole new structure for the minified files i guess)

Has anyone faced this issue? Has anyone thought any solution?

Thank you

arthurakay
2 Mar 2012, 10:05 AM
The Sencha SDK tools look at your application files and build a JSB3 file which should contain all dynamically-loaded JS assets in your application. The SDK tools can then also minify all of your application code together into a single JS file.

There's no need to do anything manually, unless I misunderstand your question.

jonathanmv
2 Mar 2012, 12:32 PM
I've tried JSBuilder and what it did was minified the main files used by the application. In the one I'm doing, some controllers, models, views and stores that loads based on a user action. There's no way JSBuilder can guess which files will the app use. I know I can add files in the .jsb3 file, but that will end up with the whole app loaded into the single js file, which losses the advantage of the dynamic loading.

Let's say i can add the core to the 'compiled' js file, but other files will load in plain readable text.

arthurakay
2 Mar 2012, 12:44 PM
The Sencha SDK tools look at the "requires" configs to determine which files should get bundled into the JSB3. There's no guessing.

If you're using another method to load the files dynamically (say via Ext.create), then you'd have to manually massage the JSB3 file to create multiple minified packages... but then you have to deal with the complexity of loading the right packages as needed in your production app.

It's pretty easy to achieve the multiple minified packages... but the hard part is managing the dependencies in production.

jonathanmv
2 Mar 2012, 5:49 PM
Well, if you could show me how to generate the small packages i can try loading them in the app based on user's actions. Maybe i can put together a set of controllers, models, views and stores and call them modules and load them using something different to Ext.create.

Thanks for the replies.

arthurakay
3 Mar 2012, 12:12 PM
Look at your existing JSB3 file. If you used the default options for the SDK, you should have two config objects - each of these creates a separate file.

The first is for all-classes.js, the second for app-all.js (I think... this is from memory :D )

All you need to do is copy the format of one of these configs. Then change which files are included - then you'll have a custom "package". Unfortunately you can't automate this (yet), but it's pretty easy.

Give it a shot and let me know if you have any issues.