RequireJS

Talk given at NDC,Oslo - June 2013

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