Your SlideShare is downloading. ×
0
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Dependency Management with RequireJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dependency Management with RequireJS

9,433

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,433
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
96
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • node r.js -o name=main out=js/main-built.jsbaseUrl=js
  • node r.js -o name=main out=js/main-built.jsbaseUrl=js
  • Transcript

    • 1. DEPENDENCY    MANAGEMENT  with  RequireJS  
    • 2. HELLO   my  name  is   Aaron Hardy ·∙   @AARONIUS          AARONHARDY.COM  So8ware  Engineer,  Adobe  Digital  MarkeAng  Suite   We  enable  management,  measurement,  execu1on,  and   op1miza1on  of  digital  adver1sing  and  marke1ng.  
    • 3. What  is  dependency  management?  Loading…  The  right  code.  In  the  right  order.  At  the  right  Ame.  At  the  right  speed.    (oh  and  btw,  make  it  easy)      
    • 4. Old-­‐school  Dependency  Management  What  are  the  dependencies  here?  <script src="script3.js"></script><script src="script1.js"></script><script src="script13.js"></script><script src="script7.js"></script><script src="script6.js"></script><script src="script12.js"></script><script src="script4.js"></script><script src="script11.js"></script><script src="script5.js"></script><script src="script9.js"></script><script src="script8.js"></script><script src="script10.js"></script><script src="script2.js"></script>
    • 5. Old-­‐school  Dependency  Management  
    • 6. What  is  a  module?  A  structure  used  to  encapsulate  methods  and  aTributes  to  avoid  polluAng  the  global  namespace.  var Calculator = (function(){ function funkify(num) { return num * Math.random() / Math.random(); } function add(a, b, getFunky){ var sum = a + b; return getFunky ? funkify(sum) : sum; } return { add:add };})();
    • 7. What  is  AMD?  Asynchronous  module  definiAon.      •  A  mechanism  for  defining  modules  such  that  the  module  and  its   dependencies  can  be  asynchronously  loaded.  •  Suited  for  a  browser  environment.  •  Generally  used  in  tandem  with  an  AMD  loader.  
    • 8. What  is  RequireJS?  A  JavaScript  file  and  module  loader.  Capable  of  loading  modules  defined  in  the  AMD  format  and  their  dependencies.    Not  the  only  AMD  loader  (but  unofficially  the  most  popular)  •  curl.js  •  lsjs  •  dojo  •  mootools    Open  source.  New  BSD  or  MIT  licensed.  
    • 9. Defining  a  module    /js/book.js  define({ title: "My Sisters Keeper", publisher: "Atria"});
    • 10. RequesAng  dependencies  /js/bookshelf.js  define([ book], function(book) { return { listBook: function() { alert(book.title); } };});
    • 11. Se]ng  up  your  app  /index.html  <!DOCTYPE html><html> <head> <title>RequireJS Example</title> <script data-main="js/main" src="js/libs/require.js"></script> </head> <body/></html>
    • 12. Se]ng  up  your  app  /js/main.js  require([ bookshelf], function(bookshelf) { bookshelf.listBook();});
    • 13. define()  vs.  require()  define()  completes  three  steps:  1.  Loads  the  specified  dependencies  2.  Calls  the  callback  funcAon  3.  Registers  the  return  value  from  the  callback  funcAon  require()  only  performs  #1  and  #2.  
    • 14. DEMO  hTp://code.aaronhardy.com/require-­‐literal  
    • 15. Defining  a  constructor  module    /js/book.js  define(function() { var Book = function(title, publisher) { this.title = title; this.publisher = publisher; }; return Book;});
    • 16. Using  a  constructor  module    /js/bookshelf.js  define([ book], function(Book) { var books = [ new Book(A Tale of Two Cities, Chapman & Hall), new Book(The Good Earth, John Day) ]; return { listBooks: function() { for (var i = 0, ii = books.length; i < ii; i++) { alert(books[i].title); } } };});
    • 17. DEMO  hTp://code.aaronhardy.com/require-­‐constructor  
    • 18. Configuring  RequireJS  /js/main.js  require.config({ baseUrl: /another/path, paths: { myModule: dirA/dirB/dirC/dirD/myModule’, templates: ../templates, text: libs/text }});require([ bookshelf], function(bookshelf) { bookshelf.listBook();});
    • 19. Shimming  non-­‐AMD  libraries  /js/main.js  require.config({ paths: { jquery: libs/jquery, underscore: libs/lodash, backbone: libs/backbone, }, shim: { backbone: { deps: [underscore, jquery], exports: Backbone }, underscore: { exports: _’ } }});
    • 20. Using  shimmed  libraries  /js/book.js  define([ backbone], function(Backbone) { return Backbone.Model.extend({ defaults: { genre: historical } })});
    • 21. RequireJS  plugins  Used  for  loading  and/or  transforming  different  types  of  dependencies  either  at  run-­‐Ame  or  compile-­‐Ame.  •  text  –  Loads  files  as  plain  text  •  i18n  –  InternaAonalizaAon  •  cs  –  Loads  and  compiles  CoffeeScript  •  font  –  Loads  web  fonts  •  image  –  Loads  image  files  •  json  –  Loads  and  parses  JSON  •  mdown  –  Loads  and  compiles  Markdown    and  many  more…    
    • 22. RequireJS  text  plugin  usage  /js/main.js  require.config({ paths: { jquery: libs/jquery, templates: ../templates, text: libs/text’ }});require([ jquery, text!templates/book.tpl.html], function($, template) { $(document).ready(function() { $(body).html(template); });});
    • 23. DEMO  hTp://code.aaronhardy.com/require-­‐template  
    • 24. CondiAonal  dependencies  require([ modernizr], function(Modernizr) { var drawCircle = function() { … }; if (Modernizr.canvas) { drawCircle(); } else { require([excanvas], drawCircle); }});
    • 25. Errbacks  requirejs.config({ enforceDefine: true, paths: { jquery: http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min }});require([jquery], function ($) { //Do something with $ here}, function (err) { var failedId = err.requireModules && err.requireModules[0], if (failedId === jquery) { requirejs.undef(failedId); requirejs.config({ paths: { jquery: local/jquery } }); require([jquery], function () {}); }});
    • 26. OpAmizaAon  ConcatenaAon  and  minificaAon  r.js  –  RequireJS  opAmizer  able  to  run  in  Node  or  Rhino  (Java)  
    • 27. DEMO  hTp://code.aaronhardy.com/require-­‐opAmizaAon  node  libs/r.js  -­‐o  baseUrl=.  name=main  out=main-­‐built.js  
    • 28. OpAmizaAon  using  almond  In  producAon,  replaces  RequireJS  and  is  bundled  with  built  file.  •  1K  (almond)  vs  14K  (RequireJS)  •  Avoids  two  separate,  sequenAal  HTTP  requests    Biggest  limitaAon:  •  No  dynamic  loading;  all  dependencies  must  be  in  the  same  file  or   loaded  beforehand    
    • 29. DEMO  hTp://code.aaronhardy.com/require-­‐almond  node  libs/r.js  -­‐o  baseUrl=.  name=libs/almond  include=main  out=main-­‐built.js  
    • 30. THANK  YOU!  @aaronius  ·∙  aaronhardy.com  

    ×