Architecture: ember.js and AngularJS

Ember.js and AngularJSTwo Architectures Compared

Evan Dorn and Hannah Howard

Logical Reality Design

http://[email protected]

@idahoev

[email protected]@techgirlwonder

Tuesday, November 19, 13

http://LRDesign.com

http://LRDesign.com

mailto:[email protected]










How do I web application?


Simple apps can usesimple tools.


BIG APPS NEED

ARCHITECTURE


BIG APPS NEED

ARCHITECTURE•Keep it organized!


BIG APPS NEED


•Modularize your code!


BIG APPS NEED



•Separate concerns!


BIG APPS NEED




•Establish conventions for smooth teamwork!


BIG APPS NEED




•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 Model

Controller

Presenter


OR EVEN...

View Model

Controller

Presenter


The Web App Challenge


Server

CLASSIC RAILS APP

View Model

Controller

Browser

DOM UX

“The Page”HTTP

Markup

Request


THE PROBLEMS:


THE PROBLEMS:•All possible user actions must be precomputed



•... and embedded into the HTML




•Reloading the whole page every request




•Reloading the whole page every request

•Some actions not possible without browser interactivity


HOW DO WE ARCHITECT

A BROWSER APP?


ServerMostly persistence

JS SINGLE-PAGE APP

ModelController

BrowserApp for user interaction

View Model

Controller


ServerPersistence Only!

JS SINGLE-PAGE APP

Model

BrowserApp for user interaction

View Model

Controller


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


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

ARCHITECTURESTuesday, November 19, 13

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


•... concepts from Rails


PHILOSOPHY: EMBER



•... concepts from Cocoa


PHILOSOPHY: EMBER



•... concepts from Cocoa

•Apply them to the browser


PHILOSOPHY: ANGULAR


PHILOSOPHY: ANGULAR•Start from the browser - HTML and CSS



•Extend those concepts to app creation



•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



•MVC thinking



•MVC thinking

•Routes connect user actions to controllers


EMBER PRIORITIES


EMBER PRIORITIES•Unified interface to data



•Convention of structure




•Sharing Of URLs




•Sharing Of URLs

•UI Design


ANGULAR PRIORITIES


ANGULAR PRIORITIES•Web-UX driven thinking



•Isolatable / testable code



•Isolatable / testable code

•Add app features by augmenting the DOM


SYN-NAPS #1


SYN-NAPS #1•Attentional focus is best < 15 minutes



•Best to take breaks to let the synapses recover



•Best to take breaks to let the synapses recover

•So let’s do a little exercise to review


DIFFERENT JOBSNEED 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 fine!


SYN-NAPS #1


SYN-NAPS #1

3 minutes...


SYN-NAPS #1

3 minutes... GO!Tuesday, November 19, 13

SYN-NAPS #1


SYN-NAPS #1

3 minutes...


SYN-NAPS #1

3 minutes... STOP!Tuesday, November 19, 13

EMBER ARCHITECTURE1:START



Ember starts with the URL/Route




Loads Model




Loads Model

Renders Template




Loads Model

Renders Template

Adds Template To DOM


EMBER ARCHITECTURE2: RUNTIME



Ember Watches for Events




Passes Events To Controller (or bubbles up to Route) to update model




Passes Events To Controller (or bubbles up to Route) to update model

DOM auto-updates


EMBER ARCHITECTURE3: ROUTER



•The entry point for everything in Ember is the router




•Looks a lot like a routes.rb in Rails




•Looks a lot like a routes.rb in Rails

•Different: Fetches the Model for the Controller


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 perform two functions in Ember:




•1. Add presentation to the model




•1. Add presentation to the model

•2. Receive browser events and translate them to semantic events


EMBER ARCHITECTURE 5: CONTROLLERSApp.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: CONTROLLERSApp.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>


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>


EMBER ARCHITECTURE 6:DATA BINDING



•Is done with computed properties




•Available on Models, Controllers, Data Stores, etc.




•Available on Models, Controllers, Data Stores, etc.

•Define 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')

});


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



Angular reads a marked-up HTML file




Processes it according to directives (yours and AJS’s)




Processes it according to directives (yours and AJS’s)

Binds view elements to Model data


ANGULAR ARCHITECTURE 2: RUNTIME



Angular watches for events, and changes to bound entities




Updates bound pairs, calls watch methods




Updates bound pairs, calls watch methods

Re-renders the DOM as a result


ANGULAR ARCHITECTURE 3: $SCOPE



•A special JS object that groups all the stuff for the current controller context.




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




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

•Inheritance is determined by controller inheritance.


ANGULAR ARCHITECTURE 4:MODELS



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




•No class to extend!





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





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

•Automatically two-way bound to view elements


ANGULAR ARCHITECTURE 5: CONTROLLERS



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




•No class to extend or API to call!





•Which controller is relevant is determined by the markup.





•Which controller is relevant is determined by the markup.

•Inheritance is determined by the markup, too!



<div ng-controller="SomeController"> {{name}} is {{comment}}! <div ng-controller="InnerController"> {{name}} is {{comment}}! </div></div>

function SomeController($scope, []) { $scope.name = “Evan” $scope.comment = “really cool”}

function InnerController($scope, []) { $scope.comment = “misinformed”}

#outputEvan is really coolEvan is misinformed






#outputEvan is really coolEvan is misinformed






#outputEvan is really cool!Evan is misinformed!


ANGULAR ARCHITECTURE 6: DATA BINDING



•Bound DOM elements and model data auto-update each other.




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




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

•but $scope.$watch can create such bindings



<div ng-controller="SomeController"> <input type=‘text’ ng-model=‘name’></input> You typed {{name}}!</div>

function SomeController($scope, []) { # name isn’t even mentioned! # in fact you don’t even need the controller!}



<div ng-controller="SomeController"> <input type=‘text’ ng-model=‘name’></input> You typed {{name}}!</div>

function SomeController($scope, []) { # name isn’t even mentioned! # in fact you don’t even need the controller!}



<div ng-controller="SomeController"> <input type='text' ng-model='name'></input> {{crazy_string}}</div>

function SomeController($scope, []) { $scope.crazy_string = $scope.name + " is crazy!";}












function SomeController($scope) { $scope.$watch('name', function(){ $scope.crazy_string = $scope.name + " is crazy!"; })}










ANGULAR ARCHITECTURE 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 #2QUICK Q&A


DEMO TIME!(EMBER.JS)


SYN-NAPS #3


SYN-NAPS #3PUPPY BREAK!



DEMO TIME!(ANGULARJS)


Thanks!Evan Dorn

and Hannah Howard Logical Reality Design

http://[email protected]

@idahoev

[email protected]@techgirlwonder


http://LRDesign.com

http://LRDesign.com











Technology

Architecture: ember.js and AngularJS