Architecture: ember.js and AngularJS

Ember.js and AngularJS
Two Architectures Compared

Evan Dorn
and Hannah Howard
Logical Reality Design
http://lrdesign.com
evan@lrdesign.com
@idahoev
hannah@techgirlwonder.com
@techgirlwonder

Tuesday, November 19, 13

How do I web application?


Simple apps can use
simple tools.


BIG APPS NEED

ARCHITECTURE


BIG APPS NEED

ARCHITECTURE
•Keep


it organized!

BIG APPS NEED

ARCHITECTURE
•Keep

it organized!

•Modularize


your code!

BIG APPS NEED

ARCHITECTURE
•Keep

it organized!

•Modularize
•Separate


your code!

concerns!

BIG APPS NEED

ARCHITECTURE
•Keep

it organized!

•Modularize

your code!

•Separate

concerns!

•Establish

conventions for smooth teamwork!


BIG APPS NEED

ARCHITECTURE
•Keep

it organized!

•Modularize

your code!

•Separate

concerns!

•Establish

conventions for smooth teamwork!

•Keep


it testable!

Most tools use
some variant of

MVC
“Model, View, Controller"

WARNING!


“MVC” is used in
many different ways!


MVC (ROUGHLY)
View
(UI)

Model
(data)
Controller
(interface)


BUT SOMETIMES...
View

Model

Controller


OTHER TIMES...
View

Presenter

Controller


Model

OR EVEN...
View

Presenter

Controller


Model

The Web App
Challenge


CLASSIC RAILS APP
Browser

Server
Markup

DOM
UX
“The Page”

Model

HTTP
Request


View

Controller

THE PROBLEMS:


THE PROBLEMS:
•All

possible user actions must be precomputed


THE PROBLEMS:
•All
•...


and embedded into the HTML


THE PROBLEMS:
•All
•...



•Reloading


the whole page every request

THE PROBLEMS:
•All
•...



•Reloading
•Some

the whole page every request

actions not possible without browser
interactivity


HOW DO WE
ARCHITECT
A BROWSER APP?


JS SINGLE-PAGE APP
Browser
App for user interaction
View

Model
Controller


Server
Mostly persistence

Controller

Model

JS SINGLE-PAGE APP
Browser
App for user interaction
View

Model
Controller


Server
Persistence Only!

Model

FOR MORE INFO


FOR MORE INFO
Google Yehuda Katz’ Excellent Presentation:


FOR MORE INFO

“A Tale of Two MVC’s”


FOR MORE INFO

“A Tale of Two MVC’s”
From GoGaRuCo 2013


EMBER.JS &
ANGULARJS
BOTH USE “MVC”
THINKING


BUT WITH DIFFERENT
PHILOSOPHIES...


BUT WITH DIFFERENT
PHILOSOPHIES...
..LEADING TO DIFFERENT

ARCHITECTURES

BROWSER APP?


BROWSER APP?
Ember.js Sees:


BROWSER APP?
Ember.js Sees:
Browser


APP

BROWSER APP?
Ember.js Sees:
Browser


APP

AngularJS Sees:

BROWSER APP?
Ember.js Sees:
Browser


APP

AngularJS Sees:

Browser

App

PHILOSOPHY: EMBER


PHILOSOPHY: EMBER
•Take


known techniques for building apps

PHILOSOPHY: EMBER
•Take
•...


concepts from Rails


PHILOSOPHY: EMBER
•Take


•...

concepts from Rails

•...

concepts from Cocoa


PHILOSOPHY: EMBER
•Take


•...

concepts from Rails

•...

concepts from Cocoa

•Apply


them to the browser

PHILOSOPHY: ANGULAR


PHILOSOPHY: ANGULAR
•Start


from the browser - HTML and CSS

PHILOSOPHY: ANGULAR
•Start


•Extend


those concepts to app creation

PHILOSOPHY: ANGULAR
•Start


•Extend

those concepts to app creation

•Angular

asks... What would markup look
like, if it were designed for building apps
instead of just pages?


SHARED ASPECTS:


SHARED ASPECTS:
•Single


point of truth - the Model

SHARED ASPECTS:
•Single
•MVC



thinking

SHARED ASPECTS:
•Single
•MVC

thinking

•Routes



connect user actions to controllers

EMBER PRIORITIES


EMBER PRIORITIES
•Uniﬁed


interface to data

EMBER PRIORITIES
•Uniﬁed

interface to data

•Convention


of structure

EMBER PRIORITIES
•Uniﬁed

interface to data

•Convention
•Sharing


of structure

Of URLs

EMBER PRIORITIES
•Uniﬁed

interface to data

•Convention
•Sharing
•UI

Of URLs

Design


of structure

ANGULAR PRIORITIES


