Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Choosing a JavaScript Framework

Pam Selle
November 18, 2014

Choosing a JavaScript Framework

Slides from the JavaScript Summit talk on JavaScript frameworks.

http://environmentsforhumans.com/2014/javascript-summit/

Pam Selle

November 18, 2014
Tweet

More Decks by Pam Selle

Other Decks in Programming

Transcript

  1. in the hope that you can make an informed choice

    for 
 a project, for additional learning, or general knowledge
  2. BUT

  3. WHAT YOU GET • Core MVC components • Nudge in

    an event-driven application design
  4. BACKBONE MODELS Make a model subclass using .extend( ) var

     Property  =  Backbone.Model.extend({      star:  function()  {          this.set("starred",  !this.get("starred"));          this.save();      }   });   (code in this presentation is from the book, & final versions of sample apps are @ github.com/pselle/choosing-javascript-framework)
  5. BACKBONE VIEWS .extend(), define DOM properties, render var  PropertyShowView  =

     Backbone.View.extend({      tagName:  'div',      className:  'property',      template:  loadTemplate("property-­‐show"),      render:  function()  {          this.el.innerHTML  =  this.template(this.model.attributes);          return  this;      }   });  
  6. BACKBONE VIEWS .extend(), define DOM properties, render var  PropertyShowView  =

     Backbone.View.extend({      tagName:  'div',      className:  'property',      template:  loadTemplate("property-­‐show"),      render:  function()  {          this.el.innerHTML  =  this.template(this.model.attributes);          return  this;      }   });  
  7. BACKBONE VIEWS .extend(), define DOM properties, render var  PropertyShowView  =

     Backbone.View.extend({      tagName:  'div',      className:  'property',      template:  loadTemplate("property-­‐show"),      render:  function()  {          this.el.innerHTML  =  this.template(this.model.attributes);          return  this;      }   });  
  8. BACKBONE VIEWS .extend(), define DOM properties, render var  PropertyShowView  =

     Backbone.View.extend({      tagName:  'div',      className:  'property',      template:  loadTemplate("property-­‐show"),      render:  function()  {          this.el.innerHTML  =  this.template(this.model.attributes);          return  this;      }   });  
  9. BACKBONE VIEWS Using a view with a model
 var  myHouse

     =  new  Property({    location:  "middle  of  our  street",    noiseLevel:  "usually  quite  loud"   });   ! var  propertyView  =  new  PropertyView({    model:  myHouse   });   ! propertyView.render()   document.body.appendChild(propertyView.el);   !
  10. BACKBONE VIEWS <div  class="property">
    <h1>1123  Sunny  Road</h1>    

     <h2>37890</h2>      <img  src="/shared/images/ andrewmalone_house.jpg">      <p>This  is  a  fantastic  house!</p>      <p>Asking  price:  230000</p>      <button  class="pure-­‐button  star">Save  as   favorite</button>   </div>
  11. OTHER COMPONENTS • Collections • Groups of models • Router

    • Read/write the URL without reloading the page • Events • Views trigger updates to model, vice versa • Core component of Backbone
  12. BASICS • Fastest growing JavaScript framework • Write behavior in

    your markup (directives) • Google, Google, Google
  13. WHAT YOU GET • Strongly defined building components (directives, controllers,

    services) • Two-way data binding • Dependency injection • Auxiliary tools available: Karma, Protractor
  14. DEPENDENCIES • None • Loads its own smaller jQuery
 (will

    use your copy if provided on page, supports 2.1+)
  15. WEAKNESSES • Recent rise to prominence = less time in

    prod • High lock-in with writing behavior in markup • Skeptics for future roadmap/Google backing • 1.3 drops IE8 support, some teams stuck in older version now (abandonware fears)
  16. MODULES Every Angular app has 1+ module definition var  realtorsapp

     =  angular.module('realtorsapp',  []);   <html  ng-­‐app="realtorsapp">
  17. DIRECTIVES Modify the behavior of the DOM (custom) angular.module('myapp',  [])

         .directive('unicorn',  function()  {          return  {              restrict:  'E',              link:  function(scope,  element,  attrs)  {                  element.html('Unicorn')              }          };   });   ! <unicorn></unicorn>
  18. DIRECTIVES Modify the behavior of the DOM (built in) <table

     ng-­‐init="properties=['123  Iris  Lane',  '234   Sunflower  Blvd','923  Azalea  Rd']">      <tr  ng-­‐repeat="property  in  properties">          <td><a  href="#">{{  property  }}</a></td>          <td>20001</td>          <td>$1M</td>      </tr>   </table>  
  19. SERVICES • Singleton to inject into any Angular component •

    Lazily instantiated angular.module('realtorsApp')      .factory('Properties',  function  ($http)  {          var  getProperties  =  function  getProperties()  {              return  $http.get('data.json')                  .then(function  (res)  {                      return  res.data.properties;                  });          };          return  {              getProperties:  getProperties          };      });  
  20. CONTROLLERS • Controllers augment scope ($scope) • Bind business logic

    to the view angular.module('realtorsApp').controller('PropertiesController',    function  ($scope,  Properties,  $window)  {        Properties.getProperties()            //  chain  w/  the  promise  returned  by  getProperties()            .then(function  success(properties)  {                $scope.properties  =  properties;            },  function  failure(err)  {                $window.alert(err);        });    });   });
  21. CONTROLLERS • Controllers augment scope ($scope) • Bind business logic

    to the view <table  ng-­‐controller="PropertyController">      <tr  class="property-­‐item"  ng-­‐repeat="property  in  properties">          <td>              <h1><a  ng-­‐href="#/detail/ {{  property.id  }}">{{  property.streetAddress  }}</a></h1>              <p>Asking  Price:  {{  property.price  |  currency  }}</p>              <p>{{  property.zipCode  }}</p>          </td>      </tr>   </table>
  22. OTHER COMPONENTS • Filters • Animations • i18n l10n •

    Accessibility with ngAria • Testing (Karma, Protractor)
  23. BASICS • Most complete JS framework • Built completely on

    modular OSS components • Community super-powered
  24. WHAT YOU GET • Very strongly defined MVC components •

    Two-way data binding • Ember Components (like directives) • Great routing support • Dependency injection
  25. WEAKNESSES • Sometimes TOO much information • “Right” way to

    do things = difficult to get up to speed quickly • Lots of rules • Not as pervasive as other two major frameworks
  26. APP SETUP <!DOCTYPE  html>   <html>   <head>…</head>   <body>

         <script  type="text/x-­‐handlebars"  id="application">          <div  id="page-­‐wrap"  class="pure-­‐skin-­‐ember">              <div  id="header-­‐wrap">                  <h1  class="page-­‐header">Realtors  &amp;  Co  Properties</h1>              </div>              <div  id="content"></div>          </div>      </script>      <script  src="vendor/jquery/dist/jquery.js"></script>      <script  src="vendor/handlebars/handlebars.js"></script>      <script  src="vendor/ember/ember.js"></script>      <script  src="js/app.js"></script>   </body>   </html>
  27. APP SETUP …      <script  src="vendor/jquery/dist/ jquery.js"></script>    

     <script  src="vendor/handlebars/ handlebars.js"></script>      <script  src="vendor/ember/ember.js"></ script>      <script  src="js/app.js"></script>   …
  28. APP SETUP …      <script  src="vendor/jquery/dist/jquery.js"></ script>    

     <script  src="vendor/handlebars/handlebars.js"></ script>      <script  src="vendor/ember/ember.js"></script>      <script  src="js/app.js"></script>   …   ! var  App  =  Ember.Application.create();  
  29. APP SETUP …      <script  type="text/x-­‐handlebars"  id="application">    

         <div  id="page-­‐wrap"  class="pure-­‐skin-­‐ember">              <div  id="header-­‐wrap">                  <h1  class="page-­‐header">Realtors  &amp;  Co   Properties</h1>              </div>              <div  id="content"></div>          </div>      </script>   …
  30. ROUTES App.ApplicationRoute  =  Ember.Route.extend({      model:  function()  {  

           return  $.getJSON('/shared/data.json');      }   });      
  31. MODELS App.ApplicationRoute  =  Ember.Route.extend({      model:  function()  {  

           return  $.getJSON('/shared/data.json');      }   });      
  32. CONTROLLERS Decorate a model with display logic App.IndexController  =  Ember.ArrayController.extend({

         queryParams:  ['sortAscending'],      sortProperties:  ['price']   });
  33. REACT • Only view layer • Shadow DOM • React

    is like git diffs for the browser rendering • Super performant
  34. POLYMER • Web components, web components, web components • Anything

    I say will be wrong in 3 hours • Also see: x-tags.org, from Mozilla
  35. EVALUATION TOOLS • Spreadsheet for ranking: http://bit.ly/1g6kDSS • Rank frameworks

    according to business, technical, and team criteria • Wharton DevTap: 
 http://technology.wharton.upenn.edu/devtap/