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    

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

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

    / require
  4. AMD CommonJS RequireJS

  5. define("person",  [],  func2on  ()  {          return

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

       return  {  firstName:  "",  lastName:  ""  };   })   // employee.js   define(["person"],  func2on  (p)  {          return  {  base:  p,  id:  "123"  };   });  
  7. // synchronous loading... var employee = require("employee"); // asynchronous loading...

    require(["employee"], function (employee) { });
  8. DEMO Setup  &  Consump2on   r.js  &  Building  /  Minifica2on

      Typescript  AMD  PaQerns   Control’s  conversion  to   AMD  
  9. @OSBORNM github  |  twiQer  |  .com