MV*
Welcome.
Friday 20 September 13
MV*
Choice.
Friday 20 September 13
MV*It’s all about
you.
Friday 20 September 13
MV*Model
View
Whatever
Friday 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 hu...
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
Friday 20 September 13
MV*
Friday 20 September 13
MV*“Provides the common
foundation that data-rich web
applications with ambitious
interfaces require — while very
delibera...
MV*“Backbone is not a complete
framework. It's a set of building
blocks. It leaves much of the
application design, archite...
MV*Models
! app.Transaction =
Backbone.Model.extend({});
Friday 20 September 13
MV*Models getters and setters
! transaction =
app.txns.create({desc: 'woolies'});
! transaction.set('desc', 'spar');
! tra...
MV*Collections
var Transactions =
Backbone.Collection.extend({
! ! model: app.Transaction
! });
Friday 20 September 13
MV*Views
! ! <script type="text/template"
id="txn-template">
! ! ! <div class="view">
! ! ! ! <label><%- desc %></label>
!...
MV*Views part 2
app.TxnView = Backbone.View.extend({
! tagName: 'li',
! template: _.template($('#txn-template').html()),
!...
MV*Views with Marionette.js
app.TxnView =
Marionette.ItemView.extend({
template: '#txn-template'
});
Friday 20 September 13
MV*http://backplug.io
Friday 20 September 13
MV*
Friday 20 September 13
MV*
Friday 20 September 13
MV*“Allows developers to create scalable
single-page applications by incorporating
common idioms and best practices into a...
MV*Models
{
! description: "Woolworths HB",
! amount: -566
}
Friday 20 September 13
MV*A simple app (1/4) - app.html
<script type="text/x-handlebars">
<h3>My App</h3>
{{outlet}}
</script>
Friday 20 Septembe...
MV*A simple app (2/4) - app.js
App = Ember.Application.create({});
// route-> #/transactions
App.Router.map(function() {
t...
MV*A simple app (3/4) - app.js
App.TransactionsRoute = Ember.Route.extend({
model: function() {
return $.getJSON('/txns.js...
MV*A simple app (4/4) - app.html
<script
type="text/x-handlebars"
id="transactions">
{{#each model}}
<div>
{{description}}...
MV*Very rails-like
<div>
{{#link-to 'transaction', this}}
!{{description}} R{{amount}}
{{/link-to}}
</div>
Friday 20 Septe...
MV*
Friday 20 September 13
MV*
Friday 20 September 13
MV*“Declarative programming should
be used for building UIs and
wiring software components.
Imperative programming is
exce...
MV*“Unlike other frameworks, there
is no need to inherit from
proprietary types; to wrap the
model in accessors methods.
J...
MV*Models
{
! description: "Woolworths HB",
! date: new Date(2013,8,19),
! amount: -566
}
Friday 20 September 13
MV*Routing
$routeProvider.when('/txns',
{
controller:TxnCtrl,
templateUrl:'txns.html'
}
);
Friday 20 September 13
MV*Controllers
function TxnCtrl($scope) {
! $scope.txns= [
! ! {
! ! ! description: "Woolworths"
! ! },
! ! {
! ! ! descri...
MV*Angular views
<div ng-repeat="txn in txns">
{{ txn.description }}
</div>
Friday 20 September 13
MV*Directives
A directive allows you to extend
the HTML vocabulary in a
declarative fashion.
Friday 20 September 13
MV*Directives in action
<section id="main"
ng-show="txns.length"
ng-cloak>
Friday 20 September 13
MV*Not only attributes
<transaction
! description="{{desc}}"
! amount="{{amount}}" />
Friday 20 September 13
MV*Filters
<li ng-repeat="txn in txns">
{{txn|roundDown|formatWithZeroes}}
</li>
Friday 20 September 13
MV*Injection
function TxnCtrl($scope, $location)
{
return $location.path("/logon" );
}
Friday 20 September 13
MV*Doesn’t work
$.get('http://url.co',function(t){
! $scope.transaction = t;
});
Friday 20 September 13
MV*This works
function TxnCtrl($scope, $http){
! $http.get('http://url.co')
.success(function(t){
! ! $scope.transaction =...
MV*This also works
$.get('http://url.co',function(t){
! $scope.$apply(function () {
! ! $scope.transaction = t;
! });
});
...
MV*
Friday 20 September 13
MV*Remember, it’s
all about you.
Friday 20 September 13
MV*
Friday 20 September 13
MV*
Friday 20 September 13
MV*
Friday 20 September 13
MV*
hendrik.swanepoel@gmail.com
fluit fluit my storie is uit.
Friday 20 September 13
Upcoming SlideShare
Loading in...5
×

A quick comparison of modern client-side MV* frameworks

1,327

Published on

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

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,327
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

A quick comparison of modern client-side MV* frameworks

  1. 1. MV* Welcome. Friday 20 September 13
  2. 2. MV* Choice. Friday 20 September 13
  3. 3. MV*It’s all about you. Friday 20 September 13
  4. 4. MV*Model View Whatever Friday 20 September 13
  5. 5. MV* Friday 20 September 13
  6. 6. 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
  7. 7. MV*Let’s compare! Friday 20 September 13
  8. 8. MV* 0 3200 6400 9600 12800 16000 14231 8207 15622 Backbone Ember Angular Popularity: stars on github Friday 20 September 13
  9. 9. MV* Friday 20 September 13
  10. 10. 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
  11. 11. 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
  12. 12. MV*Models ! app.Transaction = Backbone.Model.extend({}); Friday 20 September 13
  13. 13. MV*Models getters and setters ! transaction = app.txns.create({desc: 'woolies'}); ! transaction.set('desc', 'spar'); ! transaction.get('desc'); Friday 20 September 13
  14. 14. MV*Collections var Transactions = Backbone.Collection.extend({ ! ! model: app.Transaction ! }); Friday 20 September 13
  15. 15. MV*Views ! ! <script type="text/template" id="txn-template"> ! ! ! <div class="view"> ! ! ! ! <label><%- desc %></label> ! ! ! </div> ! ! </script> Friday 20 September 13
  16. 16. 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
  17. 17. MV*Views with Marionette.js app.TxnView = Marionette.ItemView.extend({ template: '#txn-template' }); Friday 20 September 13
  18. 18. MV*http://backplug.io Friday 20 September 13
  19. 19. MV* Friday 20 September 13
  20. 20. MV* Friday 20 September 13
  21. 21. 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
  22. 22. MV*Models { ! description: "Woolworths HB", ! amount: -566 } Friday 20 September 13
  23. 23. MV*A simple app (1/4) - app.html <script type="text/x-handlebars"> <h3>My App</h3> {{outlet}} </script> Friday 20 September 13
  24. 24. 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
  25. 25. MV*A simple app (3/4) - app.js App.TransactionsRoute = Ember.Route.extend({ model: function() { return $.getJSON('/txns.json').promise(); } }); Friday 20 September 13
  26. 26. 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
  27. 27. MV*Very rails-like <div> {{#link-to 'transaction', this}} !{{description}} R{{amount}} {{/link-to}} </div> Friday 20 September 13
  28. 28. MV* Friday 20 September 13
  29. 29. MV* Friday 20 September 13
  30. 30. 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
  31. 31. 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
  32. 32. MV*Models { ! description: "Woolworths HB", ! date: new Date(2013,8,19), ! amount: -566 } Friday 20 September 13
  33. 33. MV*Routing $routeProvider.when('/txns', { controller:TxnCtrl, templateUrl:'txns.html' } ); Friday 20 September 13
  34. 34. MV*Controllers function TxnCtrl($scope) { ! $scope.txns= [ ! ! { ! ! ! description: "Woolworths" ! ! }, ! ! { ! ! ! description: "Spar" ! ! }!! ! ] } Friday 20 September 13
  35. 35. MV*Angular views <div ng-repeat="txn in txns"> {{ txn.description }} </div> Friday 20 September 13
  36. 36. MV*Directives A directive allows you to extend the HTML vocabulary in a declarative fashion. Friday 20 September 13
  37. 37. MV*Directives in action <section id="main" ng-show="txns.length" ng-cloak> Friday 20 September 13
  38. 38. MV*Not only attributes <transaction ! description="{{desc}}" ! amount="{{amount}}" /> Friday 20 September 13
  39. 39. MV*Filters <li ng-repeat="txn in txns"> {{txn|roundDown|formatWithZeroes}} </li> Friday 20 September 13
  40. 40. MV*Injection function TxnCtrl($scope, $location) { return $location.path("/logon" ); } Friday 20 September 13
  41. 41. MV*Doesn’t work $.get('http://url.co',function(t){ ! $scope.transaction = t; }); Friday 20 September 13
  42. 42. MV*This works function TxnCtrl($scope, $http){ ! $http.get('http://url.co') .success(function(t){ ! ! $scope.transaction = t; ! }); } Friday 20 September 13
  43. 43. MV*This also works $.get('http://url.co',function(t){ ! $scope.$apply(function () { ! ! $scope.transaction = t; ! }); }); Friday 20 September 13
  44. 44. MV* Friday 20 September 13
  45. 45. MV*Remember, it’s all about you. Friday 20 September 13
  46. 46. MV* Friday 20 September 13
  47. 47. MV* Friday 20 September 13
  48. 48. MV* Friday 20 September 13
  49. 49. MV* hendrik.swanepoel@gmail.com fluit fluit my storie is uit. Friday 20 September 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×