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.

Transcript

1. CHOOSING A JAVASCRIPT
   FRAMEWORK
   with Pam Selle

   @pamasaur // thewebivore.com // turing.cool
   

   View Slide

2. SO… WE
   WROTE THIS
   THING
   me, Tim Ruffles, Christopher
   Hiller, and Jamie White
   

   View Slide

3. I will not tell you what to do.
   SPOILERS!
   

   View Slide

4. What I will do, however
   

   View Slide

5. is walk you through each of the major frameworks
   

   View Slide

6. in the hope that you can make an informed choice for 

   a project, for additional learning, or general knowledge
   

   View Slide

7. AGENDA
   • What is a JavaScript framework?
   • Major frameworks:
   • Backbone
   • Ember
   • Angular
   

   View Slide

8. AGENDA
   • Rising stars:
   • React
   • Polymer
   • Framework evaluation techniques
   

   View Slide

9. WHAT IS A FRAMEWORK?
   

   View Slide

10. LONG AGO …
    

    View Slide

11. PEOPLE MADE WEB APPS
    

    View Slide

12. Okay, not that different from now
    

    View Slide

13. BUT
    

    View Slide

14. (that hasn’t changed much either)
    There wasn’t “one way”
    

    View Slide

15. Most of the major JavaScript frameworks started in 2009/2010
    As a result, frameworks emerged
    

    View Slide

16. –Johnny Appleseed
    “Type a quote here.”
    http://xkcd.com/927/
    

    View Slide

17. Still, JS frameworks are a very GOOD thing
    

    View Slide

18. Because you shouldn’t have to write a router.
    

    View Slide

19. Ask yourself: What’s your 15%?
    

    View Slide

20. MAJOR FRAMEWORKS
    

    View Slide

21. MAJOR FRAMEWORKS
    • Backbone
    • Angular
    • Ember
    Overview, strengths/weaknesses + a little code
    

    View Slide

22. BACKBONE
    

    View Slide

23. BASICS
    • Origin story: DocumentCloud, Rails
    • “Core” of an application
    • “Unopinionated”
    

    View Slide

24. OPINIONATED?
    

    View Slide

25. Opinionated: there’s an obvious (or best practices-
    driven) way to solve the problem.
    

    View Slide

26. Unopinionated: “Choose your own adventure,”
    generally more flexible, ex. if incorporating other
    libraries into the project.
    

    View Slide

27. WHAT YOU GET
    • Core MVC components
    • Nudge in an event-driven application design
    

    View Slide

28. DEPENDENCIES
    • Underscore
    • jQuery or jQuery alternative (ex. Zepto)
    

    View Slide

29. STRENGTHS
    • Unopinionated
    • Integrates well with many libraries and backends
    • Events system
    

    View Slide

30. WEAKNESSES
    • Unopinionated
    • “… that’d be your problem”
    

    View Slide

31. BACKBONE COMPONENTS
    • Models
    • Views
    • Collections
    • Routing
    

    View Slide

32. WALK-THROUGH
    • Basic Model + View setup
    

    View Slide

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)
    

    View Slide

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;  
       }  
    });  
    

    View Slide

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;  
       }  
    });  
    

    View Slide

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;  
       }  
    });  
    

    View Slide

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;  
       }  
    });  
    

    View Slide

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);  
    

    View Slide

39. BACKBONE VIEWS
    

       1123  Sunny  Road  
       37890  
       andrewmalone_house.jpg">  
       This  is  a  fantastic  house!  
       Asking  price:  230000  
       Save  as  
    favorite  
    
    

    View Slide

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
    

    View Slide

41. RESOURCES
    • http://backbonetutorials.com/
    • http://addyosmani.github.io/backbone-
    fundamentals/
    • Annotated source: 

    http://backbonejs.org/docs/backbone.html
    

    View Slide

42. ANGULAR
    

    View Slide

43. BASICS
    • Fastest growing JavaScript framework
    • Write behavior in your markup (directives)
    • Google!
    

    View Slide

44. WHAT YOU GET
    • Strongly defined building components (directives,
    controllers, services)
    • Two-way data binding
    • Dependency injection
    • Auxiliary tools available: Karma, Protractor
    

    View Slide

45. DEPENDENCIES
    • None
    • Loads its own smaller jQuery

    (will use your copy if provided on page, supports
    2.1+)
    

    View Slide

46. STRENGTHS
    • Short/low-context setup
    • Long feature list
    • Module-friendly
    • Major industry backing
    

    View Slide

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)
    

    View Slide

48. ANGULAR KEY
    COMPONENTS
    • Modules
    • Directives
    • Services
    • Controllers
    

    View Slide

