1

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.)

jawilmont
  • 151
  • 1
  • 5

5 Answers5

2

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
  • 1,212
  • 1
  • 9
  • 13
  • Thank you for your clear explanation. However the problem I was trying to ask about isn't that the ExtJS library isn't being kept up to date, it is the application code written using ExtJS that isn't being kept up to date. – jawilmont Apr 09 '13 at 13:14
  • 2
    It is the same problem with a different filename. – pllee Apr 09 '13 at 13:51
2

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
  • 121
  • 2
0

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
  • 2,514
  • 4
  • 21
  • 22
  • Proper versioning should handle this problem. I can't think of any professional websites that inform their users that the site has updated and they need to clear their cache to see it. – pllee Jun 05 '13 at 20:10
  • @pllee: Maybe your and my reading of the question is different. As I understand it, OP's Users are not restarting/refreshing the browser at all. They have the App open in a browser for days at a time. – Devdatta Tengshe Jun 06 '13 at 02:56
  • I can see how you interpreted that. After reading it again I am not entirely sure on what the question is asking. I assumed that the new updated Ext version would be javascript code which could get handled by versioning. – pllee Jun 06 '13 at 04:33
0

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": "config.js?ver=@version@",

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

        // using gulp-replace module
        .pipe( replace( "@version@", 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
  • 1,983
  • 2
  • 15
  • 25
0

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
  • 101
  • 1