A quick comparison of modern client-side MV* frameworks

  • Published on
    29-Aug-2014

  • View
    1.241

  • Download
    1

Embed Size (px)

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

<ul><li> MV* Welcome. Friday 20 September 13 </li> <li> MV* Choice. Friday 20 September 13 </li> <li> MV*Its all about you. Friday 20 September 13 </li> <li> MV*Model View Whatever Friday 20 September 13 </li> <li> MV* Friday 20 September 13 </li> <li> 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 youll benet from a client side MVC framework. - Robin Ward Friday 20 September 13 </li> <li> MV*Lets compare! Friday 20 September 13 </li> <li> MV* 0 3200 6400 9600 12800 16000 14231 8207 15622 Backbone Ember Angular Popularity: stars on github Friday 20 September 13 </li> <li> MV* Friday 20 September 13 </li> <li> 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 </li> <li> 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 </li> <li> MV*Models ! app.Transaction = Backbone.Model.extend({}); Friday 20 September 13 </li> <li> MV*Models getters and setters ! transaction = app.txns.create({desc: 'woolies'}); ! transaction.set('desc', 'spar'); ! transaction.get('desc'); Friday 20 September 13 </li> <li> MV*Collections var Transactions = Backbone.Collection.extend({ ! ! model: app.Transaction ! }); Friday 20 September 13 </li> <li> MV*Views ! ! </li></ul> <p> ! ! Friday 20 September 13 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 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 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 MV*Models { ! description: "Woolworths HB", ! amount: -566 } Friday 20 September 13 MV*A simple app (1/4) - app.html Friday 20 September 13 MV*A simple app (2/4) - app.js App = Ember.Application.create({}); // route-&gt; #/transactions App.Router.map(function() { this.resource('transactions'); }); Friday 20 September 13 MV*A simple app (3/4) - app.js App.TransactionsRoute = Ember.Route.extend({ model: function() { return $.getJSON('/txns.json').promise(); } }); Friday 20 September 13 MV*A simple app (4/4) - app.html Friday 20 September 13 MV*Very rails-like </p> <div> {{#link-to 'transaction', this}} !{{description}} R{{amount}} {{/link-to}} </div> <p> Friday 20 September 13 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 excellent for expressing business logic. Friday 20 September 13 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 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" ! ! }, ! ! { ! ! ! description: "Spar" ! ! }!! ! ] } Friday 20 September 13 MV*Angular views </p> <div> {{ txn.description }} </div> <p> 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 Friday 20 September 13 MV*Not only attributes Friday 20 September 13 MV*Filters {{txn|roundDown|formatWithZeroes}} Friday 20 September 13 MV*Injection function TxnCtrl($scope, $location) { return $location.path("/logon" ); } Friday 20 September 13 MV*Doesnt 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 = t; ! }); } Friday 20 September 13 MV*This also works $.get('http://url.co',function(t){ ! $scope.$apply(function () { ! ! $scope.transaction = t; ! }); }); Friday 20 September 13 MV* Friday 20 September 13 MV*Remember, its 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 uit uit my storie is uit. Friday 20 September 13 </p>

Recommended

View more >