RaptorJS: A Modular JavaScript Toolset by eBay (jsEverywhere 2012)

RaptorJS is a collection of JavaScript tools and libraries that make web application development easier by solving common problems.

Transcript

1. RAPTORJS:  A  MODULAR  JAVASCRIPT   TOOLSET  BY  EBAY   Presented  by:   Patrick  Steele-­‐Idem   Presenta5on  Pla7orm  Engineer,  eBay     October  2012   h-p://raptorjs.org/  
2. RaptorJS  is  a  collec;on  of  tools  and  libraries  that   make  web  applica;on  development  easier  by   solving  common  problems.  
3. Which  Problems  and  Challenges     does  RaptorJS  Solve?   •  Sharing  code  across  environments   •  Suppor;ng  mul;ple  target  devices   •  Op;mizing  web  applica;ons   •  Build  tools  (yes,  build  tools  can  be  a  problem)   •  Managing  complex  dependencies   •  Downloading  modules  asynchronously  (efficiently)   •  Working  with  compiled  resources  such  as  LESS   •  Wri;ng  maintainable  JavaScript  code  
4. RaptorJS  is  a  toolset  designed  to  work   alongside  exis;ng  JavaScript  libraries—not   replace  them.       Since  it's  a  toolset  and  not  a  framework,  feel   free  to  use  only  what  you  need.  
5. RaptorJS  Is  Not:   •  A  replacement  for  jQuery/Backbone/etc.   •  A  UI  framework   •  A  replacement  module  loader  for  Node   •  An  MV**  framework  
6. Managing  dependencies  in  JavaScript     applica;ons  can  be  hard.       ?   •  Dependencies  change   •  Dependencies  are  transi;ve     •  Dependencies  can  vary  by  target  environment   •  Many  different  types  of  dependencies  (JS,  CSS,  LESS,  etc.)   •  Order  ma-ers  
8. Should  the  users  of  your  code  have  to   understand  all  of  its  dependencies?     We  don’t  think  so.  
9. Introducing  RaptorJS!     •  A  packaging  system  and  an  op;mizer   •  An  asynchronous  module  loader  for  the  browser   •  A  module  loader  for  server-­‐side  JavaScript   •  A  lightweight  JavaScript  library  for  defining   modules,  classes,  mixins  and  enums   •  Plus!...Raptor  Templates  (awesome)  and  a  Widget   Framework   RaptorJS  is  a  set  of  tools  that  includes  the  following:  
10. Packaging  Code  
11. Packaged  Modules   JS   CSS   JS   LESS   moduleA   moduleB   JS   JS   JS   JS   JS   JS   JS   JS   moduleC   What  can  you  do  with  packages?   •  Share  code  with  others   •  Load  code  on  the  server   •  Deliver  code  to  the  browser  
12. Describing  Dependencies   How  do  you  describe  the  dependencies  of  a   JavaScript  module  or  UI  component?       Answer:  package.json     package.json  files  allow  rich  metadata  and   dependency  informa;on  to  be  defined  for     JavaScript  modules  and  UI  components.  
13. RaptorJS  packages  allow  for   environment-­‐specific  dependencies.  
14. Sample  package.json   {          "name":  "test",          "version":  "1.0",          "description":  "A  test  module",            "raptor":  {                  "dependencies":  [                          {"module":  "widgets"},                          "test.js",                          "test.css"                  ]                              }   }   Op;onal  metadata   These  files  are  always   included/loaded  (in  order)   This  dependency  is  ignored  unless  the   “server”  extension  is  enabled.   Package   extensions   This  module  depends  on  the  “widgets”  module                  ,                  "extensions":  [                          {                                  "name":  "server",                                  "dependencies":  [                                          "test_server.js"                                  ]                          }                  ]  
15. Delivering  Code  
16. The  RaptorJS  Op;mizer   •  Generates  op;mized  JS/CSS  bundles  and  the   HTML  markup  to  include  them  in  your  pages   •  Compiles,  minifies  and  bundles  dependencies   •  Source  code  agnos;c   •  Generates  op;mized  bundles  with  checksums   (cache  forever)   •  Configurable  and  extensible   •  Use  at  build-­‐;me  or  run;me   •  Runs  under  Node  (Rhino  support  later)  
17. RaptorJS  Op;mizer   Bundle  Configura;on   <bundles  name="default">            <bundle  name=”bundle1">                  <module  name=”my-­‐module"  recursive="true"/>    <module  name=”jquery"  recursive="true"/>                  <css  path=”/path/to/my.css”>          </bundle>                    <bundle  name=”bundle2">                  <module  name=”foo"  recursive="true"/>    <module  name=”bar"  recursive="true"/>          </bundle>     </bundles>  
18. RaptorJS  Op;mizer   Raptor  Templates  Taglib   <c:template  xmlns:c="core”  xmlns:optimizer="optimizer">                    <optimizer:page  name="test-­‐page">                  <dependencies>                          <module  name="module-­‐a"/>                          <module  name="module-­‐b"/>                          <css  path="test-­‐page.css"/>                          <js  path="test-­‐page.js"/>                  </dependencies>          </optimizer:page>                    <html>                  <head>                          <title>Test  Page</title>                          <optimizer:slot  name="head"/>                  </head>                  <body>                          Hello  World!                          <optimizer:slot  name="body"/>                  </body>          </html>   </c:template>  
19. RaptorJS  Op;mizer   Raptor  Templates  Taglib  (output)   <html>          <head>                  <title>Test  Page</title>                  <link  rel="stylesheet"                            type="text/css"                            href="/static/bundle1-­‐head-­‐bf4cf798.css">          </head>          <body>                  Hello  World!                  <script                          type="text/javascript"                          src="/static/bundle-­‐body-­‐f01892af.js"></script>          </body>   </html>  
20. The  RaptorJS  Async  Loader   •  Allows  you  to  download  addi;onal  resources  aher   the  ini;al  page  load   •  Extremely  lightweight  and    simple  implementa;on   •  U;lizes  metadata  generated  by  the  RaptorJS   Op;mizer   •  Metadata  includes  dependency  informa;on  and  URLs  (with   checksums)   •  Parallel  downloading   •  Immediate  execu;on  
21. RaptorJS  Op;mizer   Async  Loader  Metadata   {          "my-­‐module":  {                  "js":  ["/static/page1-­‐async-­‐body-­‐d9103c2a.js"],                  "css":  ["/static/page1-­‐async-­‐head-­‐1929e414.css",                                    "/static/bundle2-­‐head-­‐c17b7d9b.css"],                  "requires":  ["another-­‐module"]          },            "another-­‐module":  {                  "js":  ["/static/bundle2-­‐body-­‐f642f7bc.js"]          }   }  
22. Wri;ng  Code  
23. Object-­‐oriented  Programming   RaptorJS  provides  support  for  modules,  classes,   mixins  and  enums.       RaptorJS  classes  support  inheritance.     All  objects  are  lazily  ini;alized  and  created  using  a   factory  func;on.  The  factory  func;on  allows  each   object  to  have  a  private  namespace  using  func;on   closures.  
24. Object-­‐oriented  Programming   Lazy  vs.  Non-­‐Lazy  Ini;aliza;on   var  myModule  =  (function()  {        //NOT  Lazy     }());  //ß  Self-­‐executing  function     registeredModules['myModule']  =  function()  {          //Lazy   }  
25. Object-­‐oriented  Programming   Defining  Modules   raptor.define  (          "shapes",          function(raptor)  {                                    var  Rectangle  =  raptor.require("shapes.Rectangle"),                          Circle  =  raptor.require("shapes.Circle");                                    return  {                          createRectangle:  function(width,  height)  {                                  return  new  Rectangle(width,  height);                          },                                                    createCircle:  function(radius)  {                                  return  new  Circle(radius);                          },                                                    getTotalArea:  function(shapes)  {                                  var  area  =  0;                                  raptor.forEach(shapes,  function(shape)  {                                          area  +=  shape.getArea();                                  });                                  return  area;                          }                  };          });   Module  name   Factory   Func;on   “Imports”   and   private   variables   Module   proper;es  
26. Object-­‐oriented  Programming   Defining  Modules   raptor.define  (          "shapes",          function(raptor)  {                                    var  Rectangle  =  raptor.require("shapes.Rectangle"),                          Circle  =  raptor.require("shapes.Circle");                                    return  {                          createRectangle:  function(width,  height)  {                                  return  new  Rectangle(width,  height);                          },                                                    createCircle:  function(radius)  {                                  return  new  Circle(radius);                          },                                                    getTotalArea:  function(shapes)  {                                  var  area  =  0;                                  raptor.forEach(shapes,  function(shape)  {                                          area  +=  shape.getArea();                                  });                                  return  area;                          }                  };          });   Module  name   Factory   Func;on   “Imports”   and   private   variables   Module   proper;es  
27. Object-­‐oriented  Programming   Prototype-­‐based  Inheritance   raptor.define  (          “shapes.Rectangle”,          “shapes.Shape”,          function()  {                  var  Rectangle  =  function(width,  height)  {                          Rectangle.superclass.constructor.call(                                  this,  “rect”);                          this.width  =  width;                          this.height  =  height;                  };                                    Rectangle.prototype  =  {                          getArea:  function()  {                                  return  this.width  *  this.height;                          }                  };                                    return  Rectangle;          });   Superclass  name   Returned  class  gets  augmented  with   "superclass"—a  reference  to  the   prototype  of  the  superclass  
28. Object-­‐oriented  Programming   Mixins   raptor.defineMixin(          “shapes.CircleMixins”,          function()  {                  area:  function()  {                          return  Math.PI  *  this.radius  *  this.radius;                  },                  scale:  function(percentage)  {                          this.radius  *=  percentage;                  }          });     raptor.defineClass(          “ui.CircleButton”,          {  "mixins":  ["shapes.CircleMixins”]  },          function()  {                  ...          });   Mixin  name   An  array  of  mixins  to  apply  to   the  class  prototype  
29. Object-­‐oriented  Programming   Extending  Objects  with  Mixins   raptor.extend(          "cookies",          function()  {                                    return  {                          getCookie:  function(name)  {                                  var  cookiesStr  =  document.cookies;                                  ...                          }                  };          });   Name  of  module  or   class  being  extended   Mixins  are  lazily  applied  when  the   target  object  is  first  ini;alized  
30. Object-­‐oriented  Programming   Using  Modules  and  Classes   //  1)  Obtaining  a  reference  to  the  “shapes”  module   var  shapes  =  raptor.require("shapes");     //  2)  Creating  an  instance  of  a  Rectangle   var  rect  =  shapes.createRectangle(5,  6);     //  3)  Obtaining  a  reference  to  the  “shapes.Circle”  class:   var  Circle  =  raptor.require("shapes.Circle");   //NOTE:  Circle  is  a  reference  to  the  constructor  function     //  4)  Creating  a  new  instance  of  a  Circle:   var  circle  =  new  Circle(25);     //  5)  Loading  modules  asynchronously:   raptor.require(          ["moduleA",  "moduleB"],            function(moduleA,  moduleB)  {                  //Do  something  with  the  loaded  modules...          });    
32. Design  Philosophies   Cross-­‐environment   Same  APIs  in  mul;ple  environments   API  Documenta;on   Automa;cally  generated  documenta;on   Reusable  Code   Packaging  and  dependency  management   Object  Oriented   Modules,  classes  and  mixins   Easily  Testable   Server-­‐side  tes;ng  and  sta;c  code  analysis   Lightweight  and  Fast   Lazy  ini;aliza;on,  ;ny  footprint  and     clean  syntax   Framework  Agnos;c   Use  RaptorJS  with  your  favorite  libraries   Modular  and  Adap;ve   Load  only  what  you  need  
33. That’s  all…for  now.  Ques;ons?     Contact  Informa<on:   Patrick  Steele-­‐Idem  <psteeleidem@ebay.com>   Twi-er:  @psteeleidem     Open  Source!   h-p://raptorjs.org/  
34. Backup  Slides  
35. Op;mizing  Web  Applica;ons   •  All  resources  should  be  served  up  by  a  CDN  or   caching  proxy   •  All  URLs  should  include  a  checksum   –  NOTE:  Accurate  checksums  cannot  be  generated   from  the  client   •  All  resources  should  be  set  to  cache   "permanently"  (no  revalidate)   •  Keep  bundles  consistent  across  pages!   •  Don’t  rely  on  a  loader  for  all  applica;on  code   •  Lazily  load  when  possible   •  Loading  ini;al  applica;on  code  should  not   depend  on  a  loader  to  be  loaded  first