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')[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 = '&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.

 

Joel Garcia
Joel Garcia

Joel Garcia has been building AllCode since 2015. He’s an innovative, hands-on executive with a proven record of designing, developing, and operating Software-as-a-Service (SaaS), mobile, and desktop solutions. Joel has expertise in HealthTech, VoIP, and cloud-based solutions. Joel has experience scaling multiple start-ups for successful exits to IMS Health and Golden Gate Capital, as well as working at mature, industry-leading software companies. He’s held executive engineering positions in San Francisco at TidalWave, LittleCast, Self Health Network, LiveVox acquired by Golden Gate Capital, and Med-Vantage acquired by IMS Health.

Download our 10-Step Cloud Migration ChecklistYou'll get direct access to our full-length guide on Google Docs. From here, you will be able to make a copy, download the content, and share it with your team.