Optimising your Dojo application using the Dojo build system

Slide 1

Slide 1 text

1 Optimizing Your Dojo Application Using The Dojo Build System James Thomas, UI Technical Lead - Watson IBM Session # 2292 Thursday, 3 May 2012

Slide 2

Slide 2 text

Introduction James Thomas, IBMer, Dojo-er... @thomasj Thursday, 3 May 2012

Slide 3

Slide 3 text

Overview  Why should I use the Dojo build system?  How do I use the Dojo build system? – Creating a sample application build in 1.6 – Migrating a sample build to 1.7  What are the best practices for the build system? Thursday, 3 May 2012

Slide 4

Slide 4 text

Why should I use the Dojo build system? Thursday, 3 May 2012

Slide 5

Slide 5 text

Thursday, 3 May 2012

Slide 6

Slide 6 text

Performance matters!  Bing - “A page that was 2 seconds slower resulted in a 4.3% drop in revenue/user”  Google - “A 400 millisecond delay caused a 0.59% drop in searches/user”  Yahoo! - “A 400 milliseconds slowdown resulted in a 5-9% drop in full-page traffic”  Shopzilla - “Speeding up their site by 5 seconds increased their conversion rate 7-12%”  Mozilla - “Shaving 2.2 seconds off their landing pages increased download conversions by 15.4%” Source: http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ Thursday, 3 May 2012

Slide 7

Slide 7 text

Thursday, 3 May 2012

Slide 8

Slide 8 text

Rule #1 - Making fewer HTTP requests Thursday, 3 May 2012

Slide 9

Slide 9 text

Side-effect of writing modular code... Thursday, 3 May 2012

Slide 10

Slide 10 text