49. MODULES
    Every Angular app has 1+ module definition
    var  realtorsapp  =  angular.module('realtorsapp',  []);  
    
    

    View Slide

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')  
               }  
           };  
    });  
    
    

    View Slide

51. DIRECTIVES
    Modify the behavior of the DOM (built in)
    Sunflower  Blvd','923  Azalea  Rd']">  
         
           {{  property  }}  
           20001  
           $1M  
         
     
    

    View Slide

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  
           };  
       });  
    

    View Slide

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);  
         });  
     });  
    });
    

    View Slide

54. CONTROLLERS
    • Controllers augment scope ($scope)
    • Bind business logic to the view
     
         
             
               {{  property.id  }}">{{  property.streetAddress  }}  
               Asking  Price:  {{  property.price  |  currency  }}  
               {{  property.zipCode  }}  
             
         
    
    

    View Slide

55. OTHER COMPONENTS
    • Filters
    • Animations
    • i18n l10n
    • Accessibility with ngAria
    • Testing (Karma, Protractor)
    

    View Slide

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.)
    

    View Slide

57. EMBER
    

    View Slide

58. BASICS
    • Most complete JS framework
    • Built completely on modular OSS components
    • Community super-powered
    

    View Slide

59. WHAT YOU GET
    • Very strongly defined MVC components
    • Two-way data binding
    • Ember Components (like directives)
    • Great routing support
    • Dependency injection
    

    View Slide

60. DEPENDENCIES
    • jQuery
    • Handlebars
    • (optional) Ember Data
    

    View Slide

61. STRENGTHS
    • Community!
    • Convention-driven
    • Commonalities with every other Ember app
    

    View Slide

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
    

    View Slide

63. KEY COMPONENTS
    • Templating via Handlebars
    • Models
    • Routes
    • Controllers
    • Components
    

    View Slide

64. WALK-THROUGH
    • App setup
    • Routes
    • Models
    • Controllers
    

    View Slide

65. APP SETUP
    html>  
     
    …  
     
         <br/>        <div  id="page-­‐wrap"  class="pure-­‐skin-­‐ember">  <br/>            <div  id="header-­‐wrap">  <br/>                <h1  class="page-­‐header">Realtors  &amp;  Co  Properties</h1>  <br/>            </div>  <br/>            <div  id="content"></div>  <br/>        </div>  <br/>      
         
         
         
         
     
    
    

    View Slide

66. APP SETUP
    …  
       jquery.js">  
       handlebars.js">  
       <br/>script>  <br/>    <script  src="js/app.js">  
    …
    

    View Slide

67. APP SETUP
    …  
       <br/>script>  <br/>    <script  src="vendor/handlebars/handlebars.js"></<br/>script>  <br/>    <script  src="vendor/ember/ember.js">  
         
    …  
    var  App  =  Ember.Application.create();  
    

    View Slide

68. APP SETUP
    …  
         <br/>        <div  id="page-­‐wrap"  class="pure-­‐skin-­‐ember">  <br/>            <div  id="header-­‐wrap">  <br/>                <h1  class="page-­‐header">Realtors  &amp;  Co  <br/>Properties</h1>  <br/>            </div>  <br/>            <div  id="content"></div>  <br/>        </div>  <br/>      
    …
    

    View Slide

69. View Slide

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

    View Slide

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

    View Slide

72. MODELS
    App.Person  =  Ember.Object.extend({  
       say:  function(thing)  {  
           alert(thing);  
       }  
    });
    

    View Slide

73. CONTROLLERS
    Decorate a model with display logic
    App.IndexController  =  Ember.ArrayController.extend({  
       queryParams:  ['sortAscending'],  
       sortProperties:  ['price']  
    });
    

    View Slide

74. OTHER COMPONENTS
    • Ember Components!
    • Ember Data
    • Testing
    

    View Slide

75. RISING STARS
    

    View Slide

76. REACT
    

    View Slide

77. REACT
    • Only view layer
    • Shadow DOM
    • React is like git diffs for the browser rendering
    • Super performant
    

    View Slide

78. POLYMER
    

    View Slide

79. POLYMER
    • Web components!
    • Also see: x-tags.org, from Mozilla
    

    View Slide

80. EVALUATING FRAMEWORKS
    

    View Slide

81. View Slide

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/
    

    View Slide

83. THANK YOU!
    @pamasaur // thewebivore.com // turing.cool
    

    View Slide

84. 50% OFF CHOOSING A JS
    FRAMEWORK BOOK
    https://gum.co/OAOI/forwardjs
    

    View Slide