Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. RequireJS Jack Franklin Take Off Conf January 2013 Thursday, 17

    January 13
  2. Warning! Developer-designed-slides to follow Thursday, 17 January 13

  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
  4. The Problems <script src=”jquery.js”></script> <script src=”underscore.js”></script> <script src=”backbone.js”></script> <script src=”app.js”></script>

    <script src=”slider.jquery.js”></ script> Thursday, 17 January 13
  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
  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
  7. AMD • Modular Code • Define modules and dependencies •

    Load modules asynchronously • All dependencies dealt with. Thursday, 17 January 13
  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
  9. RequireJS http://requirejs.org/ Thursday, 17 January 13

  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
  11. Setup <script src=”path/to/require.js” data-main=”js/app.js”></script> Thursday, 17 January 13

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

    require(["lib/jquery"], function($) { $("body").css("background", "red"); }); Thursday, 17 January 13
  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
  14. Defining Modules define( ["lib/foo"], function(foo) { var myModule = {

    sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
  15. Using Modules require(["mymodule"], function(myModule) { myModule.sayHello(); }); Thursday, 17 January

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

    = { sayHello: function() { alert("Hello"); } }; return myModule; } }); Thursday, 17 January 13
  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
  18. Shimming • RequireJS supports this through shims. • Underscore does

    expose itself globally • So we can hook into that. Thursday, 17 January 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
  20. Paths • Typing lib/underscore.min gets boring • Setup custom paths

    for modules Thursday, 17 January 13
  21. require.config({ paths: { 'foo': 'my/really/long/path/to/foo.js' }, }); require(["foo"], function(foo) {

    foo.doSomething(); }); Custom Paths Thursday, 17 January 13
  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
  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
  24. require(["backbone"], function(B) { console.log(B); }); Backbone Shim Thursday, 17 January

    13
  25. Optimiser • Minifies our JS Code into one file •

    Intelligently minifies based on dependencies • Runs through Node Thursday, 17 January 13
  26. $ npm install requirejs Installing Thursday, 17 January 13

  27. ({ baseUrl: "lib", name: "app", out: "built.js", mainConfigFile: 'lib/app.js' })

    build.js file Thursday, 17 January 13
  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
  29. Be Aware! • This file does not include the RequireJS

    source. Thursday, 17 January 13
  30. <!DOCTYPE html> <html> <head> <title>Require</title> <script src="lib/require/require.js"></script> <script src="built.js"></script> </head>

    <body> </body> </html> Works as Before Thursday, 17 January 13
  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
  32. Resources • requirejs.org • javascriptplayground.com • addyosmani.com • github.com/javascriptplayground/ requirejs-example

    Thursday, 17 January 13
  33. The End Questions? @Jack_Franklin Thursday, 17 January 13