Optimising your Dojo application using the Dojo build system

Why should you use the Dojo build system? Find out why your users care and how to dramatically improve the performance of your web application. Introduction to the 1.6 build system along with the upgrade path for the new 1.7 build system.

Transcript

1. 1 Optimizing Your Dojo Application Using The Dojo Build System James Thomas, UI Technical Lead - Watson IBM Session # 2292 Thursday, 3 May 2012
2. Introduction James Thomas, IBMer, Dojo-er... @thomasj Thursday, 3 May 2012
3. 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
4. Why should I use the Dojo build system? Thursday, 3 May 2012
5. Thursday, 3 May 2012
6. 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
7. Thursday, 3 May 2012
8. Rule #1 - Making fewer HTTP requests Thursday, 3 May 2012
9. Side-effect of writing modular code... Thursday, 3 May 2012
10. 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
11. 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 ...massively improve the performance of my application! Thursday, 3 May 2012
12. 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
13. How do I use the Dojo build system? Thursday, 3 May 2012
14. 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
15. 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
16. Let’s walkthrough an example build in 1.6 and lower... Thursday, 3 May 2012
17. 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
18. Defining your application build profile Thursday, 3 May 2012
19. Defining your application build profile Single page app Thursday, 3 May 2012
20. Defining your application build profile JavaScript modules here Thursday, 3 May 2012
21. Defining your application build profile Dojo Toolkit source Thursday, 3 May 2012
22. Defining your application build profile Custom modules Thursday, 3 May 2012
23. Defining your application build profile <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/dojo/dojo.js"> </script> <script> 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"); </script> Thursday, 3 May 2012
24. 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
25. 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
26. 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
27. 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: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ] } Set up module locations Thursday, 3 May 2012
28. 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: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Specify optional build parameters Thursday, 3 May 2012
29. 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
30. 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
31. 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
32. 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
33. 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
34. 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 Mapped to “./profiles/my_app.profile.js” Thursday, 3 May 2012
35. 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
36. Run the build scripts to generate the layers Thursday, 3 May 2012
37. Run the build scripts to generate the layers Generated files in “release” directory Thursday, 3 May 2012
38. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/dojo/dojo.js"> </script> <script> 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"); </script> Thursday, 3 May 2012
39. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/dojo/dojo.js"> </script> <script> 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"); </script> Thursday, 3 May 2012
40. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ dojo.js"> </script> <script> 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"); </script> Thursday, 3 May 2012
41. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ dojo.js"> </script> Thursday, 3 May 2012
42. What about multi- page apps? Thursday, 3 May 2012
43. 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: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012
44. 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: [ [ "dijit", "../dijit" ], [ "my_company", "../../my_company" ] ], cssOptimize: "true", layerOptimize: "closure" } Thursday, 3 May 2012
45. 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
46. Defining your application build profile layers: [ { name: "dojo.js", dependencies: [ "dijit.form.Form", "dijit.form.TextBox", "dijit.form.Button" ] }] Thursday, 3 May 2012
47. 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
48. 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" ], layerDependencies: ["dojo.js"] }] Thursday, 3 May 2012
49. 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" ], layerDependencies: ["dojo.js"] }] All layers have an implicit dependency on “dojo.js” Thursday, 3 May 2012
50. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ dojo.js"> </script> Thursday, 3 May 2012
51. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ dojo.js"> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ page_layer.js"> </script> Thursday, 3 May 2012
52. What has changed in the new 1.7 build system? Thursday, 3 May 2012
53. 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
54. 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
55. Using the Dojo build system in 1.7 55 Thursday, 3 May 2012
56. Using the Dojo build system in 1.7 56 Package descriptor Thursday, 3 May 2012
57. 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
58. Using the Dojo build system in 1.7 58 Package build profile Thursday, 3 May 2012
59. 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
60. 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" } Needs to be renamed Thursday, 3 May 2012
61. 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
62. 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
63. 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
64. 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
65. What about multi- page apps? Thursday, 3 May 2012
66. 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" ], layerDependencies: ["dojo.js"] }] Thursday, 3 May 2012
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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 – Must use AMD loader rather than <script> tags Thursday, 3 May 2012
74. Use resulting layers files in your application. <script> var djConfig = { parseOnLoad: true, modulePaths: { my_company: "./js/my_company" } }; </script> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ dojo.js"> <script src="./js/dojo-release-1.6.0-src/release/dojo/dojo/ page_layer.js"> </script> Thursday, 3 May 2012
75. Use resulting layers files in your application. <script> var dojoConfig = { parseOnLoad: true, async: true, paths: { my_company: "./js/my_company" } }; </script> <script src="./js/release/dojo/dojo.js"> <script> require(["./js/release/my_company/page_layer"]); </script> Thursday, 3 May 2012
76. What are the best practices for the build system? Thursday, 3 May 2012
77. Thursday, 3 May 2012
78. "If you can not measure it, you can not improve it." - Lord Kelvin Thursday, 3 May 2012
79. Chrome Developer Tools Thursday, 3 May 2012
80. Chrome Developer Tools Thursday, 3 May 2012
81. Chrome Developer Tools Thursday, 3 May 2012
82. 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
83. 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
84. 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
85. Patterns for multi-page applications 85 Three layers per page... Layer Name Multi-page Size Expiry Thursday, 3 May 2012
86. Patterns for multi-page applications 86 Three layers per page... Layer Name Multi-page Size Expiry Dojo Yes Medium Long Thursday, 3 May 2012
87. 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
88. 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
89. Finally..... 89 Ensure your web-server has GZIP encoding enabled Thursday, 3 May 2012
90. Finally..... 90 Ensure your web-server has GZIP encoding enabled  Dojo 1.6 Base Layer (Uncompressed) = 371 KB Thursday, 3 May 2012
91. 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
92. 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
93. 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
94. 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
95. © 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