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

AMD with RequireJS

AMD with RequireJS

Another brown bag on AMD concepts and RequireJS

Matthew Osborn

June 29, 2015
Tweet

More Decks by Matthew Osborn

Other Decks in Technology

Transcript

  1. RequireJS
    Asynchronous  Module  Defini2on    

    View full-size slide

  2. THE PROBLEM
    Dependency Injection
    Bundles get Large
    Script Tag Ordering

    View full-size slide

  3. THE SOLUTION
    Asynchronous Loading
    Dependency Chain Construction
    import / using / require

    View full-size slide

  4. AMD
    CommonJS
    RequireJS

    View full-size slide

  5. define("person",  [],  func2on  ()  {  
           return  {  firstName:  "",  lastName:  ""  };  
    })  
     
    define("employee",  ["person"],  func2on  (p)  {  
           return  {  base:  p,  id:  "123"  };  
    });  

    View full-size slide

  6. // person.js  
    define([],  func2on  ()  {  
           return  {  firstName:  "",  lastName:  ""  };  
    })  
    // employee.js  
    define(["person"],  func2on  (p)  {  
           return  {  base:  p,  id:  "123"  };  
    });  

    View full-size slide

  7. // synchronous loading...
    var employee = require("employee");
    // asynchronous loading...
    require(["employee"], function (employee) {
    });

    View full-size slide

  8. DEMO
    Setup  &  Consump2on  
    r.js  &  Building  /  Minifica2on  
    Typescript  AMD  PaQerns  
    Control’s  conversion  to  
    AMD  

    View full-size slide

  9. @OSBORNM
    github  |  twiQer  |  .com  

    View full-size slide