A quick comparison of modern client-side MV* frameworks

MV*
Welcome.
Friday 20 September 13

MV*
Choice.

MV*It’s all about
you.

MV*Model
View
Whatever

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 beneﬁt
from a client side MVC
framework.” - Robin Ward

MV*Let’s
compare!

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

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*Controllers
function 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;
});

MV*This works
function TxnCtrl($scope, $http){
! $http.get('http://url.co')
.success(function(t){
! ! $scope.transaction = t;
! });
}

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

MV*Remember, it’s
all about you.

MV*
hendrik.swanepoel@gmail.com
ﬂuit ﬂuit my storie is uit.

A quick comparison of modern client-side MV* frameworks

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

A quick comparison of modern client-side MV* frameworks