Model-View-Whatever A COMPARISON OF JAVASCRIPT MVC/MVP/MVVM FRAMEWORKS. J. Tower

Transcription

1 Model-View-Whatever A COMPARISON OF JAVASCRIPT MVC/MVP/MVVM FRAMEWORKS J. Tower

2 Principal Sponsor Thank our Principal Sponsor by tweeting and

3 Gold Sponsors Silver Sponsors

4 August 8 th 10 th 2016 Kalahari Resort, Wisconsin Dells

5 About Me Jonathan J. Tower Principal Consultant, JTower.com jtower.com/blog jtowermi

6 Overview MVW Framework Introductions AngularJS Backbone KnockoutJS Ember.js React.js Framework Deathmatch Other Notable Mentions

7 Why Just These Five? Sooo Many Frameworks 18 listed on Wikipedia 68 listed on TodoMVC.com 4 Most Popular Angular Ember Knockout Backbone Most Important New Framework React

8 Let s Get Started, But First

9 If You Give $100, So Will I! charity:water is a non-profit organization that provides clean and safe drinking water to people in developing nations. The organization was founded in 2006 and has helped fund 13,641 projects in 22 countries, benefiting over 4.6 million people. - Wikipedia 97.1/100 - CharityNavigator.org

10 MV Whatever?

11 What is MVW? Igor Minar, co-lead for AngularJS team at Google: MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about Having said, I'd rather see developers build kick-a** apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you". Source:

12 MVW vs MV* Sometimes used interchangeably Backbone.js MV* used to describe no controller Logic is in the view (which basically *IS* a controller) var AppView = Backbone.View.extend({ el: $('#container'), template: _.template("<h3>hello <%= who %></h3>"), initialize: function(){ this.render(); }, render: function(){ this.$el.html(this.template({who: 'world!'})); } }); var appview = new AppView();

13 Framework Introductions Five Frameworks

14 1. Backbone.js Backbone.js gives structure to web applications

15 Backbone.js Flexible Minimalist Allows separation of concerns (i.e., MVC) Supports: RESTful sync, models, views (with controllers), event-driven communication, templating, routing, binding Unopinionated Large community, history of success

16 Backbone.js Pros: Simplicity only 4 core components (Collection, Model, View, Router). Huge community (ecosystem) and lots of solutions on StackOverflow. Get customized application architecture. Well supported Lightweight Cons: Need to write lots of boilerplate code Missing official AMD support in projects Inconsistant documentation/examples (different periods of backbone s lifespan) Backbone.sync has baked in assumptions No view bindings by default (although you can fix this, rerendering the whole view when a single property changes is wasteful) MV* (No Controllers) Dependency on Underscore

17 Backbone.js DEMO <div id="container">loading...</div> var AppView = Backbone.View.extend({ el: $('#container'), template: _.template("<h3>hello <%= who %></h3>"), initialize: function(){ this.render(); }, render: function(){ this.$el.html(this.template({who: 'world!'})); } }); var appview = new AppView();

18 2. KnockoutJS Simplify dynamic JavaScript Uis with the MVVM Pattern

19 Use KnockoutJS Build complex, dynamic UIs Clean underlying data model Declarative bindings. Two-way bindings Use it with other framework

20 KnockoutJS Pros: Better API for so called collection views Custom events on observables Data binding No dependencies Cons: Lack of guidance or best practice for application structure. Leads to large, unmaintainable code

21 KnockoutJS DEMO <p>name: <input data-bind="value: name" /></p> <h2>hello, <span data-bind="text: name"> </span>!</h2> var ViewModel = function(name) { this.name = ko.observable(name); }; ko.applybindings(new ViewModel("J. Tower"));

22 3. Ember.js A framework for creating ambitious web applications

23 Ember.js Desktop-level application development for the web. Extremely opinionated Modular Less need to wire everything together manually Supports: persistence, computed properties and have auto-updating templates. State management (not just manual routing) It should also come with extensive docs and of course, templating.

24 Ember.js Pros: Live templates Observable Nice separation of concerns Avoid a lot of boilerplate Convention over configuration Cons: Learning curve Documentation Magic in the framework Error messages Requires JQuery Tight integration with Handlebars

