The main issue that I’ve encountered using SenchaExtJs in Production is the compressed JavaScript after using JSBuilder is still large. JSBuilder does a nice job of compressing and obfuscating, but the generated app-all.js is still too big, which means that the initial response time for your app will be poor.

To combat this drawback of using Sencha, I actually load the ExtJs JavaScript and CSS in a child frame.

In the parent.html file, I’ll make reference to a child.html file along with displaying a “Loading” spinning icon.
< iframe src=”child.html>

In the javascript for parent.html file, I’ll hide the iframe until I’m ready to launch the app by making the iframe hidden. The end user will just see the loading icon.

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
//hide the flicker of the iframe
var frame_visible = document.createElement('div'),
 ref = document.getElementsByTagName('base')
[0] ||
document.getElementsByTagName('script')[0];
frame_visible.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(frame_visible, ref);
</script>

The child.html will contain all references to ExtJs Javascript and CSS. Once the child.html loads, your app.js will receive the Ext.application.launch() invocation, I will remove the visibility hidden of the child frame, and the app will draw nicely.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.application(
{
    name: 'Test',
    appFolder: 'app',
    cmp: null,
    launch: function()
    {
        //before showing the ExtJS app remove the hidden on the child frame style attribute
        parent.ref.parentNode.removeChild(parent.frame_visible)
        this.cmp = Ext.create('Test.AppPanel',{
                renderTo: 'content_extjs'
            });
        this.cmp.show();
     }
});

Similar to Gmail with their loading progress bar, this technique gives the user the impression that something is going on while the app-all.js is being downloaded.

FILED UNDER CLOUD