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

RequireJS

 RequireJS

Talk given at NDC,Oslo - June 2013

Sebastiano Armeli

June 13, 2013
Tweet

More Decks by Sebastiano Armeli

Other Decks in Programming

Transcript

  1. RequireJS
    Sebastiano Armeli-Battana
    @sebarmeli
    NDC 2013, Oslo (Norway)
    Thursday, June 13, 13

    View Slide

  2. Thursday, June 13, 13

    View Slide

  3. Thursday, June 13, 13

    View Slide

  4. Thursday, June 13, 13

    View Slide

  5. Thursday, June 13, 13

    View Slide

  6. 1
    2
    3
    4
    5
    6
    Thursday, June 13, 13

    View Slide

  7. app.js
    view.js
    Thursday, June 13, 13

    View Slide

  8. view.js
    ------------
    Thursday, June 13, 13

    View Slide

  9. app.js
    ------------
    Thursday, June 13, 13

    View Slide

  10. 4
    6
    4
    6
    Thursday, June 13, 13

    View Slide

  11. Thursday, June 13, 13

    View Slide

  12. Thursday, June 13, 13

    View Slide

  13. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    Thursday, June 13, 13

    View Slide

  14. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    1
    2
    3
    5
    4
    6
    Thursday, June 13, 13

    View Slide

  15. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    1
    2
    3
    5
    4
    6
    4
    1
    3
    2
    5
    6
    Thursday, June 13, 13

    View Slide

  16. Thursday, June 13, 13

    View Slide

  17. Thursday, June 13, 13

    View Slide


  18. Thursday, June 13, 13

    View Slide


  19. AMD
    Thursday, June 13, 13

    View Slide


  20. AMD
    Thursday, June 13, 13

    View Slide

  21. Thursday, June 13, 13

    View Slide

  22. var module = (function(){
    // private variables, methods
    var title = “”;
    function f1() {}
    return {
    // public/privileged methods
    getTitle: function(){
    return title;
    }
    }
    }()) ;
    MODULE PATTERN
    Thursday, June 13, 13

    View Slide

  23. define(function () {
    var title = “”;
    function f1() {}
    return {
    getTitle: function() {
    return title;
    }
    }
    });
    RJS MODULE PATTERN
    Thursday, June 13, 13

    View Slide

  24. define(id?, dependencies?, factory)
    Thursday, June 13, 13

    View Slide

  25. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    view1.js
    ------------
    define([‘helpers’],
    function(helpers){
    return {
    init: function(){}
    }
    });
    define(function(){
    // code here
    });
    helpers.js
    ------------
    Thursday, June 13, 13

    View Slide

  26. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    view1.js
    ------------
    define([‘helpers’],
    function(helpers){
    return {
    init: function(){}
    }
    });
    define(function(){
    // code here
    });
    helpers.js
    ------------
    Thursday, June 13, 13

    View Slide

  27. define([‘module1’, module2’],
    function (dep1, dep2) {
    // do something
    }
    )
    Multiple Dependencies
    Thursday, June 13, 13

    View Slide

  28. require(dependencies?, factory)
    Thursday, June 13, 13

    View Slide

  29. index.html
    ------------
    data-main=”js/main.js”<br/>main.js<br/>------------<br/>require([‘view1’],function(view1){<br/>view1.init();<br/>});<br/>index.html<br/>js /<br/>-- main.js<br/>-- helpers.js<br/>-- app /<br/>-- views /<br/>-- view1.js<br/>-- vendor /<br/>-- require.js<br/>Thursday, June 13, 13<br/>

    View Slide

  30. Thursday, June 13, 13

    View Slide

  31. main.js
    ------------
    require.config({
    baseUrl: ‘./js’,
    paths: {
    ‘view1’: ‘app/views/view1’
    }
    });
    require([‘view1’],function(view1){
    view1.init();
    });
    index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    Thursday, June 13, 13

    View Slide

  32. NO blocking!
    Thursday, June 13, 13

    View Slide

  33. Thursday, June 13, 13

    View Slide

  34. var node = document.createElement('script');
    node.async = true;
    node.setAttribute('data-requirecontext',
    context.contextName);
    node.setAttribute('data-requiremodule', moduleName);
    node.src = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(node);
    Script Loader
    Thursday, June 13, 13

    View Slide

  35. require() asynchronous
    de!ne() - de!ne.amd
    AMD
    well suited for browser
    Thursday, June 13, 13

    View Slide

  36. exports.render = function() {};
    var module = require(‘view1’);
    NO de!ne()
    require() synchronous
    Server-side approach
    Thursday, June 13, 13

    View Slide

  37. Simplified CommonJS Wrapper
    define(function(require, exports, module){
    // Module required before the callback runs
    var helpers = require(‘helpers’);
    exports.render = function() {
    helpers.doSomething();
    }
    });
    Thursday, June 13, 13

    View Slide

  38. define([“dep1”], function(require){
    var helpers = require(‘helpers’);
    //code here
    });
    Thursday, June 13, 13

    View Slide

  39. define([“dep1”], function(require){
    var helpers = require(‘helpers’);
    //code here
    });
    Thursday, June 13, 13

    View Slide

  40. Thursday, June 13, 13

    View Slide

  41. Thursday, June 13, 13

    View Slide

  42. if ( typeof define === "function" &&
    define.amd ) {
    define( "jquery", [], function () {
    return jQuery;
    });
    }
    Thursday, June 13, 13

    View Slide

  43. Thursday, June 13, 13

    View Slide

  44. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- backbone.js
    -- underscore.js
    -- jquery.js
    main.js
    ------------
    require.config({
    baseUrl: ‘js/vendor’,
    shim: {
    ‘underscore’:{
    exports: ‘_’
    },
    ‘backbone’: {
    deps: [‘jquery’, ‘underscore’],
    exports: ‘Backbone’
    }
    }
    });
    require([‘backbone’],function(Backbone){
    Backbone.history.start();
    });
    Thursday, June 13, 13

    View Slide

  45. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- backbone.js
    -- underscore.js
    -- jquery.js
    main.js
    ------------
    require.config({
    baseUrl: ‘js/vendor’,
    shim: {
    ‘underscore’:{
    exports: ‘_’
    },
    ‘backbone’: {
    deps: [‘jquery’, ‘underscore’],
    exports: ‘Backbone’
    }
    }
    });
    require([‘backbone’],function(Backbone){
    Backbone.history.start();
    });
    Thursday, June 13, 13

    View Slide

  46. LOADER PLUGINS
    • i18n!, async!, domReady!
    • text!, css!, json!, cs!, hbs!
    [plugin Module ID]![resource ID]
    Thursday, June 13, 13

    View Slide

  47. main.js
    ------------
    require.config({
    baseUrl: ‘./js’
    });
    require([‘text!partials/file.txt’],
    function(txt) {
    // txt goes here
    });
    index.html
    js /
    -- main.js
    -- vendor /
    -- require.js
    -- text.js
    -- partials /
    -- !le.txt
    Thursday, June 13, 13

    View Slide

  48. main.js
    ------------
    require.config({
    baseUrl: ‘./js’
    });
    require([‘css!../css/style.css’],
    function() {
    // After css is loaded
    });
    index.html
    js /
    -- main.js
    -- vendor /
    -- require.js
    -- css.js
    css /
    -- style.css
    Thursday, June 13, 13

    View Slide

  49. Thursday, June 13, 13

    View Slide

  50. 3 requests!
    Thursday, June 13, 13

    View Slide

  51. r.js
    npm install -g requirejs
    OPTIMIZER
    Thursday, June 13, 13

    View Slide

  52. r.js -o tools/build.js
    Thursday, June 13, 13

    View Slide

  53. build.js
    ------------
    ({
    appDir:'../',
    mainConfigFile: '../js/main.js',
    dir: "../build",
    modules: [
    {
    name: "../main"
    }
    ]
    })
    index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    tools /
    -- build.js
    Thursday, June 13, 13

    View Slide

  54. build/js/main.js
    ----------------
    index.html
    build /
    -- index.html
    -- build.txt
    -- js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- tools /
    -- build.js
    js/vendor/../main.js
    ----------------
    js/helpers.js
    js/vendor/view1.js
    js/vendor/../main.js
    build/build.txt
    ----------------
    Thursday, June 13, 13

    View Slide

  55. OPTIMIZER
    1 request!
    Thursday, June 13, 13

    View Slide

  56. ({
    appDir:'../',
    mainConfigFile: '../js/main.js',
    dir: "../build",
    preserveLicenseComments: false,
    removeCombined: true,
    optimize: "uglify2",
    modules: [
    {
    name: "../main",
    excludeShallow: [
    "view1"
    ]
    }
    ]
    })
    Thursday, June 13, 13

    View Slide

  57. SOURCE MAPS
    ({
    // other options
    generateSourceMaps: true,
    optimize: ‘uglify2’
    })
    Thursday, June 13, 13

    View Slide

  58. Testing
    define([“view1”], function(view1) {
    describe(“view1”, function(){
    it(“should do something”, function(){
    // expectations
    });
    });
    });
    Thursday, June 13, 13

    View Slide

  59. runner.html
    ------------
    runner.html
    spec /
    -- view1Spec.js
    -- main.js
    js /
    -- vendor /
    -- require.js
    data-main=”spec/main.js”<br/>require.config({<br/>baseUrl: ‘js/vendor’,<br/>paths: {<br/>‘view1’: ...,<br/>‘spec’: ‘../../spec’<br/>}<br/>});<br/>main.js<br/>------------<br/>Thursday, June 13, 13<br/>

    View Slide

  60. runner.html
    spec /
    -- view1Spec.js
    -- main.js
    js /
    -- vendor /
    -- require.js
    -- domReady.js
    require.config({
    ...
    });
    require(
    [“domReady!”,“spec/view1Spec”],
    function(document){
    jasmine.getEnv().addReporter(
    new jasmine.HtmlReporter()
    );
    jasmine.getEnv().execute();
    });
    main.js
    ------------
    Thursday, June 13, 13

    View Slide

  61. GRUNT integration??
    npm install -g grunt-cli
    Grunt!le
    How to get Grunt?
    Thursday, June 13, 13

    View Slide

  62. GRUNT integration??
    grunt-contrib-requirejs
    npm install -g grunt-cli
    npm install grunt-contrib-require-js --save-dev
    Grunt!le
    How to get Grunt?
    Thursday, June 13, 13

    View Slide

  63. module.exports = function(grunt) {
    var config = require(“build”);
    grunt.initConfig({
    requirejs: {
    compile: {
    options: config
    }
    }
    grunt.loadNpmTasks('grunt-contrib-requirejs');
    }
    Gruntfile.js
    ------------
    Thursday, June 13, 13

    View Slide

  64. grunt requirejs
    Thursday, June 13, 13

    View Slide

  65. ES6 - Modules
    Module de!nition
    module [module ID]
    export [variable | function]
    Module dependency
    import { [var | fn] } from [module ID]
    Thursday, June 13, 13

    View Slide

  66. ES6 - Modules
    module “helpers” {
    }
    module “view1” {
    import helpers from “helpers”;
    exports function init() {...};
    }
    Thursday, June 13, 13

    View Slide

  67. Recap
    Thursday, June 13, 13

    View Slide

  68. Recap
    • Modularity
    Thursday, June 13, 13

    View Slide

  69. Recap
    • No globals
    • Modularity
    Thursday, June 13, 13

    View Slide

  70. Recap
    • Async Script loader
    • No globals
    • Modularity
    Thursday, June 13, 13

    View Slide

  71. Recap
    • Async Script loader
    • No globals
    • Optimization
    • Modularity
    Thursday, June 13, 13

    View Slide

  72. Recap
    • Async Script loader
    • Future proof
    • No globals
    • Optimization
    • Modularity
    Thursday, June 13, 13

    View Slide

  73. http://requirejs.com
    https://github.com/asciidisco/grunt-requirejs
    @sebarmeli
    https://github.com/amdjs/amdjs-api/wiki/AMD
    http://wiki.ecmascript.org/doku.php?id=harmony:modules
    Thursday, June 13, 13

    View Slide