ANGULAR PRIORITIES
•Web-UX


driven thinking

ANGULAR PRIORITIES
•Web-UX

driven thinking

•Isolatable


/ testable code

ANGULAR PRIORITIES
•Web-UX

driven thinking

•Isolatable
•Add


/ testable code

app features by augmenting the DOM

SYN-NAPS #1


SYN-NAPS #1
•Attentional


focus is best < 15 minutes

SYN-NAPS #1
•Attentional
•Best


to take breaks to let the synapses
recover


SYN-NAPS #1
•Attentional


•Best

to take breaks to let the synapses
recover

•So

let’s do a little exercise to review


DIFFERENT JOBS
NEED DIFFERENT

ARCHITECTURES

GRAB A NEIGHBOR
NEXT TO YOU


DISCUSS WITH THEM:


DISCUSS WITH THEM:
1. An app that’s too small to need MVC


DISCUSS WITH THEM:
2. A small app that grew till it needed MVC


DISCUSS WITH THEM:
2. A small app that grew till it needed MVC
3. Any platform is ﬁne!


SYN-NAPS #1
3 minutes...

SYN-NAPS #1
3 minutes... GO!

SYN-NAPS #1
3 minutes...
STOP!

EMBER ARCHITECTURE
1:START


EMBER ARCHITECTURE
1:START
Ember starts with
the URL/Route


EMBER ARCHITECTURE
1:START
Ember starts with
the URL/Route
Loads Model


EMBER ARCHITECTURE
1:START
Ember starts with
the URL/Route
Loads Model
Renders
Template


EMBER ARCHITECTURE
1:START
Ember starts with
the URL/Route
Loads Model
Renders
Template
Adds Template
To DOM


EMBER ARCHITECTURE
2: RUNTIME


EMBER ARCHITECTURE
2: RUNTIME
Ember Watches for
Events


EMBER ARCHITECTURE
2: RUNTIME
Ember Watches for
Events
Passes Events To
Controller (or bubbles
up to Route) to update
model


EMBER ARCHITECTURE
2: RUNTIME
Ember Watches for
Events
Passes Events To
Controller (or bubbles
up to Route) to update
model
DOM auto-updates


EMBER ARCHITECTURE
3: ROUTER


EMBER ARCHITECTURE
3: ROUTER
•The

entry point for everything in Ember is
the router


EMBER ARCHITECTURE
3: ROUTER
•The

the router

•Looks


a lot like a routes.rb in Rails

EMBER ARCHITECTURE
3: ROUTER
•The

the router

•Looks

a lot like a routes.rb in Rails

•Different:

Controller

Fetches the Model for the

EMBER ARCHITECTURE 4: ROUTER
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>

</script>

EMBER ARCHITECTURE 4: TEMPLATE
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>

</script>

EMBER ARCHITECTURE 5:
CONTROLLERS


CONTROLLERS
•Controllers

Ember:


perform two functions in

CONTROLLERS
•Controllers


Ember:
• 1.

Add presentation to the model


CONTROLLERS
•Controllers


Ember:
• 1.

Add presentation to the model

• 2.

Receive browser events and translate them to
semantic events


EMBER ARCHITECTURE 5: CONTROLLERS
App.ContractController = Ember.ObjectController.extend({
fullName: function() {
return this.get(“firstName”) + “ “ + this.get(“lastName”);
}.properties(“firstName”, “lastName”)
});
<script type="text/x-handlebars" data-template-name=”contact”>
<div>My full name is: {{fullName}}</div>
</script>


EMBER ARCHITECTURE 5: CONTROLLERS
App.TicketsController = Ember.ArrayController.extend({
actions: {
addItem: function() {
this.pushObject(this.get(“ticket”));
}
}
});
<script type="text/x-handlebars" data-template-name="tickets">
<form {{action "addItem" on="submit"}}>
{{input value=ticket}}
<button type=submit>Add</button>
</form>
</script>


DATA BINDING


DATA BINDING
•Is

done with computed properties


DATA BINDING
•Is


•Available

on Models, Controllers, Data
Stores, etc.


DATA BINDING
•Is


•Available

on Models, Controllers, Data
Stores, etc.

•Deﬁne

a function property and add
dependencies to it with .properties()


EMBER ARCHITECTURE 6: DATA BINDING
App.Ticket = Ember.Object.extend({
name: null,
priority: null,
abbreviation: function () {
shortName = this.get('name');
return shortName.slice(0,3);
}.property('name')
});


ANGULAR TIME!


ANGULAR ARCHITECTURE
1: STARTUP


1: STARTUP
Angular reads a
marked-up HTML ﬁle


1: STARTUP
Angular reads a
Processes it according
to directives (yours
and AJS’s)


