AngularJS vs. Ember.js vs. Backbone.js

hire me*

(for rent, not sale)

AngularJS vs. Ember vs. Backbone.js

Backbone.js
“minimal set of data-structure and view primitives

for building web application with JavaScript”

Backbone.js
do what you want,

however you want to do it

(we won’t tell anyone)

Ember
“framework for creating ambitious web applications”

Ember
convention over conﬁguration

AngularJS
“Toolset for building the framework most suited to your
application development”

AngularJS
plain old JavaScript

“production” versions (miniﬁed)

w/ required dependencies

AngularJS
base

templating language

data adapter

support

Ember

Backbone.js

81kb

235kb

6.4kb

built-in

73kb

(handlebars)

??

built-in

210kb

(ember-data)

32kb

(jQuery)

N/A

32kb

(jQuery)

17kb

(json2.js)

4.9kb

(underscore.js)

81kb

550kb

60.3kb

Backbone.js
class
App.Beer
extends
Backbone.Model

class
App.Beers
extends
Backbone.Collection

!

model:
Beer

Ember
App.Beer
=
DS.Model.extend

title:
DS.attr("string")

abv:
DS.attr("number")

country_id:
DS.attr("number")

brewery_id:
DS.attr("number")

brewery:
DS.belongsTo("App.Brewery")

country:
DS.belongsTo("App.Country")

AngularJS

App.Beer
=
{}

Backbone.js
class
App.Beer
extends
Backbone.Model

urlRoot:
"/api/v1/beers"

class
App.Beers
extends
Backbone.Collection

url:
-‐>

if
@brewery_id?

return
"/api/v1/breweries/#{@brewery_id}/beers"

else

return
"/api/v1/beers"

model:
Beer

Ember
DS.RESTAdapter.reopen

namespace:
'api/v1'

App.Store
=
DS.Store.extend

revision:
11

adapter:
DS.RESTAdapter.create()

AngularJS
App.factory
"Beer",
($resource)
-‐>

return
$resource
"/api/v1/beers/:id",

{id:
"@id"},

{update:
{method:
"PUT"}}

Backbone.js
@Router
=
Backbone.Router.extend

initialize:
-‐>

@countries
=
new
Countries()

routes:

"breweries/:brewery_id":
"brewery"

"breweries/:brewery_id/edit":
"breweryEdit"

brewery:
(brewery_id)
-‐>

@changeView(new
BreweryView(collection:
@countries,
model:
new
Brewery(id:
brewery_id)))

breweryEdit:
(brewery_id)
-‐>

@changeView(new
BreweryEditView(collection:
@countries,
model:
new
Brewery(id:
brewery_id)))

changeView:
(view)
=>

@currentView?.remove()

@currentView
=
view

$("#outlet").html(@currentView.el)

Ember
App.Router.map
-‐>

@resource
"brewery",
{path:
"brewery/:brewery_id"}

Ember

App.BreweryRoute
=
Ember.Route.extend

model:
(params)-‐>

App.Brewery.find(params.brewery_id)

AngularJS
App.config
($routeProvider)
-‐>

$routeProvider

.when("/breweries/:id",
{

templateUrl:
"/assets/brewery.html",

controller:
"BreweryController"

})

.when("/breweries/:id/edit",
{

templateUrl:
"/assets/edit_brewery.html",

controller:
"EditBreweryController"

})

Backbone.js
class
@BreweryEditView
extends
Backbone.View

template:
"brewery_edit"

events:

"click
#save-‐button":
"saveClicked"

"keypress
#brewery-‐title":
"titleEdited"

initialize:
-‐>

super

@countriesView
=
new
CountriesView(collection:
@collection)

@$el.html(@countriesView.el)

@model.on
"change",
@render

@model.fetch()

render:
=>

@$("#country-‐outlet").html(@renderTemplate())

return
@

saveClicked:
(e)
=>

e?.preventDefault()

attrs
=

title:
@$("#brewery-‐title").val()

synonyms:
@$("#brewery-‐synonyms").val()

address:
@$("#brewery-‐address").val()

@model.save
attrs,

success:
(model,
response,
options)
=>

App.navigate("/breweries/#{@model.id}",
trigger:
true)

error:
(model,
xhr,
options)
-‐>

errors
=
[]

for
key,
value
of
xhr.responseJSON.errors

errors.push
"#{key}:
#{value.join(",
")}"

alert
errors.join("n")

titleEdited:
(e)
=>

title
=
@$("#brewery-‐title").val()

@$("h2").text(title)

!

#
further
code
omitted

Ember

App.BreweryController
=
Ember.ObjectController.extend

save:
-‐>

@store.commit()

#
further
code
omitted

AngularJS
@EditBreweryController
=
($scope,
$routeParams,
$location,
Brewery)
-‐>

$scope.brewery
=
Brewery.get(id:
$routeParams.id)

