a

Minify Sencha ExtJs in Production

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, […]
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.

Related Articles

Top CI/CD Tools to Use in App Development

Top CI/CD Tools to Use in App Development

Modern software development requires continuous maintenance over the course of its operational lifespan in the form of continuous integration (CI) and continuous deployment (CD). It is tedious work, but helps developers worry less about critical breakdowns. Automating this cycle provides an easier means by which rollbacks can occur in the case of a bad update while providing additional benefits such as security and compliance functionality.

Top Software as a Service Companies in 2024

Top Software as a Service Companies in 2024

Spending for public cloud usage continues to climb with every year. In 2023, nearly $600 billion was spent world-wide with a third of that being taken up by SaaS. By comparison, Infrastructure as a Service only takes up $150 billion and Platform as a Service makes up $139 billion. On average, companies use roughly 315 individual SaaS applications for their operations and are gradually increasing on a yearly basis. SaaS offers a level of cost efficiency that makes it an appealing option for consuming software.

AWS Graviton and Arm-architecture Processors

AWS Graviton and Arm-architecture Processors

AWS launched its new batch of Arm-based processors in 2018 with AWS Graviton. It is a series of server processors designed for Amazon EC2 virtual machines. The EC2 AI instances support web servers, caching fleets, distributed data centers, and containerized microservices. Arm architecture is gradually being rolled out to handle enterprise-grade utilities at scale. Graviton instances are popular for handling intense workloads in the cloud.