2021 Fillmore Street #1128

}

24/7 solutions

Minify Sencha ExtJs in Production

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.

 

Related Articles

AWS Jumpstart Program

AWS Jumpstart Program

Do you have a startup that’s looking to build a mobile application or SaaS Platform on Amazon Web Services? Are you thinking about using AWS Services for Analytics, IOT, Machine Learning, Containers or Non-Relational Database? If the answer to both of these questions is yes then work with AllCode. We’re an AWS Consulting Partner who specializes in building out these types of applications. More importantly, AllCode is one of the select few partners that is a member of the AWS Jumpstart Program.

AWS Partner Service Tiers

AWS Partner Service Tiers

This is a status to indicate an organization has proven technical expertise that is directly compatible with AWS tools. It’s a great way to give an organization added value and there are plenty of advantages from advancing through the tiers, from funding to additional resources to funding and additional materials for marketing. The jump from one tier to another is dependent on how many certified individuals are in the organization and their relative experience working with Amazon Services.

Which AWS Certification Should You Get?

Which AWS Certification Should You Get?

Amazon Web Services cloud technology is a continuously growing field with plenty of opportunities on offer. While the inner workings of the cloud is not knowledge that can be easily picked up and utilized, the AWS cloud is not completely esoteric either. Amazon provides several different avenues for becoming certified in how to work with AWS with study material and exams to pursue as a means of further expanding potential business opportunities.

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.