RequireJS: Take Off Conf

Aea964cf59c0c81fff752896f070cbbb?s=47 Jack Franklin
January 17, 2013

RequireJS: Take Off Conf

A talk introducing RequireJS, originally done at Take Off Conf, Lille, Jan 17th 2013.

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

January 17, 2013
Tweet

Transcript

  1. 3.

    • Writer at javascriptplayground.com • Author of “Beginning jQuery” (http://

    www.apress.com/9781430249320) • JavaScript and Ruby developer, London • @Jack_Franklin • github.com/jackfranklin • jackfranklin.co.uk Thursday, 17 January 13
  2. 5.

    • Multiple HTTP Requests • Scripts are loaded synchronously •

    Limited parallel connections • Difficult to maintain • Difficult to integrate a build script into Thursday, 17 January 13
  3. 6.

    The Solution The Asynchronous Module Definition (**AMD**) API specifies a

    mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross- domain access problems. https://github.com/amdjs/amdjs-api/wiki/AMD Thursday, 17 January 13
  4. 7.

    AMD • Modular Code • Define modules and dependencies •

    Load modules asynchronously • All dependencies dealt with. Thursday, 17 January 13
  5. 8.

    This means... • Asynchronous loading = non blocking • Dependencies

    can be dynamically loaded in only when required • No more messing around with the order of script tags • Better organised, modular code (separation of concerns) Thursday, 17 January 13
  6. 10.

    • Implements the AMD Spec • Easy to setup (one

    script tag) • Has a build tool • Excellent browser support • IE6+, FF2+, Safari 3.2+, Chrome 3+, Opera 10+ Thursday, 17 January 13
  7. 12.

    Main File require.config({ // we'll get back to this });

    require(["lib/jquery"], function($) { $("body").css("background", "red"); }); Thursday, 17 January 13
  8. 13.

    Base Path • The base path is the directory your

    main file is in • data-main=”lib/app.js” • base path = “lib” • To load lib/foo.js: require([“foo”],...) Thursday, 17 January 13
  9. 14.

    Defining Modules define( ["lib/foo"], function(foo) { var myModule = {

    sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
  10. 16.

    Multiple Deps define( ["lib/foo", “lib/bar”], function(foo, bar) { var myModule

    = { sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
  11. 17.

    But • What about libraries that don’t support AMD? •

    jQuery does (bottom of jQuery source) • But others don’t. • For example, Underscore Thursday, 17 January 13
  12. 18.

    Shimming • RequireJS supports this through shims. • Underscore does

    expose itself globally • So we can hook into that. Thursday, 17 January 13
  13. 19.

    require.config({ shim: { 'lib/underscore.min': { exports: '_' } } });

    require(["lib/underscore.min"], function(U) { console.log(U.map); }); Underscore Shim Thursday, 17 January 13
  14. 22.

    require.config({ paths: { 'underscore': 'vendor/underscore.min' }, shim: { 'underscore': {

    exports: '_' } } }); require(["underscore"], function(U) { console.log(U.map); }); Paths + Shim Thursday, 17 January 13
  15. 23.

    require.config({ paths: { 'backbone': 'vendor/backbone.min', 'underscore': 'vendor/underscore.min' }, shim: {

    'backbone': { deps: ['underscore', 'vendor/jquery.min'], exports: 'Backbone' } } }); Backbone Shim Thursday, 17 January 13
  16. 25.

    Optimiser • Minifies our JS Code into one file •

    Intelligently minifies based on dependencies • Runs through Node Thursday, 17 January 13
  17. 28.

    $ node node_modules/requirejs/bin/r.js -o build.js Tracing dependencies for: app Uglifying

    file: /Users/JackFranklin/Dropbox/Sites/ takeoffrequire/built.js Optimiser Go! Thursday, 17 January 13
  18. 29.
  19. 31.

    In Summary • Split your code into modules • Shim

    libraries that don’t support AMD • Set up paths for easier reference • Run R.js before deploying Thursday, 17 January 13