Benefits of a Dojo Build Using the build system will...  Combine multiple JavaScript modules and dependencies into a single file  Inline widget templates & i18n dependencies into the module definition  “Minify” source files using JavaScript optimiser (strip comments, rename variables, remove whitespace...)  Inline all imported CSS files into parent source Thursday, 3 May 2012

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Real-Life Performance Statistics Before After Difference HTTP Requests 211 38 ~ 82% Data Transferred 588.95 KB 314.77 KB ~ 47% Total Load Time 3.15 seconds 1.07 seconds ~ 66% Source: Dojo Web Builder - Dojo 1.5 (http://build.dojotoolkit.org) Thursday, 3 May 2012

Slide 13

Slide 13 text

How do I use the Dojo build system? Thursday, 3 May 2012

Slide 14

Slide 14 text

Using the Dojo build system There are three main steps...  Define your application’s build profile  Run the build scripts to generate the layers  Use the resulting layer files in your application Thursday, 3 May 2012

Slide 15

Slide 15 text

Using the Dojo build system There are three main steps...  Define your application’s build profile*  Run the build scripts to generate the layers  Use the resulting layer files in your application* ... regardless of version (although there are differences between 1.6 or lower and 1.7+) Thursday, 3 May 2012

Slide 16

Slide 16 text

Let’s walkthrough an example build in 1.6 and lower... Thursday, 3 May 2012

Slide 17

Slide 17 text

Defining your application build profile Build profile is a text file contains the following....  JavaScript source setting up “dependencies” object with build profile. Usually contains the following properties.... – “layers” – “prefixes” – optimisation parameters for JS and CSS  Numerous examples build profiles under “dojo-source- directory/util/buildscripts/profiles” Thursday, 3 May 2012

Slide 18

Slide 18 text

Defining your application build profile Thursday, 3 May 2012

Slide 19

Slide 19 text

Defining your application build profile Single page app Thursday, 3 May 2012

Slide 20

Slide 20 text

Defining your application build profile JavaScript modules here Thursday, 3 May 2012

Slide 21

Slide 21 text

Defining your application build profile Dojo Toolkit source Thursday, 3 May 2012

Slide 22

Slide 22 text

Defining your application build profile Custom modules Thursday, 3 May 2012

Slide 23

Slide 23 text

Defining your application build profile var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; dojo.require("my_company.a"); dojo.require("my_company.b"); dojo.require("my_company.c"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); Thursday, 3 May 2012

Slide 24

Slide 24 text

Defining your application build profile dependencies = { layers: [ { name: "dojo.js", dependencies: [ ] }], prefixes: [ ] } Location: js/dojo-release-1.6.0-src/util/buildscripts/profiles/my_app.profile.js Thursday, 3 May 2012

Slide 25

Slide 25 text

Defining your application build profile dependencies = { layers: [ { name: "dojo.js", dependencies: [ ] }], prefixes: [ ] } We always get this layer, includes all “dojo/_base/” modules Thursday, 3 May 2012

Slide 26

Slide 26 text

Defining your application build profile dependencies = { layers: [ { name: "dojo.js", dependencies: [ "my_company.a", "my_company.b", "my_company.c", "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }], prefixes: [ ] } Add in extra dependencies Thursday, 3 May 2012

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Defining your application build profile There are many (optional) build parameters...  layerOptimize (default = “shrinksafe”): – shrinksafe – shrinksafe.keepLines – closure – closure.keepLines – false  optimize (default = “false”) – Same values as above Source: http://dojotoolkit.org/reference-guide/1.6/quickstart/custom-builds.html Thursday, 3 May 2012

Slide 30

Slide 30 text

Defining your application build profile There are many (optional) build parameters...  stripConsole (default = “normal”): – none – normal – warn – all  cssOptimize (default = “false”) – comments – comments.keepLines Source: http://dojotoolkit.org/reference-guide/1.6/quickstart/custom-builds.html Thursday, 3 May 2012

Slide 31

Slide 31 text

Defining your application build profile There are many (optional) build parameters...  releaseDir (default = “../../releaseDir”): – existing directory path  releaseName (default = “dojo”) – directory name  localeList (default = “en-gb,en-us,de-de,es-es,fr-fr,it-it,pt- br,ko-kr,zh-tw,zh-cn,ja-jp”) – comma separated list of locales Source: http://dojotoolkit.org/reference-guide/1.6/quickstart/custom-builds.html Thursday, 3 May 2012

Slide 32

Slide 32 text

Run the build scripts to generate the layers Dojo’s build scripts are located in... dojo-release-X.Y.Z-src/util/buildscripts Thursday, 3 May 2012

Slide 33

Slide 33 text

Run the build scripts to generate the layers Run the following command (Linux) $ sh build.sh action=release profile=my_app Run the following command (Windows) $ build.bat action=release profile=my_app Thursday, 3 May 2012

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Run the build scripts to generate the layers $ sh build.sh action=release profile=my_app release: Using profile: profiles/my_app.profile.js release: Using version number: 0.0.0.dev for the release. release: Copying: ../../dojo/../dijit to: ../../ release/dojo/dijit release: Copying: ../../dojo/../../my_company to: ../../release/dojo/my_company release: Copying: ../../dojo to: ../../release/ dojo/dojo release: Building dojo.js and layer files release: Optimizing (shrinksafe) file: ../../ release/dojo/dojo/dojo.js release: Files baked into this build: dojo.js: Build time: 16.004 seconds Thursday, 3 May 2012

Slide 36

Slide 36 text

Run the build scripts to generate the layers Thursday, 3 May 2012

Slide 37

Slide 37 text

Run the build scripts to generate the layers Generated files in “release” directory Thursday, 3 May 2012

Slide 38

Slide 38 text

Use resulting layers files in your application. var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; dojo.require("my_company.a"); dojo.require("my_company.b"); dojo.require("my_company.c"); dojo.require("dijit.form.Form"); dojo.require("dijit.form.TextBox"); dojo.require("dijit.form.Button"); Thursday, 3 May 2012

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Use resulting layers files in your application. var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; Thursday, 3 May 2012

Slide 42

Slide 42 text

What about multi- page apps? Thursday, 3 May 2012

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Defining your application build profile layers: [ { name: "dojo.js", dependencies: [ "my_company.a", "my_company.b", "my_company.c", "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }] Thursday, 3 May 2012

Slide 46

Slide 46 text

Defining your application build profile layers: [ { name: "dojo.js", dependencies: [ "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }] Thursday, 3 May 2012

Slide 47

Slide 47 text

Defining your application build profile layers: [ { name: "dojo.js", dependencies: [ "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }, { name: "page_layer.js", dependencies: [ "my_company.a", "my_company.b" "my_company.c" ] }] Thursday, 3 May 2012

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Use resulting layers files in your application. var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; Thursday, 3 May 2012

Slide 51

Slide 51 text

Use resulting layers files in your application. var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ page_layer.js"> Thursday, 3 May 2012

Slide 52

Slide 52 text

What has changed in the new 1.7 build system? Thursday, 3 May 2012

Slide 53

Slide 53 text

Using the Dojo build system in 1.7 There are still three main steps...  Define your application’s build profile  Run the build scripts to generate the layers  Use the resulting layer files in your application Thursday, 3 May 2012

Slide 54

Slide 54 text

Using the Dojo build system in 1.7 There are still three main steps...  Define your application’s build profile – Add package descriptor – Convert build profile  Run the build scripts to generate the layers  Use the resulting layer files in your application Thursday, 3 May 2012

Slide 55

Slide 55 text

Using the Dojo build system in 1.7 55 Thursday, 3 May 2012

Slide 56

Slide 56 text

Using the Dojo build system in 1.7 56 Package descriptor Thursday, 3 May 2012

Slide 57

Slide 57 text

Using the Dojo build system in 1.7 AMD module packages must have a package descriptor - “package.json” { " "name": "my_company", " "version":"1.0.0", " "dependencies": { " " "dojo": "1.7.0", " " "dijit": "1.7.0" " }, " "dojoBuild": "my_app.profile.js" } – Thursday, 3 May 2012

Slide 58

Slide 58 text

Using the Dojo build system in 1.7 58 Package build profile Thursday, 3 May 2012

Slide 59

Slide 59 text

Convert 1.6 build profile to 1.7 format dependencies = { layers: [ { name: "dojo.js", dependencies: [ "my_company.a", "my_company.b", "my_company.c", "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }], prefixes: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012

Slide 60

Slide 60 text

Slide 61

Slide 61 text

Convert 1.6 build profile to 1.7 format var profile = { layers: [ { name: "dojo.js", dependencies: [ "my_company.a", "my_company.b", "my_company.c", "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }], prefixes: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012

Slide 62

Slide 62 text

Convert 1.6 build profile to 1.7 format var profile = { layers: { "dojo/dojo" : { include: [ "my_company/a", "my_company/b", "my_company/c", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button" ] } }, prefixes: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012

Slide 63

Slide 63 text

Convert 1.6 build profile to 1.7 format var profile = { layers: { "dojo/dojo" : { include: [ "my_company/a", "my_company/b", "my_company/c", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button" ] } }, packages: [ { name: "dojo", location: "../dojo-release-1.7.2-src/dojo/dojo" }, { name: "dijit", location: "../dojo-release-1.7.2-src/dojo/dijit" }, { name: "my_company", location: "./" } ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012

Slide 64

Slide 64 text

Convert 1.6 build profile to 1.7 format var profile = { layers: { "dojo/dojo" : { include: [ "my_company/a", "my_company/b", "my_company/c", "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button" ] } }, packages: [ { name: "dojo", location: "../dojo-release-1.7.2-src/dojo/dojo" }, { name: "dijit", location: "../dojo-release-1.7.2-src/dojo/dijit" }, { name: "my_company", location: "./" } ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012

Slide 65

Slide 65 text

What about multi- page apps? Thursday, 3 May 2012

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Defining your application build profile layers: { "dojo/dojo" : { include: [ "dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button" ] }, { "my_company/page_layer", include: [ "my_company/a", "my_company/b" "my_company/c" ], exclude: [ "dojo/dojo" ] } }] Thursday, 3 May 2012

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Using the Dojo build system in 1.7 There are still three main steps...  Define your application’s build profile  Run the build scripts to generate the layers – Use package build profile  Use the resulting layer files in your application Thursday, 3 May 2012

Slide 72

Slide 72 text

Run the build scripts to generate the layers Run the following command (Linux) $ sh build.sh action=release profile=../../../ my_company/my_app.profile.js Run the following command (Windows) $ build.bat action=release profile=../../../ my_company/my_app.profile.js Thursday, 3 May 2012

Slide 73

Slide 73 text

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Use resulting layers files in your application. var dojoConfig = { parseOnLoad: true, async: true, paths: { my_company: "./js/my_company" } }; <script> require(["./js/release/my_company/page_layer"]); Thursday, 3 May 2012

Slide 76

Slide 76 text

What are the best practices for the build system? Thursday, 3 May 2012

Slide 77

Slide 77 text

Thursday, 3 May 2012

Slide 78

Slide 78 text

"If you can not measure it, you can not improve it." - Lord Kelvin Thursday, 3 May 2012

Slide 79

Slide 79 text

Chrome Developer Tools Thursday, 3 May 2012

Slide 80

Slide 80 text

Chrome Developer Tools Thursday, 3 May 2012

Slide 81

Slide 81 text

Chrome Developer Tools Thursday, 3 May 2012

Slide 82

Slide 82 text

Patterns for multi-page applications 82 How many layers do I need? What modules should be in my layers? Why not bundle everything into a single layer? Thursday, 3 May 2012

Slide 83

Slide 83 text

Patterns for multi-page applications 83 Reasons not use a single layer...  Hugely inflated download size on first page visit  Each pages requires parsing unneeded modules  When a single module changes, user has to download entire layer again Thursday, 3 May 2012

Slide 84

Slide 84 text

Patterns for multi-page applications 84 Reasons not use a single layer...  Hugely inflated download size on first page visit  Each pages requires parsing unneeded modules  When a single module changes, user has to download entire layer again ... so what should we do? Thursday, 3 May 2012

Slide 85

Slide 85 text

Patterns for multi-page applications 85 Three layers per page... Layer Name Multi-page Size Expiry Thursday, 3 May 2012

Slide 86

Slide 86 text

Patterns for multi-page applications 86 Three layers per page... Layer Name Multi-page Size Expiry Dojo Yes Medium Long Thursday, 3 May 2012

Slide 87

Slide 87 text

Patterns for multi-page applications 87 Three layers per page... Layer Name Multi-page Size Expiry Dojo Yes Medium Long App Common Yes Medium Medium Thursday, 3 May 2012

Slide 88

Slide 88 text

Patterns for multi-page applications 88 Three layers per page... Layer Name Multi-page Size Expiry Dojo Yes Medium Long App Common Yes Medium Medium App Page No Small Short Thursday, 3 May 2012

Slide 89

Slide 89 text

Finally..... 89 Ensure your web-server has GZIP encoding enabled Thursday, 3 May 2012

Slide 90

Slide 90 text

Finally..... 90 Ensure your web-server has GZIP encoding enabled  Dojo 1.6 Base Layer (Uncompressed) = 371 KB Thursday, 3 May 2012

Slide 91

Slide 91 text

Finally..... 91 Ensure your web-server has GZIP encoding enabled  Dojo 1.6 Base Layer (Uncompressed) = 371 KB  Dojo 1.6 Base Layer (Minified) = 89 KB Thursday, 3 May 2012

Slide 92

Slide 92 text

Finally..... 92 Ensure your web-server has GZIP encoding enabled  Dojo 1.6 Base Layer (Uncompressed) = 371 KB  Dojo 1.6 Base Layer (Minified) = 89 KB  Dojo 1.6 Base Layer (Minified + GZIP) = 30KB Thursday, 3 May 2012

Slide 93

Slide 93 text

Conclusions  Why should I use the Dojo build system?  How do I use the Dojo build system? – Creating a sample application build in 1.6 – Migrating a sample build to 1.7  What are the best practices for the build system? Thursday, 3 May 2012

Slide 94

Slide 94 text

We love your Feedback!  Don’t forget to submit your Impact session and speaker feedback! Your feedback is very important to us, we use it to improve our conference for you next year.  Go to impactsmartsite.com from your mobile device  From the Impact 2012 Online Conference Guide: – Select Agenda – Navigate to the session you want to give feedback on – Select the session or speaker feedback links – Submit your feedback Thursday, 3 May 2012

Slide 95

Slide 95 text

© IBM Corporation 2012. All Rights Reserved. IBM, the IBM logo, ibm.com are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/ copytrade.shtml. Copyright and Trademarks Thursday, 3 May 2012