A quick comparison of modern client-side MV* frameworks
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

A quick comparison of modern client-side MV* frameworks

  • 1,476 views
Uploaded on

Hendrik Swanepoel is a full stack developer at 22seven.com and has been programming ...

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,476
On Slideshare
1,472
From Embeds
4
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
1

Embeds 4

https://twitter.com 4

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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