Using RequireJS for building modular JavaScript applications

30c0b6f50f67163bee8500aa4115d126?s=47 Sebastian Kurfürst
February 22, 2013
2.3k

Using RequireJS for building modular JavaScript applications

From the jQuery Europe 2013, in Vienna on 22.02.2013.

30c0b6f50f67163bee8500aa4115d126?s=128

Sebastian Kurfürst

February 22, 2013
Tweet

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