$scope.save
=
-‐>

success
=
-‐>

$location.path("/breweries/#{$routeParams.id}")

$scope.errors
=
null

failure
=
(object)-‐>

$scope.errors
=
object.data.errors

$scope.brewery.$update
{},
success,
failure

Backbone.js
<h2><%=
@model.displayName()
%></h2>

<form>

<div
class="control-‐group">

<label
class="control-‐label"
for="title">Title</label>

<div
class="controls">

<input
type='text'
class='input-‐xxlarge'
value='<%=
@model.get("title")
%>'id='brewery-‐title'>

</div>

</div>

<div

<label
for="synonyms">Synonyms</label>

<div
class="controls">

<input
type='text'
value='<%=
@model.get("synonyms")
%>'id='brewery-‐synonyms'>

</div>

</div>

<div

<label
for="address">Address</label>

<div
class="controls">

<textarea
id='brewery-‐address'><%=
@model.get("address")
%></textarea>

</div>

</div>

<button
class='btn
btn-‐primary'
id='save-‐button'>Save</button>

<a
href="/breweries/<%=
@model.id
%>"
class='btn'>Cancel</a>

</form>

Backbone.js
<h2><%=
%></h2>

<form>

<div

<label

<div
class="controls">

<input
type='text'
value='<%=
@model.get("title")


</div>

</div>

<div

<label

<div
class="controls">

<input
type='text'
value='<%=

</div>

</div>

<div

<label

<div
class="controls">

<textarea
%></textarea>

</div>

</div>

<button
class='btn
btn-‐primary'

<a
@model.id
%>"

</form>

Backbone.js
<h2><%=
%></h2>

<form>

<div

<label

<div
class="controls">

<input
type='text'
value='<%=
@model.get("title")

</div>

</div>

<div

<label

<div
class="controls">

<input
type='text'
value='<%=

</div>

</div>

<div

<label

<div
class="controls">

<textarea

%></textarea>

</div>

</div>

<button
class='btn
btn-‐primary'

<a
@model.id
%>"

</form>

Ember
<div
class='span12'>

<h2>{{displayName}}</h2>

<h3>

{{cityState}}

{{#linkTo
"country"
country}}

{{country.title}}

{{/linkTo}}

</h3>

{{#if
isEditing}}

<form>

<div

<label

<div
class="controls">

{{view
Ember.TextField
valueBinding="title"
class='input-‐xxlarge'}}

</div>

</div>

<div

<label

<div
class="controls">

{{view
Ember.TextField
valueBinding="synonyms"

</div>

</div>

<div

<label

<div
class="controls">

{{view
Ember.TextArea
valueBinding="address"

</div>

</div>

<button
class='btn
btn-‐primary'
{{action
"save"}}>Save</button>

</form>

{{
else
}}

{{
partial
"brewery/show"
}}

{{/if}}

</div>

AngularJS
<form>

<h3>{{brewery.title}}</h3>

<div
ng-‐include='"/assets/_errors.html"'></div>

<div

<label

<div
class="controls">

<input
type='text'
ng-‐model='brewery.title'>

</div>

</div>

<div

<label

<div
class="controls">

<input
type='text'
ng-‐model='brewery.synonyms'>

</div>

</div>

<div

<label

<div
class="controls">

<textarea
ng-‐model='brewery.address'></textarea>

</div>

</div>

<button
class='btn
btn-‐primary'
ng-‐click='save()'>Save</button>

</form>

Backbone.js
Pros

Cons

•

Lightweight

•

Too simple

•

Not opinionated

•

Not opinionated enough

•

Simple

•

“Memory” management

•

Easy to read source

•

Unstructured

•

“widget” development

•

Spaghetti code

Ember
Pros

Cons

•

Too complex

•

Overly opinionated

•

Heavyweight

•

Structured

•

Highly opinionated

•

ember-data - not production ready

“less” code

•

API always in ﬂux

•

Buggy

•

Little to no mind-share outside of Rails

•

Difﬁcult to read source code

•
•

“large” apps

AngularJS
Pros

•

Lightly structured

•

Lightly opinionated

•

“less” code

•

Plain JavaScript

•

Simple/Powerful

•

Easy to test

•

Lightweight

•

small, medium, or large apps

Cons

•

Difﬁcult to read source code

•

jQuery plugins require custom
directives

•

Large apps requiring self-imposed
structure

watch the metacasts.tv

episodes on them ;)

@markbates
http://www.metacasts.tv

AngularJS vs. Ember.js vs. Backbone.js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to AngularJS vs. Ember.js vs. Backbone.js

Similar to AngularJS vs. Ember.js vs. Backbone.js (20)

More from Mark

More from Mark (18)

Recently uploaded

Recently uploaded (20)

AngularJS vs. Ember.js vs. Backbone.js