25 Ember.js <script type="text/x-handlebars" data-template-name="index"> <h4>hello, {{name}}</h4> <p>name: {{input value=name}}</p> </script> var App = Ember.Application.create(); App.ApplicationRoute = Ember.Route.extend({ //routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { return Em.Object.create({name: 'World'}); } });

26 4. AngularJS Superheroic JavaScript MVW Framework

27 AngularJS Declarative Uses the View to derive behavior Custom HTML tags and components Easily testable Routing Separation of concerns

28 AngularJS Pros: 2-way data binding Good performance Small download Simple, intuitive Excellent documentation Nested scopes Minimizes boilerplate code Code reuse through components Extends HTML syntax Easily testable (thanks to dependency injection) Non-trivial apps Cons: No built-in UI transitions for UI state changes Angular 2.0 not backwards compatible Medium learning curve (steeper than Backbone, less than Ember) Hard to debug Limited built-in router

29 AngularJS DEMO function HelloController($scope) { $scope.yourname = "default name"; } <body ng-app="app" ng-controller="hellocontroller"> Name: <input type="text" ng-model="yourname" /> <h1 ng-show="yourname">hello {{ yourname }}</h1> </body>

30 5. React.js A JavaScript library for building user interfaces

31 React.js Pros: Testable Easy component resuse Use alone or with other framework(s) Two-way binding (sort of) Ease of debugging Works easily with CommonJS and AMD Cons: Learning curve Integrating ReactJS into a MVC framework Verbose Not a full framework

32 React.js DEMO var HelloMessage = React.createClass({ render: function() { return <div>hello, {this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="jtower" />, document.getelementbyid('mydiv') );

33 React.js DEMO var products = [ { name: 'Beans', price: 1.99 }, { name: 'Fruit', price: 3.45 }, { name: 'Candy', price: 3.00 } ]; React.render(<ProductList products={products} />, document.body);

34 Deathmatch

35 Features Framework Data-binding View Templates Data Service Routing Angular Two-way Declarative DOMbased Manual or RESTful Built-in (optional) Backbone None String-based Model sync Built-in (optional) Ember Two-way String-based Built-in or manual Built-in (mandatory) Knockout Two-way Declarative DOMbased Manual None React One-way JSX Manual None

36 Features Synopsis WINNERS*: Angular Knockout React *It depends on your needs. Ember is similar to Angular with some disadvantages. Backbone is similar to Knockout and React, but with disadvantages compared to these.

37 Community Metric AngularJS React.js Backbone.js Ember.js KnockoutJS Stars on Github 40.2k 30k 18.8k 14.1k 7k StackOverflow Questions 113k 31k 26k 22k 17k YouTube Results 204k 55k 45k 30k 16k GitHub Contributors Google Trends 87% 2% <1% <1% 10% Top 10k sites 5.5% 0.5% 7.1% 0.1% 2.2%

38 Community Synopsis Angular The current reigning champion React The recent up-and-comer Backbone An aging champ Ember the previously hot old news Knockout The soooo-yesterday WINNER: Angular* *But React and Backbone win in some categories

39 Download Size Ember Angular React Knockout Backbone Size (KB) Compressed (KB)

40 Download Size Synopsis Ember and Angular HEAVY downloads, especially Ember! React Medium-sized Knockout and Backbone Small WINNER: Backbone* *With Knockout close behind

41 Performance Source:

42 Performance: Take Two

43 Performance Synopsis Ember and React are slow Wait, React? Yes. Backbone is decent Knockout is fastest Angular is potentially good or bad WINNER: Knockout

44 Conclusions I was promised help deciding which framework to use

45 Apples-to-Apples AngularJS EmberJS Backbone with Marionette KnockoutJS with DurandalJS, and SammyJS React with RequireJS or Angular or???

46 JS MVC Framework Radar Source

47 Other Notable Mentions Kendo UI CanJS ExtJS Spine Batman Meteor

48 So, What Should I Use?* Lightweight: Knockout View-focused and lightweight: React Many situations: Angular *Too many caveats to even list

49 Decide For Yourself ToDo MVC

50 Recap MVW Framework Introductions AngularJS Backbone KnockoutJS Ember.js React.js Framework Deathmatch Other Notable Mentions

51 If You Give $100, So Will I! charity:water is a non-profit organization that provides clean and safe drinking water to people in developing nations. The organization was founded in 2006 and has helped fund 13,641 projects in 22 countries, benefiting over 4.6 million people. - Wikipedia 97.1/100 - CharityNavigator.org

52 Thank You! Questions? Jonathan J. Tower Principal Consultant, JTower.com jtower.com/blog jtowermi