Optimising your Dojo application using the Dojo 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