Tuesday 3 December 2013

Sencha Touch 2 production builds and delta updates


A production build by Sencha Cmd (sencha app build production) will create a minfied version of your application. 

It uses a microloader (embedded in index.html) which caches the JavaScript (e.g. app.js) and CSS (e.g. app.css) files specified in “app.json” into the Browser's local storage (using a hash of the file content to identify the “version” of the file).
 
This enables the micoloader on further loads of the application to only download the app.json file, because this file contains the information which versions of the JS and CSS files need to be loaded.

If the JS and CSS files have not changed they can be read from local storage. If a file has changed it will have a different “version”-hash in app.json. The action then taken by the Microloader depends on the value of the “update” attribute associated with the respective file:
·         "update": "delta"
o   A delta-file with the changes is downloaded by the microloader and patched into the file stored in local storage
·         "update": "full"
o   The file will be loaded via Ajax call and stored in local storage


How delta-updates work



Archive Folder:
·         During a production build Sencha Cmd copies each file into the “build/archive”-folder
·         Each file goes into a folder named like the file; the file itself will be named like the hash of its content
·        Therefore the “archive”-folder contains the history of all the versions of all the files which have been built in any production build, e.g.
o   archive\app.js\     <<<  The folder named like the file
-  88c900a6530d892d21fbae08670c074e727c35ba  <<< 1st built
-  28688b22ae4da508dc6deb3e6e90473ee525d1c1 <<< 2nd built
-  727eebf10074ef70fd1584c3ced713b610197094  <<< current built
Deltas-Folder:
·         Sencha Cmd creates a “deltas”-folder for the web application (build/[appName]/production/deltas)
·         For each of the previously built files (stored in the archive folder) a delta-json-file (compared to the current file) is created, e.g.
o   deltas\
-  88c900a6530d892d21fbae08670c074e727c35ba.json
-  28688b22ae4da508dc6deb3e6e90473ee525d1c1.json
-  Each of these files contains the delta to the current file: “727eebf10074…”
·         When the Microloader loads “app.json” it sees that the version “727eebf10074…” is the current version of “app.js”
·         Depending on the version stored in local storage it loads the correct delta file, patches the stored file and stores it in local storage with the updated version number ”727eebf10074…”



No comments:

Post a Comment