Using RequireJS for building modular JavaScript applications

From the jQuery Europe 2013, in Vienna on 22.02.2013.

Transcript

1. Using RequireJS for building modular JavaScript applications Sebastian Kurfürst jQuery Europe 2013 Freitag, 22. Februar 13
2. @skurfuerst Freitag, 22. Februar 13
3. Freitag, 22. Februar 13
4. Web Applications Freitag, 22. Februar 13
5. Web Applications Consulting Freitag, 22. Februar 13
6. Web Applications Consulting Training Freitag, 22. Februar 13
7. Freitag, 22. Februar 13
8. Freitag, 22. Februar 13
9. Website Seamless Frontend Editing Freitag, 22. Februar 13
10. Neos RequireJS EmberJS Aloha VIE CreateJS Hallo Frontend Editing Freitag, 22. Februar 13
11. Freitag, 22. Februar 13
12. Freitag, 22. Februar 13
13. Collaboration Freitag, 22. Februar 13
14. http://parkerlab.bio.uci.edu/pictures/photography%20pictures/2010_03_27_Select/IMG_5331%20(2)_tweak.jpg Freitag, 22. Februar 13
15. http://www.sxc.hu/photo/1398986 Freitag, 22. Februar 13
16. How to build modular JavaScript applications? Freitag, 22. Februar 13
17. let's build a simple app http://www.sxc.hu/photo/338064 Freitag, 22. Februar 13
18. <script src="jQuery.js"></script> <script src="app.js"></script> jQuery needed by app Freitag, 22. Februar 13
19. <script src="jQuery.js"></script> <script src="app.js"></script> jQuery needed by Freitag, 22. Februar 13
20. <script src="jQuery.js"></script> <script src="app.js"></script> jQuery needed by Freitag, 22. Februar 13
21. http://www.sxc.hu/photo/791394 http://www.sxc.hu/browse.phtml?f=view&id=759509 Freitag, 22. Februar 13
22. http://www.sxc.hu/photo/791394 http://www.sxc.hu/browse.phtml?f=view&id=759509 + http://www.sxc.hu/browse.phtml?f=view&id=759509 http://www.sxc.hu/photo/1022988 Freitag, 22. Februar 13
23. A Module = a file Freitag, 22. Februar 13
24. Application Freitag, 22. Februar 13
25. Application Freitag, 22. Februar 13
26. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
27. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
28. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
29. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
30. <script src="jQuery.js"></script> <script src="jQuery.slider.js"></script> <script src="jQuery.tooltip.js"></script> <script src="app.js"></script> jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
31. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
32. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
33. jQuery app jQuery.slider jQuery.tooltip Freitag, 22. Februar 13
34. http://www.sxc.hu/photo/338064 Freitag, 22. Februar 13
35. a real application http://commons.wikimedia.org/wiki/File:Lego_Chicago_City_View_2001.jpg Freitag, 22. Februar 13
36. <script src="jQuery.js"></script> <script src="jQuery.somePlugin.js"></script> <script src="backbone.js"></script> <script src="jQuery.otherPlugin.js"></script> <script src="app/model/foo.js"></script> <script src="underscore.js"></script> <script src="app/util/arrays.js"></script> <script src="app/model/bar.js"></script> <script src="app/controller/some.js"></script> <script src="d3.js"></script> <script src="app/views/test.js"></script> <script src="app.js"></script> <script src="jQuery.js"></script> <script src="jQuery.somePlugin.js"></script> <script src="backbone.js"></script> <script src="jQuery.otherPlugin.js"></script> <script src="app/model/foo.js"></script> <script src="underscore.js"></script> <script src="app/util/arrays.js"></script> <script src="app/model/bar.js"></script> <script src="app/controller/some.js"></script> <script src="d3.js"></script> <script src="app/views/test.js"></script> <script src="app.js"></script> <script src="jQuery.js"></script> <script src="jQuery.somePlugin.js"></script> <script src="backbone.js"></script> <script src="jQuery.otherPlugin.js"></script> <script src="app/model/foo.js"></script> <script src="underscore.js"></script> <script src="app/util/arrays.js"></script> <script src="app/model/bar.js"></script> <script src="app/controller/some.js"></script> <script src="d3.js"></script> <script src="app/views/test.js"></script> <script src="app.js"></script> <script src="jQuery.js"></script> <script src="jQuery.somePlugin.js"></script> <script src="backbone.js"></script> <script src="jQuery.otherPlugin.js"></script> <script src="app/model/foo.js"></script> <script src="underscore.js"></script> <script src="app/util/arrays.js"></script> <script src="app/model/bar.js"></script> <script src="app/controller/some.js"></script> <script src="d3.js"></script> <script src="app/views/test.js"></script> <script src="app.js"></script> Freitag, 22. Februar 13
37. Freitag, 22. Februar 13
38. managing 100s of dependencies is hard Freitag, 22. Februar 13
39. http://www.sxc.hu/photo/978138 slow Freitag, 22. Februar 13
40. Freitag, 22. Februar 13
41. Freitag, 22. Februar 13
42. Freitag, 22. Februar 13
43. What if each module defines its dependencies? Freitag, 22. Februar 13
44. Freitag, 22. Februar 13
45. app view jQuery controller model Freitag, 22. Februar 13
46. app view jQuery controller model I need model, controller, view to do my job. Freitag, 22. Februar 13
47. app view jQuery controller model I need model, controller, view to do my job. I need jQuery to do my job. Freitag, 22. Februar 13
48. // app.js define( dependencies, callback ); app I need model, controller, view to do my job. Freitag, 22. Februar 13
49. // app.js define( dependencies, callback ); module name == file name except .js file extension app I need model, controller, view to do my job. Freitag, 22. Februar 13
50. // app.js define( dependencies, callback ); module name == file name as soon as those are loaded... ... execute this callback except .js file extension app I need model, controller, view to do my job. Freitag, 22. Februar 13
51. // app.js define( ["model", "controller", "view"], callback ); app I need model, controller, view to do my job. Freitag, 22. Februar 13
52. // app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); dependent modules are passed as arguments app I need model, controller, view to do my job. Freitag, 22. Februar 13
53. // app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); dependent modules are passed as arguments app I need model, controller, view to do my job. Freitag, 22. Februar 13
54. // controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); the module is returned from the callback function controller I need jQuery to do my job. Freitag, 22. Februar 13
55. Freitag, 22. Februar 13
56. A M D asynchronous module definitions Freitag, 22. Februar 13
57. •define() modules •file name == module name •callback arguments == module dependencies •return value == module A M D Freitag, 22. Februar 13
58. A M D Framework Agnostic! Freitag, 22. Februar 13
59. RequireJS Freitag, 22. Februar 13
60. Is an implementation of an AMD- compliant module loader. Freitag, 22. Februar 13
61. Is a dependency management solution for JavaScript. Freitag, 22. Februar 13
62. James Burke Open source web developer. Mozilla Labs, RequireJS, volo. Freitag, 22. Februar 13
63. // app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); // controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); 1 AMD modules Freitag, 22. Februar 13
64. <script src="require.js" data-main="app.js"> </script> // app.js define( ["model", "controller", "view"], function(model, controller, view) { } ); // controller.js define( ["jQuery"], function($) { var controller = {}; // build up controller as needed return controller; } ); 1 AMD modules 2 bootstrap Freitag, 22. Februar 13
65. The Build Process Freitag, 22. Februar 13
66. Freitag, 22. Februar 13
67. r.js -o buildconfig.js Freitag, 22. Februar 13
68. r.js -o buildconfig.js Freitag, 22. Februar 13
69. // buildconfig.js baseUrl: 'src/', paths: { 'jQuery': 'lib/jquery/jquery' }, shim: {} // lots of other options base URL path mapping non-AMD code Freitag, 22. Februar 13
70. Application Freitag, 22. Februar 13
71. Application Freitag, 22. Februar 13
72. use minified files in production Freitag, 22. Februar 13
73. Freitag, 22. Februar 13
74. Power User Features Freitag, 22. Februar 13
75. // frontend/app.js define([ 'components/jquery', ], function(....) {...}) relative module names 'frontend/model/application', Freitag, 22. Februar 13
76. // frontend/app.js define([ 'components/jquery', ], function(....) {...}) relative module names './model/application', Freitag, 22. Februar 13
77. non-AMD code Freitag, 22. Februar 13
78. // simplified var root = window; root.Backbone = {}; // remaining backbone here non-AMD code Freitag, 22. Februar 13
79. define(['underscore', 'jquery'], function(_, jQuery) { var root = {}; root.Backbone = {}; // remaining backbone here return root.Backbone; }); non-AMD code fail Freitag, 22. Februar 13
80. non-AMD code use shims Freitag, 22. Februar 13
81. // before loading require.js require.config({ shim: { 'backbone': { exports: 'Backbone', deps: ['underscore', 'jquery'] } } }); non-AMD code use shims Freitag, 22. Februar 13
82. var myTemplate = 'Welcome {name} ... I hope you enjoy {conferenceName}'; text dependencies fail Freitag, 22. Februar 13
83. var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies Freitag, 22. Februar 13
84. var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies var myTemplate = ['Welcome {name}', '', '... I hope you enjoy {conferenceName}' ].join("\n"); Freitag, 22. Februar 13
85. var myTemplate = 'Welcome {name}\ \ ... I hope you enjoy {conferenceName}'; text dependencies var myTemplate = ['Welcome {name}', '', '... I hope you enjoy {conferenceName}' ].join("\n"); fail Freitag, 22. Februar 13
86. // frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies Freitag, 22. Februar 13
87. // frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies loader plugin Freitag, 22. Februar 13
88. // frontend/app.js define([ 'text!templates/myTemplate.html' ], function(myTemplate) {...}) text dependencies loader plugin template is now inside this variable Freitag, 22. Februar 13
89. // app.coffee define( ['cs!model', 'cs!controller'] (model, controller) -> # do something here ) CoeeScript Freitag, 22. Februar 13
90. Quick Development Development slow Freitag, 22. Februar 13
91. Quick Development Development Application vs Production slow fast Freitag, 22. Februar 13
92. Quick Development Application view settings main Freitag, 22. Februar 13
93. Quick Development Application view settings main r.js -o buildconfig.js excludeShallow=view,main,settings Freitag, 22. Februar 13
94. Freitag, 22. Februar 13
95. Freitag, 22. Februar 13
96. Arbitrary Web Site Web Widget Freitag, 22. Februar 13
97. Arbitrary Web Site Web Widget prevent interaction Freitag, 22. Februar 13
98. Wrapped Modules http://requirejs.org/docs/faq-advanced.html Web Widget rename require.js using namespace Freitag, 22. Februar 13
99. Wrapped Modules http://requirejs.org/docs/faq-advanced.html Web Widget rename require.js using namespace Freitag, 22. Februar 13
100. RequireJS and jQuery Freitag, 22. Februar 13
101. RequireJS and jQuery // make sure to specify a shim config for // jquery.slider and jquery.tooltip define( ["jquery", "jquery.slider", "jquery.tooltip"], function($) { // the jquery.slider.js and jquery.tooltip.js // have been loaded. $(function() { $('body').slider(); }); }); Freitag, 22. Februar 13
102. RequireJS and jQuery // make sure to specify a shim config for // jquery.slider and jquery.tooltip define( ["jquery", "jquery.slider", "jquery.tooltip"], function($) { // the jquery.slider.js and jquery.tooltip.js // have been loaded. $(function() { $('body').slider(); }); }); Freitag, 22. Februar 13
103. RequireJS and jQuery app jQuery jQuery.slider Freitag, 22. Februar 13
104. RequireJS and jQuery app jQuery jQuery.slider dependency specification Freitag, 22. Februar 13
105. RequireJS and jQuery app jQuery jQuery.slider dependency specification added to $ object side-effect Freitag, 22. Februar 13
106. RequireJS and jQuery app jQuery jQuery.slider dependency specification jQuery.tooltip added to $ object side-effect Freitag, 22. Februar 13
107. Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13
108. Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13
109. Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13
110. Finding Missing Dependencies forgot to specify dependency app jQuery jQuery.slider dependency specification jQuery.tooltip Freitag, 22. Februar 13
111. Finding Missing Dependencies // in all JS files: define(..., function() { if (window._requirejsLoadingTrace) window._requirejsLoadingTrace.push('jquery.slider'); // source code follows here }); 1 instrumentation Freitag, 22. Februar 13
112. Finding Missing Dependencies // for error and successful runs, // do the following in console: window._requirejsLoadingTrace 2 collect traces http://git.typo3.org/FLOW3/Packages/TYPO3.TYPO3.git/blob/HEAD:/Scripts/missing-javascript-dependency-finder.php put them into the dependency finder: $successfulRuns = array( json_decode('["jquery", "jquery.slider", "jquery.tooltip", "app"]') ); $errorRuns = array( 'error description' => json_decode('["jquery.slider", "jquery", "jquery.tooltip", "app"]') ) Freitag, 22. Februar 13
113. Finding Missing Dependencies $ php missing-javascript-dependency-finder.php jquery.slider -> jquery Found 1 orders which might be responsible for loading order problems. 3 check output Freitag, 22. Februar 13
114. Freitag, 22. Februar 13
115. Further Resources Official Docs: http://requirejs.org Blogs of James Burke: http://jrburke.com/ http://tagneto.blogspot.de/ Freitag, 22. Februar 13
116. Further Resources Official Docs: http://requirejs.org Blogs of James Burke: http://jrburke.com/ http://tagneto.blogspot.de/ Freitag, 22. Februar 13
117. Future Freitag, 22. Februar 13
118. ES6 Modules Freitag, 22. Februar 13
119. Conclusion Freitag, 22. Februar 13
120. Use RequireJS Freitag, 22. Februar 13
121. solves JS dependency management problem Freitag, 22. Februar 13
122. robust build tools Freitag, 22. Februar 13
123. framework agnostic Freitag, 22. Februar 13
124. oers clean encapsulation Freitag, 22. Februar 13
125. ! Freitag, 22. Februar 13
126. Thanks! http://speakerdeck.com/skurfuerst @skurfuerst http://lanyrd.com/profile/skurfuerst/ Freitag, 22. Februar 13
127. Freitag, 22. Februar 13