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

Choosing a JavaScript Framework: ForwardJS

Pam Selle
February 04, 2015

Choosing a JavaScript Framework: ForwardJS

More than you wanted to know about the major players in client-side JavaScript frameworks, with resources and code samples.

Pam Selle

February 04, 2015
Tweet

More Decks by Pam Selle

Other Decks in Technology

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. WHAT YOU GET • Strongly defined building components (directives, controllers,

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

    use your copy if provided on page, supports 2.1+)
  14. 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)
  15. MODULES Every Angular app has 1+ module definition var  realtorsapp

     =  angular.module('realtorsapp',  []);   <html  ng-­‐app="realtorsapp">
  16. 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>
  17. 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>  
  18. 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          };      });  
  19. 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);        });    });   });
  20. 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>
  21. OTHER COMPONENTS • Filters • Animations • i18n l10n •

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

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

    Two-way data binding • Ember Components (like directives) • Great routing support • Dependency injection
  24. 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
  25. 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>
  26. 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>   …
  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>   …   var  App  =  Ember.Application.create();  
  28. 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>   …
  29. ROUTES App.ApplicationRoute  =  Ember.Route.extend({      model:  function()  {  

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

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

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

    is like git diffs for the browser rendering • Super performant
  33. 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/