Choosing a JavaScript Framework

Slides from the JavaScript Summit talk on JavaScript frameworks.

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

Transcript

1. CHOOSING A JAVASCRIPT FRAMEWORK with Pam Selle
 @pamasaur // thewebivore.com
2. SO… WE WROTE THIS THING me, Tim Ruffles, Christopher Hiller, and Jamie White
3. I will not tell you what to do. SPOILERS!
4. What I will do, however
5. is walk you through each of the major frameworks
6. in the hope that you can make an informed choice for 
 a project, for additional learning, or general knowledge
7. AGENDA • What is a JavaScript framework? • Major frameworks: • Backbone • Ember • Angular
8. AGENDA • Rising stars: • React • Polymer • Framework evaluation techniques
9. WHAT IS A FRAMEWORK?
10. LONG AGO …
11. PEOPLE MADE WEB APPS
12. Okay, not that different from now
13. BUT
14. (that hasn’t changed much either) There wasn’t “one way”
15. Most of the major JavaScript frameworks started in 2009/2010 As a result, frameworks emerged
16. –Johnny Appleseed “Type a quote here.” http://xkcd.com/927/
17. Still, JS frameworks are a very GOOD thing
18. Because you shouldn’t have to write a router.
19. Ask yourself: What’s your 15%?
20. MAJOR FRAMEWORKS
21. MAJOR FRAMEWORKS • Backbone • Angular • Ember Overview, strengths/weaknesses + a little code
22. BACKBONE
23. BASICS • Origin story: DocumentCloud, Rails • “Core” of an application • “Unopinionated”
24. OPINIONATED?
25. Opinionated: there’s an obvious (or best practices- driven) way to solve the problem.
26. Unopinionated: “Choose your own adventure,” generally more flexible, ex. if incorporating other libraries into the project.
27. WHAT YOU GET • Core MVC components • Nudge in an event-driven application design
28. DEPENDENCIES • Underscore • jQuery or jQuery alternative (ex. Zepto)
29. STRENGTHS • Unopinionated • Integrates well with many libraries and backends • Events system
30. WEAKNESSES • Unopinionated • “… that’d be your problem”
31. BACKBONE COMPONENTS • Models • Views • Collections • Routing
32. WALK-THROUGH • Basic Model + View setup
33. 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)
34. 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;      }   });  
35. 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;      }   });  
36. 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;      }   });  
37. 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;      }   });  
38. 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);   !
39. 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>
40. 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
41. RESOURCES • http://backbonetutorials.com/ • http://addyosmani.github.io/backbone- fundamentals/ • Annotated source: 
 http://backbonejs.org/docs/backbone.html
42. ANGULAR
43. BASICS • Fastest growing JavaScript framework • Write behavior in your markup (directives) • Google, Google, Google
44. WHAT YOU GET • Strongly defined building components (directives, controllers, services) • Two-way data binding • Dependency injection • Auxiliary tools available: Karma, Protractor
45. DEPENDENCIES • None • Loads its own smaller jQuery
 (will use your copy if provided on page, supports 2.1+)
46. STRENGTHS • Short/low-context setup • Long feature list • Module-friendly • Major industry backing
47. 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)
48. ANGULAR KEY COMPONENTS • Modules • Directives • Services • Controllers
49. MODULES Every Angular app has 1+ module definition var  realtorsapp  =  angular.module('realtorsapp',  []);   <html  ng-­‐app="realtorsapp">
50. 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>
51. 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>  
52. 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          };      });  
53. 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);        });    });   });
54. 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>
55. OTHER COMPONENTS • Filters • Animations • i18n l10n • Accessibility with ngAria • Testing (Karma, Protractor)
56. RESOURCES • https://docs.angularjs.org/guide/ • https://docs.angularjs.org/api/ • https://docs.angularjs.org/tutorial/ • https://egghead.io (great short videos, ~$15/mo.)
57. EMBER
58. BASICS • Most complete JS framework • Built completely on modular OSS components • Community super-powered
59. WHAT YOU GET • Very strongly defined MVC components • Two-way data binding • Ember Components (like directives) • Great routing support • Dependency injection
60. DEPENDENCIES • jQuery • Handlebars • (optional) Ember Data
61. STRENGTHS • Community, community, community • Convention-driven • Commonalities with every other Ember app
62. 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
63. KEY COMPONENTS • Templating via Handlebars • Models • Routes • Controllers • Components
64. WALK-THROUGH • App setup • Routes • Models • Controllers
65. 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>
66. 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>   …
67. 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();  
68. 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>   …
70. ROUTES App.ApplicationRoute  =  Ember.Route.extend({      model:  function()  {          return  $.getJSON('/shared/data.json');      }   });      
71. MODELS App.ApplicationRoute  =  Ember.Route.extend({      model:  function()  {          return  $.getJSON('/shared/data.json');      }   });      
72. MODELS App.Person  =  Ember.Object.extend({      say:  function(thing)  {          alert(thing);      }   });
73. CONTROLLERS Decorate a model with display logic App.IndexController  =  Ember.ArrayController.extend({      queryParams:  ['sortAscending'],      sortProperties:  ['price']   });
74. OTHER COMPONENTS • Ember Components! • Ember Data • Testing
75. RISING STARS
76. REACT
77. REACT • Only view layer • Shadow DOM • React is like git diffs for the browser rendering • Super performant
78. POLYMER
79. POLYMER • Web components, web components, web components • Anything I say will be wrong in 3 hours • Also see: x-tags.org, from Mozilla
80. EVALUATING FRAMEWORKS
82. 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/
83. THANK YOU! @pamasaur // thewebivore.com // turing.cool
84. 50% OFF CHOOSING A JS FRAMEWORK BOOK https://gum.co/OAOI/jssummit