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 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 iframevar frame_visible = document.createElement('div'), ref = document.getElementsByTagName('base')[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][0] ||document.getElementsByTagName('script')[0];frame_visible.innerHTML = '­<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.
