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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à The Art and Science of Shipping Ember Apps

Similaire à The Art and Science of Shipping Ember Apps (20)

Plus de Jesse Cravens

Plus de Jesse Cravens (6)

Dernier

Dernier (20)

The Art and Science of Shipping Ember Apps