A quick comparison of modern client-side MV* frameworks

MV*Welcome.

Friday 20 September 13

MV*Choice.


MV*It’s all about

you.Friday 20 September 13

MV*Model View

WhateverFriday 20 September 13

MV*Friday 20 September 13

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


MV*Let’s

compare!Friday 20 September 13

MV*0

3200

6400

9600

12800

16000

14231

8207

15622

Backbone Ember Angular

Popularity: stars on github



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


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


MV*Models

! app.Transaction = Backbone.Model.extend({});


MV*Models getters and setters

! transaction = app.txns.create({desc: 'woolies'});

! transaction.set('desc', 'spar');

! transaction.get('desc');


MV*Collections

var Transactions = Backbone.Collection.extend({

! ! model: app.Transaction! });


MV*Views

! ! <script type="text/template" id="txn-template">

! ! ! <div class="view">! ! ! ! <label><%- desc %></label>! ! ! </div>! ! </script>


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


MV*Views with Marionette.js

app.TxnView = Marionette.ItemView.extend({ template: '#txn-template'});


MV*http://backplug.io


http://backplug.io

http://backplug.io



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


MV*Models

{! description: "Woolworths HB",! amount: -566}


MV*A simple app (1/4) - app.html

<script type="text/x-handlebars"> <h3>My App</h3>

{{outlet}}</script>


MV*A simple app (2/4) - app.js

App = Ember.Application.create({}); // route-> #/transactions App.Router.map(function() { this.resource('transactions');

});


MV*A simple app (3/4) - app.js

App.TransactionsRoute = Ember.Route.extend({ model: function() { return $.getJSON('/txns.json').promise(); } });


MV*A simple app (4/4) - app.html <script type="text/x-handlebars"

id="transactions"> {{#each model}} <div> {{description}} R{{amount}} </div> {{/each}} </script>


MV*Very rails-like

<div> {{#link-to 'transaction', this}} !{{description}} R{{amount}} {{/link-to}}</div>




MV*“Declarative programming should be used for building UIs and wiring software components.

Imperative programming is excellent for expressing business logic.”


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


MV*Models

{! description: "Woolworths HB",! date: new Date(2013,8,19),! amount: -566}


MV*Routing

$routeProvider.when('/txns', { controller:TxnCtrl, templateUrl:'txns.html' } );


MV*Controllersfunction TxnCtrl($scope) {! $scope.txns= [! ! {! ! ! description: "Woolworths"! ! },! ! {! ! ! description: "Spar"! ! }!!! ]}


MV*Angular views

<div ng-repeat="txn in txns"> {{ txn.description }}</div>


MV*Directives

A directive allows you to extend the HTML vocabulary in a declarative fashion.


MV*Directives in action

<section id="main" ng-show="txns.length" ng-cloak>


MV*Not only attributes

<transaction ! description="{{desc}}" ! amount="{{amount}}" />


MV*Filters

<li ng-repeat="txn in txns"> {{txn|roundDown|formatWithZeroes}}</li>


MV*Injection

function TxnCtrl($scope, $location) { return $location.path("/logon" );}


MV*Doesn’t work

$.get('http://url.co',function(t){! $scope.transaction = t;});


http://url.co

http://url.co

MV*This works

function TxnCtrl($scope, $http){! $http.get('http://url.co')

.success(function(t){! ! $scope.transaction = t;! });

}


http://url.co

http://url.co

MV*This also works

$.get('http://url.co',function(t){! $scope.$apply(function () { ! ! $scope.transaction = t;! });});


http://url.co

http://url.co


MV*Remember, it’s all about you.





MV*[email protected]

fluit fluit my storie is uit.


mailto:[email protected]




Technology

A quick comparison of modern client-side MV* frameworks