The Art and Science of Shipping Ember Apps

8/6/14
THE ART AND
SCIENCE OF
SHIPPING
SINGLE PAGE
APPS WITH
EMBER.JS
UX DEVELOPMENT at frog

@jdcravens
github.com/jessecravens
jessecravens.com
principal web architect | frog Austin

THE ART &
SCIENCE OF
SHIPPING SINGLE
PAGE APPS WITH
EMBER.JS

!
WHY?
!
!
“YOU HAVE TO KNOW THE PAST TO UNDERSTAND THE PRESENT.”
!
- DR. CARL SAGAN
!
"STUDY THE PAST IF YOU WOULD DEFINE THE FUTURE...."
!
- CONFUCIUS
!
!
!
!
!

TEMPLATES
TRADITIONAL
14
ROUTER
UI
HTML5/CSS3/JavaScript
Web Framework
Data Services
JSON/XML
Storage
DBs
App Server refresh
refresh
refresh
refresh
refresh

App Server
EARLY SPA
IMPLEMENTATION
15
Container App
HTML5/CSS3
Web Framework
Data Services
JSON/XML
Render Engine
JavaScript DOM creation
&& String templates
Gadget App
iFrame
initial load
XHR RESPONSE
-JSON MARKUP FORMAT
XHR REQUEST
-JSON ACTION OBJECT
Gadget App
iFrame
Gadget App
iFrame
REQ PARAMs
Iframe Refresh

BACK IN THE DAY … A NAIVE IMPLEMENTATION
!
!
SEGREGATED DESIGN TEAM HANDED OFF PHOTOSHOP COMPS
!
ARCHITECTED SERVER IMPLEMENTATION FIRST
!
LACK OF CONVENTIONS AND DEVELOPER ERGONOMICS
!
YUI MODULE PATTERN
PSEUDO CLASSICAL INHERITANCE
!
JSON MARK UP LANGUAGE
CUSTOM RENDER ENGINE
!
HTML STRINGS AND VARIABLES
DOM CREATION
!
CONTINUATION PASSING AND CALLBACK HELL
!
IFRAMES AND GADGET SPEC
!
!
!
!
!
!
!

App Server
INITIAL LOAD
19
Container App
HTML5/CSS3
Web Framework
Data Services
JSON/XML
Render Engine
&& String templates
Gadget App 1
iFrame
initial load
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh

INITIAL LOAD
20
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load

