Forcing ExtJS application updates after deployment

by jawilmont   Last Updated May 31, 2017 10:05 AM

I work on an ExtJS application with a Django backend, and we keep running into issues when we push new code. Our users seldom refresh their browsers, so after a code push we end up with users using the same (now outdated) version of our ExtJS application for days at a time instead of the new, updated version.

How do other people deal with this issue? (I haven't found anything online about this, so I probably haven't found the right keywords yet.)

Tags : deployment extjs


Answers 5


You are going to want to version you ext file when you deploy. So instead of having:

<script type="text/javascript" src="ext-all.js"></script>

You can have:

<script type="text/javascript" src="ext-all-4-0-2a.js"></script>

It would have a cache header that never expires and when you update to another version the name will have changed and it will force the browser to load the new file.

When you upgrade your to Ext 4.2 for example it would be :

<script type="text/javascript" src="ext-all-4.2.js"></script>

Here is a really good write up on deployment level web devlopment. http://developer.yahoo.com/performance/rules.html Make sure to check out the "Add an Expires or a Cache-Control Header" section which talks about versioning. Versioning should also be done with your component/application level scripts as well.

This is a shameless plug but you can check out the source of my website http://www.coffeedig.com/coffee/ which is a django application written in Ext to see the versioning in action.

pllee
pllee
April 08, 2013 23:08 PM

This is a social problem and not really a technological problem. You need to inform the user that your application has updated.

A good example is Google Chrome. It updates in the background, and waits. If you don't restart Google Chrome in about a week, it will give you a humorous message saying something along the lines that 'it's been a long time since you have restarted the browser. Restart the browser to get the updated version.'

You could do something similar. Have a service which responds with the version number of your Application. Send an Ajax request to this service every day or something. and if the version number has incremented, show a message to the user..

Devdatta Tengshe
Devdatta Tengshe
May 09, 2013 03:26 AM

It seems like you are running into issues with the browser caching older versions of your application and resource files. This is a common problem as web browsers are "greedy" cache-ers and will go through great lengths not to use updated versions.

You have a few options. ExtJS itself supports a "no-cache" option that can be configured via an application load configuration. disable caching configuration. This will cause your browser to fetch each file anew on every load. This can have some negative effects if you application changes rarely (every 3 months or so), but you are forcing users to download MBs of application files for every load. This however is very good when you are in development and code changes regularly.

For the rarely changing app, I use a custom application name ("aka, b3.0-myapp") and include all the app files in the b3.0-myapp directory. When upgrade time happens, I rename the app b3.1-myapp, and move the app directory. You can then do some load failure handlers (aka, their code still tries to load 3.0), and present a message gracefully at that point.

J Jones
J Jones
July 06, 2014 22:46 PM

Versioning your static resources is one of the options. I personally use a build system as I have far too many files to update manually. Here is a barebone example using gulp, but you must be able to do the same in your preferred build system/task runner:

// gulpfile.js
var gulp = require( "gulp" ),
    ... other modules
    htmlReplace = require( "gulp-html-replace" ),
    replace = require( "gulp-replace" );

gulp.task( "html-resources", function () {

    return gulp.src( "./" + config.dir.build + "/**/*" )

        // using gulp-html-replace module
        .pipe( htmlReplace({

            // single instance
            "configFile": "[email protected]@",

            // multiple-instances
            "bowerComponents": {
                "src": config.files.source.bowerComponents, // ["lib1.js",...]
                "tpl": "<script src=\"assets/%[email protected]@\"></script>"
        },
        }))

        // using gulp-replace module
        .pipe( replace( "@[email protected]", version ) )
        .pipe( gulp.dest("./" + config.dir.build) );
});

Also one useful strategy for versioning is to use for example CRC checksum of the file as its version. That way your client won't need to download a whole bunch of new files, just because you have updated one file but had to increase the version for all.

Mahdi
Mahdi
April 20, 2016 10:41 AM

Set the update property for app.js to full in app.json:

{
    // Path to file. If the file is local this must be a relative path from this app.json file.
    "path": "app.js",

    "bundle": true,  /* Indicates that all class dependencies are concatenated into this file when build */

    // If 'update' not specified, this file will only be loaded once, and cached inside
    // localStorage until this value is changed. You can specify:
    //   - "delta" to enable over-the-air delta update for this file
    //   - "full" means full update will be made when this file changes
    "update": "full"
}

Disable the cache in extjs so browser will get data from server. To do that, add the following app.json file. "production": { "cache": { "enable": false } }

Sudhakar
Sudhakar
May 31, 2017 09:27 AM

Related Questions



Style guide for React + Flux webapp

Updated May 18, 2016 08:02 AM

Enable or disable functionality on UI

Updated December 13, 2016 08:02 AM