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 Slide

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

    View Slide

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

    View Slide

  4. AMD
    CommonJS
    RequireJS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. @OSBORNM
    github  |  twiQer  |  .com  

    View Slide