1: STARTUP
Angular reads a
Processes it according
to directives (yours
and AJS’s)
Binds view elements to
Model data

2: RUNTIME


2: RUNTIME
Angular watches for
events, and changes
to bound entities


2: RUNTIME
Angular watches for
events, and changes
to bound entities
Updates bound pairs,
calls watch methods


2: RUNTIME
Angular watches for
events, and changes
to bound entities
Updates bound pairs,
calls watch methods
Re-renders the DOM
as a result

3: $SCOPE


3: $SCOPE
•A special JS object that groups all the stuff for the
current controller context.


3: $SCOPE

•Has inheritable properties and sub-scopes; a bit
magical


3: $SCOPE

•Has inheritable properties and sub-scopes; a bit
magical

•Inheritance is determined by controller
inheritance.


4:MODELS


4:MODELS
•A model is any JS object (not function!) assigned
as a property on the current $scope.


4:MODELS

•No class to extend!


4:MODELS

•Automatically available to any controller that uses
that $scope or a sub-scope.


4:MODELS

•Automatically available to any controller that uses
that $scope or a sub-scope.

•Automatically two-way bound to view elements

5: CONTROLLERS


5: CONTROLLERS
•A controller is just any JS function that receives
and processes on a $scope.


5: CONTROLLERS

•No class to extend or API to call!


5: CONTROLLERS

•Which controller is relevant is determined by the
markup.


5: CONTROLLERS

•Which controller is relevant is determined by the
markup.

•Inheritance is determined by the markup, too!

ANGULAR ARCHITECTURE 5: CONTROLLERS
<div ng-controller="SomeController">
{{name}} is {{comment}}!
<div ng-controller="InnerController">
</div>
</div>
function SomeController($scope, []) {
$scope.name = “Evan”
$scope.comment = “really cool”
}
function InnerController($scope, []) {
$scope.comment = “misinformed”
}
#output
Evan is really cool
Evan is misinformed


ANGULAR ARCHITECTURE 5: CONTROLLERS
<div ng-controller="InnerController">
</div>
</div>
$scope.name = “Evan”
$scope.comment = “really cool”
}
function InnerController($scope, []) {
$scope.comment = “misinformed”
}
#output
Evan is really cool!
Evan is misinformed!


6: DATA BINDING


6: DATA BINDING
•Bound DOM elements and model data autoupdate each other.


6: DATA BINDING

•Other code like controller functions that depend
on model data are not auto-updated.


6: DATA BINDING

•Other code like controller functions that depend
on model data are not auto-updated.

•but $scope.$watch can create such bindings


ANGULAR ARCHITECTURE 6: DATA BINDING
<input type=‘text’ ng-model=‘name’></input>
You typed {{name}}!
</div>
# name isn’t even mentioned!
# in fact you don’t even need the controller!
}


<input type='text' ng-model='name'></input>
{{crazy_string}}
</div>
$scope.crazy_string = $scope.name + " is crazy!";
}


<input type='text' ng-model='name'></input>
{{crazy_string}}
</div>
function SomeController($scope) {
$scope.$watch('name', function(){
$scope.crazy_string = $scope.name + " is crazy!";
})
}


7: DEPENDENCY INJECTION


•All elements get created created with a name (as
a string) they are known by.



•Controllers, services, etc.



•All elements get instantiated with a list of names
they depend on.



•All elements get instantiated with a list of names
they depend on.

•This makes test isolation trivial

ANGULAR ARCHITECTURE 7: DI
var ticketApp = angular.module('ticketApp', []);
ticketApp.factory('TicketList', function(){ # ... });
ticketApp.service(‘BackEndAjaxProvider’, function() { #... })
function TicketsController($scope, TicketList) { #... };
function TicketEditController($scope, [TicketList,
BackEndAjaxProvider]) { #... };


ticketApp.service('BackEndAjaxProvider', function() { #... })
function TicketEditController($scope, [TicketList,
BackEndAjaxProvider]) { #... };


ticketApp.service(‘BackEndAjaxProvider’, function() { #... })
function TicketEditController($scope, TicketList,
BackEndAjaxProvider) { #... };


SYN-NAPS #2


SYN-NAPS #2
QUICK Q&A


DEMO TIME!
(EMBER.JS)


SYN-NAPS #3


SYN-NAPS #3
PUPPY BREAK!


DEMO TIME!
(ANGULARJS)


Thanks!
Evan Dorn
and Hannah Howard
Logical Reality Design
http://lrdesign.com
evan@lrdesign.com
@idahoev
hannah@techgirlwonder.com
@techgirlwonder


Architecture: ember.js and AngularJS

Recommended

More Related Content

Viewers also liked (6)

Similar to Architecture: ember.js and AngularJS (20)

Recently uploaded (20)

Architecture: ember.js and AngularJS