Comparison of 4 Popular JavaScript MV - Frameworks (Part 1) - Developer Economics PDF

11/9/2015
Comparisonof4popularJavaScriptMV*frameworks(part1)DeveloperEconomics
b Tools
Reports
Blog
About
Contact
c Platforms
Search Developer Economics
HOME / BLOG / COMPARISON OF 4 POPULAR JAVASCRIPT MV* FRAMEWORKS (PART 1)
Comparison of 4 popular JavaScript MV*

frameworks (part 1)
Posted by Tobi Borlinghaus and Daniel Clasen on Jan 29 2015
Like
49
Tweet
119
10
Share
Search for blog posts
3 Comments
In this article
52
TOOLS
Finding a comprehensive comparison between any kind of JavaScript Frameworks,

Libraries or Extensions is not hard these days. Especially when it comes to
Javascript MV* Frameworks, which are used to develop single-page applications
Angular
(SPAs), and their notorious representatives, i.e. AngularJS, Ember, Backbone.js and
newcomer React. A simple Google Search offers a plethora of technical
comparisons to choose from.
Backbone JS
Ember
http://www.developereconomics.com/featurecomparisonof4popularjsmvframeworks/
1/11
11/9/2015
What they dont usually mention, though, is the overall features those frameworks
provide and how they compete for different use cases. Moreover, it is sometimes
difficult, if not impossible, to find information on the origins of those Frameworks,
i.e. how they have developed in time and, most importantly, how they will develop
in the future.
This article is part 1 in a 2-part series, and will focus on comparing key features
from some of the leading JavaScript MV*frameworks. In part 2, well give you some
insight on market-related qualities, followed by a conclusion.
Features Comparison
To get our comparison started, we will focus on the heavy-weight and most
promising features you, as a developer, expect from a JavaScript MV* Framework.
2/11
11/9/2015
Comparing features
UI Binding
Reusable
Components
Routing
Ember.js
Angular.js
Backbone.js
React
Share
Create infographics
Dynamic UI Binding
Dynamic UI Binding is not just passing data to our View or template at page load.
You want to automatically have the View update when the data of the underlying
Model changes. That being said, you may want to have a look at the following
jsfiddle examples to get an idea of the huge improvement provided by dynamic UI
binding over traditional server-side static data binding.
Ember.js:
3/11
11/9/2015
JavaScript
Resources
HTML
CSS
Result
EditinJSFiddle
App=Ember.Application.create()
App.ApplicationController=Ember.Controller.extend({
actions:{
toggleLike:function(){
this.set('liked',!this.get('liked'))
}
}
})
Ember uses Handlebars as the default templating engine. To update a value, which
is bound to the UI, you have to use a specific setter method on your Model while
Handlebars takes care of rendering your page. Additionally, Ember offers much
more binding options, such as its capability to have your Model in either a one or a
two-way binding mode between a View or even another Model.
Angular.js:
JavaScript
Resources
HTML
CSS
Result
EditinJSFiddle
functionLikeExample($scope){
$scope.like=false
$scope.toggleLike=function(){
$scope.like=!$scope.like
}
In contrast with Embers approach, Angular.js allows you to use UI binding at plain
object or even property level. At the end of every code execution, $scope.$apply()
is run to check whether the value has changed and calls $scope.digest() to update
your bindings. This may seem like a possible performance issue at first glance, but
bear in mind that it allows you to update more than one binding simultaneously
without requiring time-consuming DOM updates after each setter call. So the
DOM rendering is triggered only once after you updated as many of the Models
properties as you wish rather than being triggered after every single value change,
like in Embers setter approach. Having all the magic happen in $scope.$digest()
you dont need to call your UI-Binding-Buddy yourself and even the $scope.apply()
call is handled by Angular automatically (e.g. after events, controller init, http
callback, etc).
React:
4/11
11/9/2015
EditinJSFiddle
/**@jsxReact.DOM*/
varLikeButton=React.createClass({
getInitialState:function(){
return{liked:false}
},
handleClick:function(event){
this.setState({liked:!this.state.liked})
},
render:function(){
vartext=this.state.liked?'like':'haven\'tliked'
return(
<div>
<p>You{text}this.</p>
<buttononClick={this.handleClick}>toggle</button>
</div>
)
}
})
React.render(
<LikeButton/>,
document.getElementById('example')
)
One of Reacts rich UI Features is the straightforward linking of states directly to

the UI. Since the UI is thought of as the representation of different states of a
React Component, you just have to manage your states with the magical
#setState(state, callback) method. The state parameter is passed as an object and
will be merged into the internal state reference of your React Component.
Meanwhile, React takes care of all the updating and re-rendering of your interface
using the render method. The callback parameter from setState is optional and can
be registered so you are informed after the UI update.
Reusable Components
While all frameworks provide out-of-the-box functionality, you will inevitably end
up with a lot of custom code. Assuming you are developing more than one
applications, you would like to be able to reuse that code, right?
Ember.js:
Ember is making use of a widget-based approach called Ember Components. It
enables you to write your own application-specific HTML tags using a Handlebars
layout and the power of Embers backend infrastructure. Your custom element can
be used in any Handlebars template you want. Keep in mind, though, that this is
only possible at View level, while Controller level reuse is not supported by the
Framework.
Angular.js:
Similar to Ember, Angular.js provides the ability to create custom HTML tags.
Reusable components in Angular are called directives and are significantly more
powerful than Ember Components. In fact, you will be able to create your own
5/11
11/9/2015
semantic and reusable HTML syntax using those directives. On the other hand, you
may also make use of Angulars extend or mixin system like in Backbone.js and
React.
Backbone.js and React:
The way Backbone.js and React solve reusable components is not new, yet it is very
reliable. They both use the mixin system for code reuse. You may know this feature
already from the dojo toolkit and might remember how powerful mixins can be.
Both Backbone and React let you use mixins at view or even controller level, so
that your components are not forced to be UI-related and may contain just some
utilities or even complex program logic.
Routing
The simplest routing infrastructure a MV* JavaScript Framework can offer is
mapping functions to URLs, similar to their server-side relatives (e.g. Grails, Spring,
ASP.NET, CodeIgniter). For Single Page Applications (SPAs) a URL is whatever
follows the hashtag (or might even be full path assuming HTML5 push-state is
enabled). This routing functionality is essential for any self-respecting SPA.
Ember.js:
JavaScript
Resources
HTML
CSS
Result
EditinJSFiddle
App=Ember.Application.create()
App.Router.map(function(){
//firstparamaterreferstothetemplate
this.route('home',{path:'/'})
this.route('blog')//doesnotneedapathduetothenamingc
onvention
})
App.BlogRoute=Ember.Route.extend({
model:function(){
return{
blogcontent:'Iamablogentry!'
}
}
})
The routing in Ember.js is quite intuitive, since you do not even need to provide a
path for your route, as long as you follow the naming convention. You just provide
the View and an optional Model to the route and there is no need for any kind of
controller (as exhibited in the Fiddle above), unless you are planning to do some
advanced stuff in your application.
Angular.js:
6/11
11/9/2015
JavaScript
HTML
CSS
Result
EditinJSFiddle
varroutingExample=angular.module('Example.Routing',[])
routingExample.controller('HomeController',function($scope){})
routingExample.controller('BlogController',function($scope){})
routingExample.config(function($routeProvider){
$routeProvider.
when('/home',{
templateUrl:'home.html',
controller:'HomeController'
}).
when('/blog',{
templateUrl:'blog.html',
controller:'BlogController'
}).
otherwise({
redirectTo:'/home'
})
})
In contrast to Embers convention-over-configuration routing mechanism,

Angular.js requires a template and even a controller to its router configuration.
You have to manage your template and controller manually but you can do that
almost without restrictions.
Backbone.js:
initialize:function(){
JavaScript
this.render()
Resources
HTML
SCSS
Result
},
render:function(){
this.$el.html(this.template)
}
})
varAppRouter=Backbone.Router.extend({
routes:{
'':'homeRoute',
'home':'homeRoute',
'blog':'blogRoute',
},
homeRoute:function(){
varhomeView=newHomeView()
$("#content").html(homeView.el)
},
blogRoute:function(){
varblogView=newBlogView()
$("#content").html(blogView.el)
}
})
EditinJSFiddle
varappRouter=newAppRouter()
Backbone.history.start()
Similar to Angular.js you provide a View with a Template for your route. The actual
replacement of the DOM is done manually by instantiating the View and updating
the DOM in your container node with the rendered view template. At the end of
7/11
11/9/2015
your routing configuration you just have to tell Backbone to listen for URL changes
with the command Backbone.history.start().
Pit Stop Concluding the Feature Comparison
It is quite unfair to compare React with the likes of Ember, Backbone and Angular.
First and foremost, React is new, while the latter are already established
frameworks in the MV* universe. Secondly, React is not a framework, but rather a
View engine even though it competes extremely well in terms of features. In fact
Facebook explains it better: React is mostly used as the V in MVC.
Lets look again at our JavaScript MV* candidates.
Backbone doesnt provide UI binding and does a really good job at reusable,
components but loses some of its fanciness when it comes to Routing. Ember offers
a slick routing mechanism, keeping things clean and simple by introducing naming
conventions. Its UI Binding concept and use of Handlebars, which provides you
with very nice benefits, is flawless. The only thing Ember lacks is the reuse of
components at Controller level.
To conclude, Angular is our winner so far. The approach of extending HTML with
custom syntax, the easy-to-use data binding features combined with the power of
mixins or extends and a clear routing mechanism makes Angular more than just a
swiss JS-Knife. With its high abstraction level and a bunch of features it may be the
choice for a full featured CRUD application client sided.
Stay tuned to find out more about how our rivals compete in market penetration,
community support, their estimated future usage and, of course, our final
conclusion to help you back the right horse for your SPA.
ANGULAR
BACKBONE
EMBER
JAVASCRIPT
REACT
Tobi Borlinghaus
g LinkedIn
Tobias is employed as a Project Manager for custom Content
Management Solutions. He currently elaborates on his Master
Thesis at the Chair of Information Systems II at the University of
Mannheim with the focus on self-organizing and adaptive,
pervasive computing systems. Some of his free time is spent on
catching up with the latest trends in the mobile industry,
especially, to contrast his day-to-day work, consumer Apps for iOS
8/11
11/9/2015
and Android.
Daniel Clasen
e @daclasen
Daniel is an ambitious Software Developer for Enterprise Web
Applications from Germany. He is specialized in Modern UI
Development and custom tailored Web Solutions. In addition to
his everyday job he loves any kind of technical challenge be it
Hard- or Software related and also devotes his free time with
upcoming and trendy IT topics.
COMMENTS
9/11
11/9/2015
3Comments
Recommend
DeveloperEconomics
Share
Login
SortbyBest
Jointhediscussion
GeorgiGeorgiev 9monthsago
Itwillbeveryinterestingtogetperformancetestsalsoloadspeed,
renderandsomecalculationsandviewupdates.
Reply Share
DanCancro 9monthsago
Thanks.Ihaveintegratedyourcommentsintomycollectionofsuch
things.Ifyouwouldliketocontribute,letmeknowandI'llmakeyou
aneditor.Yourhelpcouldpotentiallysparedevelopersmanyhoursof
anguishresearchingthetradeoffs.https://docs.google.com/spread...
Reply Share
AlessandroPellizzari 9monthsago
Backbonesupportsviewmodelbinding,youjustneedtolistenTothe
modeleventsandupdatetheviewdinamically,orjust.set()tothe
modelwhentheuserinteractswiththeview.
Ifyouwanttoremovesomeboilerplateandautomatesomebindings,
justaddMarionettetoit.
Reply Share
WHAT'STHIS?
ALSOONDEVELOPERECONOMICS
WhyJavaScriptwillwinon
mobile
HowtoMakeMoreMoneywith
EnterpriseApps
1comment6monthsago
1comment8monthsago
AlexNicesummedupMark.
MarloSmithWindows10I
You'vereallyspottedonthe
unexpectedflowTranscompiled
languagestoJStoNative.
thinkwillexpandthismarket
significantly,primarilybecause
ofitsuniversalappmodel.iOS
IstheIndieAppOpportunity
Gone?
Googleestablishesumbrella
companyAlphabet
10commentsayearago
2comments3monthsago
JonAdairIt'snotclearwhat
dmichalakosHm,Ididn't
timeunitthatHunterRevenues
chartisin:daily,monthly,
annually?
knowthat.Here'sarelativelink
foranyoneinterestedtolearn
more.
10/11
11/9/2015
contact us
latest posts
VisionMobile Ltd
Thu Oct 22, 11:02

