AMD with RequireJS

Another brown bag on AMD concepts and RequireJS

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