INITIAL LOAD
21
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load
{
"root": “#portal",
"childrenType": "Portal",
"type": "ClientCommandObject",
"children": [{
"childrenType": "TabContainer",
"type": "Portal",
"children": [{
"childrenType": "TabPage",
"type": "TabContainer",
"children": [{
"children": [{
"childrenType": "Gadget",
"type": "Column",
"children": [{
"gadgetType": "MyAccounts",
"gadgetContentType": {
"type": "url"
}
}, {
"gadgetType": "EntOffersMlp",
"type": "url"
}
}, {
"gadgetType": "SpendingPlan",
"type": "url"
}
}, {
"gadgetType": "ImcoStorefront",
"type": "url"
}
},

INITIAL LOAD
22
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load
Main.objects.renderObject(rootEl, conﬁgHash);

INITIAL LOAD
23
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load
Main.objects.renderObject = function(root, obj){
this.rootObj = root;
// here you make the call to a function to build out your proper div,
// this will also append it to the root
!
var currentObject = this.constructLayoutObject(this.rootObj, obj);
if(obj.children == null || obj.children.length == 0){
return;
}
else{
// render the branches of the object tree to the root by a recursive call
var i;
for(i=0; i < obj.children.length; i++){
this.renderObject(currentObject, obj.children[i]);
}
}
};

INITIAL LOAD
24
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load
Main.createNode: function(type, id, classNames) {
var node = document.createElement(type);
node.id = id;
if (typeof classNames === 'string' ) {
node.className = classNames;
}
else if (typeof classNames === 'object' ){
var str = classNames.toString();
var classString=str.replace(/,/g,' ');
node.className = classString;
}
return node;
}

INITIAL LOAD
25
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
initial load
!
gadgets.Gadget.prototype.getContent = function(continuation) {
gadgets.callAsyncAndJoin(
[this.getTitleBarContent, this.getUserPrefsDialogContent, this.getMainContent],
function(results) {continuation(results.join(''));},
this);
};
!
gadgets.Gadget.prototype.render = function(chrome) {
if (chrome) {
this.getContent(function(content) {
chrome.innerHTML = content;
});
}
};
!

App Server
LOADED
26
Container App
HTML5/CSS3
Web Framework
Data Services
JSON/XML
Render Engine
&& String templates
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh

POST LOADED
27
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
DRAG N’ DROP EVENT FIRES!
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh

POST LOADED
28
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh
x

POST LOADED
29
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
Main.moveGadget = function(obj) {
var serviceUrlConfigObject = obj;
serviceUrlConfigObject.position = (obj.position !== undefined)?obj.position:0;
serviceUrlConfigObject.action = "moveObject";
serviceUrlConfigObject.version = 1;
Main.services.takeAction('handleMoveGadget' , serviceUrlConfigObject);
};
REQ PARAMs
Iframe Refresh
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x

POST LOADED
30
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
{
action:”moveGadget",
version:1,
category:category,
order:order
};
XHR REQUEST
-JSON ACTION OBJECT
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x
REQ PARAMs
Iframe Refresh

REFRESH
31
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
{
"children": [{
"type": "Portal",
"children": [{
"children": [{
"children": [{
"type": "Column",
"children": [{
"type": "url"
}
}, {
"type": "url"
}
}, {
"type": "url"
}
}, {
"type": "url"
}
},
XHR RESPONSE
-JSON MARKUP FORMAT
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x
REQ PARAMs
Iframe Refresh

App Server
LOADED
32
Container App
HTML5/CSS3
Web Framework
Data Services
JSON/XML
Render Engine
&& String templates
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh
MoveGadget
ChangePage
OpenPanel
AddGadget
DeleteGadget
etc.

WE REALLY NEED RAILS
IN THE BROWSER!

EMBER
37
Views
HTML5/CSS3
Web Framework
HTML5/CSS3/JavaScript Ember.App
JavaScript
Ember Data
JavaScript
ROUTER
JavaScript
Local Storage
JavaScript
initial load
XHR -JSON
WebSocket
TEMPLATES
.hbs
App Server
Data Services
JSON/XML
Models
JavaScript
Controllers
JavaScript
Backburner
JavaScript
Components
JavaScript
present

Working with the S&P labs team we sketched
and visualized 5 key concepts. One of the key
concepts was a way to analyze and view
portfolios through diﬀerent lenses.

PRESENT AND FUTURE
!
DESIGN WITH CODE
!
WORK FRONT TO BACK
!
THE EMBER WAY
!
THE EMBER OBJECT MODEL
!
EMBER RUN LOOP AND BACKBURNER
!
JS TEMPLATES W/ HANDLEBARS / HTMLBARS
!
PROMISES AND THE ASYNC ROUTER
!
WEB COMPONENTS
!
!
!
!
!
!
!

SKETCH
ADOBE EDGE REFLOW
WEBFLOW
MACAW
!

BACK END TEAM
RAPID DEV
57
Early Design: HTML, Diagram Controllers
URL Driven: State Manager and Routes First
Populate the Controllers with Dummy Data
Models w/ Fixtures FixtureAdapter
FRONT END TEAM
Models w/ RESTAdapter
Build Server-Side Routes/Endpoints
Serialization and Formatting JSON
Remote Data Store and DB Sync
!
!
FixtureAdapter RESTAdapter

RAPID DEV
REST ADAPTER
TEMPLATES
FIXTURE ADAPTER
ROUTER
ROUTE HANDLERS
CONTROLLERS
VIEWS/COMPONENTS
MODELS
SERVICES (API DESIGN)
MVC, SPA (Bootstrap Object)
SERVICES (IMPLEMENTATION)
FRONT END DEVELOPMENT
WEB/SERVICES DEVELOPMENT
D
E
P
L
O
Y
C
O
N
C
E
P
T
U
A
L

ADAPTERS
60
App.ApplicationAdapter = DS.FixtureAdapter.extend({
namespace: 'rocknrollcall'
});
!
App.ApplicationAdapter = DS.LSAdapter.extend({
});
!
App.ActivityAdapter = DS.LSAdapter.extend({
});
!
App.ApplicationAdapter = DS.RESTAdapter.extend({
});

EMBER APP KIT
63
{
"name": "app-kit",
"namespace": "appkit",
"APIMethod": "stub",
…

ROUTES.JS
64
module.exports = function(server) {
!
// Create an API namespace, so that the root does not
// have to be repeated for each end point.
server.namespace("/api", function() {
!
// Return ﬁxture data for "/api/activities"
server.get("/activities", function(req, res) {
var activities = [ ];
};
res.send(activities);
});
});
};

EMBER APP KIT
65
{
"name": "app-kit",
"APIMethod": "stub",
…
!
{
"name": "app-kit",
"APIMethod": “proxy”,
"proxyURL": "http://whatever.api:3232",
...

!
!
FRIENDS OR FOES
ACTIVE GENERATION
!
NAMING CONVENTIONS
!
!

EMBER APPLICATION
70
App = Ember.Application.create({
!
ENV.LOG_MODULE_RESOLVER = true;
ENV.APP.LOG_RESOLVER = true;
ENV.APP.LOG_ACTIVE_GENERATION = true;
ENV.APP.LOG_MODULE_RESOLVER = true;
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
ENV.APP.LOG_VIEW_LOOKUPS = true;
!
});

YUI2
76
YAHOO.namespace(‘App’);
!
App.BaseClass = function(){
method: function(){}
};
!
App.Class = function(){
App.BaseClass.call(this);
};
!
App.Class.inherits(App.BaseClass);
!
App.Class.prototype.method = function(){
!
};
2007

var object = new Base;
!
object.extend({
value: "some data”,
!
method: function() {
alert("Hello World!");
}
!
});
!
object.method();
!
// ==> Hello World!
BASE2
77
2007

EMBER OBJECT
78
App.DefaultPlayer = Em.Object.extend({
!
init: function () {
this.set('imgProfilePrefix', 'default_');
},
!
name: “Steve",
!
imgName: function (imgType) {
return this.get('imgProfilePrefix') +
this.get('name').split(' ').join('_').toLowerCase() +
this.get('imgProfileSuffix') + '.' + imgType;
!
}
!
});

GETTERS AND SETTERS
79
name: “Steve"
});
!
var steve = App.DefaultPlayer.create({});
!
steve.set(‘name’ , ‘Stephen’);
!
steve.get(‘name’); // Stephen

INHERITANCE
80
App.DefaultPlayer = Em.Object.extend({});
!
App.Player = App.DefaultPlayer.extend({
…
});

SUPER()
81
init: function () {
this.set('imgProfilePrefix', 'default_');
this.set('imgProfileSuffix', '_profile');
}
});
!
App.Player = App.DefaultPlayer.extend({
init: function () {
this._super();
this.set('imgProfilePrefix', 'player_');
}
});

COMPUTED PROPERTIES
82
App.DefaultPlayer = Ember.Object.extend({
…
name: "Steve",
baseDir: "/images",
imgName: function(){
return this.get('imgProfilePrefix') + this.get('name').split('
').join('_').toLowerCase() + this.get('imgProfileSuffix') + '.png';
},
imgPath: function(){
return this.get('baseDir') + '/profile/' + this.imgName();
}.property('baseDir', 'imgName')
});

OBSERVERS
83
…
onlineStatusChanged: function(){
console.log('onlineStatusChanged to: ' + this.get('isOnline'));
}.observes('isOnline').on('init')
});
!
var steve = App.DefaultPlayer.create({
'isOnline': true
}); // onlineStatusChanged to true
!
steve.set('isOnline', false); // onlineStatusChanged to false

BINDINGS
84
…
name: "Steve",
baseDir: "/images",
imgName: function(){
return this.get('imgProfilePrefix') + this.get('name').split('
').join('_').toLowerCase() + this.get('imgProfileSuffix') + '.png';
},
imgPath: function(){
return this.get('baseDir') + '/profile/' + this.imgName();
}.property('baseDir', 'imgName')
});

EMBER RUN LOOP ||
BACKBURNER.JS

POST LOADED
86
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
REQ PARAMs
Iframe Refresh
2007

POST LOADED
87
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
{
version:1,
category:category,
order:order
};
XHR REQUEST
-JSON ACTION OBJECT
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x
REQ PARAMs
Iframe Refresh
DRAG N’ DROP EVENT FIRES!
2007

POST LOADED
88
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
{
version:1,
category:category,
order:order
};
XHR REQUEST
-JSON ACTION OBJECT
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x
REQ PARAMs
Iframe Refresh
x
{
version:1,
category:category,
order:order
};
XHR REQUEST
-JSON ACTION OBJECT
2007

RUN LOOP
89
!
BBone.DisplayView = Backbone.View.extend({
!
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
console.log(‘render’);
}
});
!
// render
model.set('ﬁrstName', 'Erik');
// render again
model.set('lastName', 'Bryn');
!
!

RUN LOOP
91
!
BBone.DisplayView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
backburner.deferOnce('render', this, this.actuallyRender);
},
actuallyRender: function() {
// do our DOM manipulations here. will only be called once.
}
});
backburner.run(function() {
model.set('ﬁrstName', 'Erik');
model.set('lastName', 'Bryn');
});
!

!
EMBER.RUN.QUEUES
!
FLUSHING ROUTER TRANSITIONS
!
["SYNC", “ACTIONS", "ROUTERTRANSITIONS", "RENDER", "AFTERRENDER", "DESTROY"]

!
EMBER.RUN.QUEUES
!
["SYNC", "ACTIONS",
"ROUTERTRANSITIONS", "RENDER",
"AFTERRENDER", "DESTROY"]

DOM
96
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
JSON
MARKUP
LANGUAGE
Main.createNode: function(type, id, classNames) {
var node = document.createElement(type);
node.id = id;
if (typeof classNames === 'string' ) {
node.className = classNames;
}
else if (typeof classNames === 'object' ){
var str = classNames.toString();
var classString=str.replace(/,/g,' ');
node.className = classString;
}
return node;
}
2007

DOM VS INNERHTML
97
<script type="text/x-handlebars" data-template-
name=“application">
!

!
</script>
2007

INNERHTML
99
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
if (chrome) {
});
}
};
!
2007
JSON
MARKUP
LANGUAGE

JS TEMPLATES WITH HANDLEBARS
!
Ember.TEMPLATES

HANDLEBARS
101
<div {{bind-attr
class=“myClass"}}>
{{myValue}}
</div>
Compiled JS
Functions
!
Em.TEMPLATES
Handlebars
Compiler
Emits
String
!

//This
is
how
handlebars
works

var
output
=
"";

output.push("<div
class="");

output.push("<script
type='text/x-‐placeholder'
id='start-‐1'></script>");

//
insert
the
value
of
myClass

id='end-‐1'></script>");

output.push("">");

id='start-‐2'></script>");

//
insert
the
value
of
myValue

id='end-‐2'></script>");

output.push("</div>");
Output
string
innerHTML

HANDLEBARS
102
</script>
grunt.initConfig({
yeoman: yeomanConfig,
watch: {
emberTemplates: {
files: '<%= yeoman.app %>/templates/**/*.hbs',
tasks: ['emberTemplates', 'livereload']
}
}
});

VARIABLES
103
{{App.applicationName}}
<ul class="navbar artists”>
{{#each item in navbar-items}}
{{#if item.isAccessible}}
{{#each label in items.labels}}
<li>
{{#linkTo ‘label’ label.id}}{{label.title}}{{/linkTo}}
</li>
{{/each}}
{{else}}
<li>
<a {{bind-attr href=‘item.fullAddress’}}>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

MINIMAL LOGIC
104
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

LINKS
105
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

LISTS
106
{{#each label in item.labels}}
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a> </li>
{{/if}}
{{/each}}
</ul>

BOUND ATTRIBUTES
107
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

!
!
HTMLBARS OVER HANDLEBARS
PERFORMANCE
!
BIND-ATTR GONE
!
METAMORPH GONE
!
LOGIC IN TEMPLATES
!
!

HTMLBARS
110
<div

class=“{{myClass}}”>

{{myValue}}

</div>
Compiled JS
Functions
!
Em.TEMPLATES
HTMLBars Compiler Emits DOM elements
var
output
=
dom.createDocumentFragment();

var
div
=
dom.createElement('div');

dom.RESOLVE_ATTR(context,
div,
'class',
'myClass');

var
text
=
dom.createTextNode();

dom.RESOLVE(context,
text,
'textContent',
'myValue');

div.appendChild(text);

output.appendChild(div);
<div
class="{{myClass}}">{{myValue}}</div>

BOUND ATTRIBUTES
111
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

NO MORE BIND-ATTR
112
<li>
</li>
{{/each}}
{{else}}
<li>
<a href=“{{fullAddress}}”>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

LOGIC-LESS
113
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

LOGIC
114
{{#if (item.type === ‘sidenavbar-item’) }}
<li>
</li>
{{/each}}
{{else}}
<li>
{{item.name}}</a>
</li>
{{/if}}
{{/each}}
</ul>

HTMLBARS
115
!
!
</script>

!
!
RSVP
PROMISES/A+
!
ES6 COMPLIANT
!
CONVENIENCE METHODS
!
!
!
!
!
!

RSVP
120
var p = new RSVP.Promise(function(resolve, reject) {
// succeed
resolve(value);
// or reject
reject(error);
});
!
p.then(function(value) {
// success
}, function(value) {
// failure
});

CONTINUATION
121
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
!
[this.getTitleBarContent, this.getUserPrefsDialogContent, this.getMainContent],
this);
};
!
if (chrome) {
});
}
};
! 2007

CONTINUATION
122
!
[this.getTitleBarContent, this.getUserPrefsDialogContent,
this.getMainContent],
this);
};
!
if (chrome) {
});
}
};
!
2007

XHR RESPONSE
123
Container App
HTML5/CSS3
Web Framework
Render Engine
&& String templates
{
"children": [{
"type": "Portal",
"children": [{
"children": [{
"children": [{
"type": "Column",
"children": [{
"type": "url"
}
}, {
"type": "url"
}
}, {
"type": "url"
}
}, {
"type": "url"
}
},
XHR RESPONSE
-JSON MARKUP FORMAT
Gadget App 1
iFrame
Gadget App 2
iFrame
Gadget App 3
iFrame
x
REQ PARAMs
Iframe Refresh
2007

SUCCESS, FAILURE
124
Main.YUIConnectionManager.callback = {
success: function(o) {
try {
var data = YAHOO.lang.JSON.parse(o.responseText);
}
catch (e) {
Main.debug(err + " - Invalid data”);
}
},
failure: function(o) {
}
};
2007

ROUTE HANDLERS
125
App.ArtistRoute = Ember.Route.extend({
model: function(params) {
!
XHR( "some URL” , {"id":params.enid}, function
callback(response){
// handle response
});
!
}
});

PROMISES
126
RSVP.all([ afunction(), another(), yetAnother()])
!
.then(function() {
!
console.log("They're all ﬁnished, success is ours!”);
!
}, function() {
!
console.error("One or more FAILED!”);
});

PROMISES
127
var promises = {
posts: getJSON("/posts.json"),
users: getJSON("/users.json")
};
!
RSVP.hash(promises).then(function(results) {
console.log(results.users) // print the users.json results
console.log(results.posts) // print the posts.json results
});

IFRAMES
!
TRADITIONAL WEB DEVELOPERS CAN ADD CONTENT
!
SANDBOXED CONTENT / CAN LOAD FROM PROXIES
!
POST MESSAGE API HAS EVOLVED / CONTAINER CAN CREAT AN INTERFACE
!
DONT NEED TO LEARN CONTAINER IMPLEMENTATION
!
!
!
!
!
!
!
!
!
!
!
!
!

OH WAIT, ONE MORE THING.
!
- ERIK BRYN, EMBER CONF 2014

The Art and Science of Shipping Ember Apps

The Art and Science of Shipping Ember Apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to The Art and Science of Shipping Ember Apps

Similar to The Art and Science of Shipping Ember Apps (20)

More from Jesse Cravens

More from Jesse Cravens (6)

Recently uploaded

Recently uploaded (20)

The Art and Science of Shipping Ember Apps