What weve learned by
designing 10 developer
surveys
90 Long Acre, Covent Garden

London, WC2E 9RZ
United Kingdom
Tue Sep 22, 12:17

App Usage Surpasses
TV: Traditional Media
Companies Slowly
Wake Up
+44 845 003 8742

+44 845 003 8787
newsletter
Add an e-mail address
SEND
don't miss the action
a e h g f
Wed Sep 02, 15:13

Developers: builders or
explorers?
Advertise
About
Contact
Privacy Policy
Cookie Policy
Copyright 2015 Visionmobile Ltd Licensed under (CC) BY-NC-ND 4.0 Developer Economics
Our website uses cookies to enhance your browsing experience No problem More info
11/11

Comparison of 4 Popular JavaScript MV - Frameworks (Part 1) - Developer Economics PDF

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Comparison of 4 Popular JavaScript MV - Frameworks (Part 1) - Developer Economics PDF

Hochgeladen von

Copyright:

Verfügbare Formate

11/9/2015

HOME / BLOG / COMPARISON OF 4 POPULAR JAVASCRIPT MV* FRAMEWORKS (PART 1)

Comparison of 4 popular JavaScript MV*

Search for blog posts

Finding a comprehensive comparison between any kind of JavaScript Frameworks,

One of Reacts rich UI Features is the straightforward linking of states directly to

In contrast to Embers convention-over-configuration routing mechanism,

Thu Oct 22, 11:02

90 Long Acre, Covent Garden

Tue Sep 22, 12:17

+44 845 003 8742

don't miss the action

Wed Sep 02, 15:13

Das könnte Ihnen auch gefallen