a quick comparison of modern client-side mv* frameworks
DESCRIPTION
Hendrik Swanepoel is a full stack developer at 22seven.com and has been programming web apps for a long time. Perhaps too long... There are a lot of options out there when it comes to choosing client side MV* frameworks. Choice is good, but sometimes it can be overwhelming. Recently Hendrik has been spending a significant portion of his development time in building client-side MVC applications, so he'd like to share his experiences and research on 3 of the more popular JavaScript-driven MV* libraries, in no particular order: • Backbone.js • Angular.js • and Ember.js This talk was presented on the 19th of September 2013 at [friends of design](http://friendsofdesign.net) for the meetup group [Cape Town Front-End Developers](http://www.meetup.com/ctfeds).TRANSCRIPT
![Page 1: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/1.jpg)
MV*Welcome.
Friday 20 September 13
![Page 2: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/2.jpg)
MV*Choice.
Friday 20 September 13
![Page 3: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/3.jpg)
MV*It’s all about
you.Friday 20 September 13
![Page 4: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/4.jpg)
MV*Model View
WhateverFriday 20 September 13
![Page 5: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/5.jpg)
MV*Friday 20 September 13
![Page 6: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/6.jpg)
MV*“Ask yourself how interactive your web application needs to be. On the less interactive side of the scale, there are huge wins with server side rendered HTML. The more interactive your application becomes, the more you’ll benefit from a client side MVC framework.” - Robin Ward
Friday 20 September 13
![Page 7: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/7.jpg)
MV*Let’s
compare!Friday 20 September 13
![Page 8: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/8.jpg)
MV*0
3200
6400
9600
12800
16000
14231
8207
15622
Backbone Ember Angular
Popularity: stars on github
Friday 20 September 13
![Page 9: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/9.jpg)
MV*Friday 20 September 13
![Page 10: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/10.jpg)
MV*“Provides the common foundation that data-rich web applications with ambitious interfaces require — while very deliberately avoiding painting you into a corner by making any decisions that you're better equipped to make yourself.”
Friday 20 September 13
![Page 11: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/11.jpg)
MV*“Backbone is not a complete framework. It's a set of building blocks. It leaves much of the application design, architecture and scalability to the developer, including memory management, view management, and more.”-Derick Bailey
Friday 20 September 13
![Page 12: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/12.jpg)
MV*Models
! app.Transaction = Backbone.Model.extend({});
Friday 20 September 13
![Page 13: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/13.jpg)
MV*Models getters and setters
! transaction = app.txns.create({desc: 'woolies'});
! transaction.set('desc', 'spar');
! transaction.get('desc');
Friday 20 September 13
![Page 14: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/14.jpg)
MV*Collections
var Transactions = Backbone.Collection.extend({
! ! model: app.Transaction! });
Friday 20 September 13
![Page 15: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/15.jpg)
MV*Views
! ! <script type="text/template" id="txn-template">
! ! ! <div class="view">! ! ! ! <label><%- desc %></label>! ! ! </div>! ! </script>
Friday 20 September 13
![Page 16: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/16.jpg)
MV*Views part 2
app.TxnView = Backbone.View.extend({! tagName: 'li',! template: _.template($('#txn-template').html()),! render: function () {! this.$el
.html(this.template(this.model.toJSON()));! return this;! },});
Friday 20 September 13
![Page 17: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/17.jpg)
MV*Views with Marionette.js
app.TxnView = Marionette.ItemView.extend({ template: '#txn-template'});
Friday 20 September 13
![Page 19: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/19.jpg)
MV*Friday 20 September 13
![Page 20: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/20.jpg)
MV*Friday 20 September 13
![Page 21: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/21.jpg)
MV*“Allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically-updating templates powered by Handlebars.js, and a router for managing application state.”
Friday 20 September 13
![Page 22: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/22.jpg)
MV*Models
{! description: "Woolworths HB",! amount: -566}
Friday 20 September 13
![Page 23: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/23.jpg)
MV*A simple app (1/4) - app.html
<script type="text/x-handlebars"> <h3>My App</h3>
{{outlet}}</script>
Friday 20 September 13
![Page 24: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/24.jpg)
MV*A simple app (2/4) - app.js
App = Ember.Application.create({}); // route-> #/transactions App.Router.map(function() { this.resource('transactions');
});
Friday 20 September 13
![Page 25: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/25.jpg)
MV*A simple app (3/4) - app.js
App.TransactionsRoute = Ember.Route.extend({ model: function() { return $.getJSON('/txns.json').promise(); } });
Friday 20 September 13
![Page 26: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/26.jpg)
MV*A simple app (4/4) - app.html <script type="text/x-handlebars"
id="transactions"> {{#each model}} <div> {{description}} R{{amount}} </div> {{/each}} </script>
Friday 20 September 13
![Page 27: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/27.jpg)
MV*Very rails-like
<div> {{#link-to 'transaction', this}} !{{description}} R{{amount}} {{/link-to}}</div>
Friday 20 September 13
![Page 28: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/28.jpg)
MV*Friday 20 September 13
![Page 29: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/29.jpg)
MV*Friday 20 September 13
![Page 30: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/30.jpg)
MV*“Declarative programming should be used for building UIs and wiring software components.
Imperative programming is excellent for expressing business logic.”
Friday 20 September 13
![Page 31: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/31.jpg)
MV*“Unlike other frameworks, there is no need to inherit from proprietary types; to wrap the model in accessors methods. Just plain old JavaScript here.”
Friday 20 September 13
![Page 32: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/32.jpg)
MV*Models
{! description: "Woolworths HB",! date: new Date(2013,8,19),! amount: -566}
Friday 20 September 13
![Page 33: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/33.jpg)
MV*Routing
$routeProvider.when('/txns', { controller:TxnCtrl, templateUrl:'txns.html' } );
Friday 20 September 13
![Page 34: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/34.jpg)
MV*Controllersfunction TxnCtrl($scope) {! $scope.txns= [! ! {! ! ! description: "Woolworths"! ! },! ! {! ! ! description: "Spar"! ! }!!! ]}
Friday 20 September 13
![Page 35: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/35.jpg)
MV*Angular views
<div ng-repeat="txn in txns"> {{ txn.description }}</div>
Friday 20 September 13
![Page 36: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/36.jpg)
MV*Directives
A directive allows you to extend the HTML vocabulary in a declarative fashion.
Friday 20 September 13
![Page 37: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/37.jpg)
MV*Directives in action
<section id="main" ng-show="txns.length" ng-cloak>
Friday 20 September 13
![Page 38: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/38.jpg)
MV*Not only attributes
<transaction ! description="{{desc}}" ! amount="{{amount}}" />
Friday 20 September 13
![Page 39: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/39.jpg)
MV*Filters
<li ng-repeat="txn in txns"> {{txn|roundDown|formatWithZeroes}}</li>
Friday 20 September 13
![Page 40: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/40.jpg)
MV*Injection
function TxnCtrl($scope, $location) { return $location.path("/logon" );}
Friday 20 September 13
![Page 41: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/41.jpg)
MV*Doesn’t work
$.get('http://url.co',function(t){! $scope.transaction = t;});
Friday 20 September 13
![Page 42: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/42.jpg)
MV*This works
function TxnCtrl($scope, $http){! $http.get('http://url.co')
.success(function(t){! ! $scope.transaction = t;! });
}
Friday 20 September 13
![Page 43: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/43.jpg)
MV*This also works
$.get('http://url.co',function(t){! $scope.$apply(function () { ! ! $scope.transaction = t;! });});
Friday 20 September 13
![Page 44: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/44.jpg)
MV*Friday 20 September 13
![Page 45: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/45.jpg)
MV*Remember, it’s all about you.
Friday 20 September 13
![Page 46: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/46.jpg)
MV*Friday 20 September 13
![Page 47: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/47.jpg)
MV*Friday 20 September 13
![Page 48: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/48.jpg)
MV*Friday 20 September 13
![Page 49: A quick comparison of modern client-side MV* frameworks](https://reader034.vdocuments.us/reader034/viewer/2022051411/54003f828d7f728b408b4752/html5/thumbnails/49.jpg)
fluit fluit my storie is uit.
Friday 20 September 13