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

http://github.com/jessecravens

ART & SCIENCE

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

2006

2007

!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 HTML5/CSS3/JavaScript

Data Services JSON/XML

Storage DBs

App Server refresh

refresh

refresh

refresh

refresh

App Server

EARLY SPA IMPLEMENTATION

15

Container App HTML5/CSS3



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





Gadget App 1 iFrame

initial load

Gadget App 2 iFrame

Gadget App 3 iFrame


INITIAL LOAD

20




initial load

INITIAL LOAD

21




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", "gadgetContentType": { "type": "url" } }, { "gadgetType": "SpendingPlan", "gadgetContentType": { "type": "url" } }, { "gadgetType": "ImcoStorefront", "gadgetContentType": { "type": "url" } },

INITIAL LOAD

22




initial load

Main.objects.renderObject(rootEl, configHash);

INITIAL LOAD

23




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




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




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





Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame


POST LOADED

27




DRAG N’ DROP EVENT FIRES!

Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame


POST LOADED

28




Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame


x

POST LOADED

29




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); };


Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x

POST LOADED

30




{ action:”moveGadget", version:1, category:category, order:order };


Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x


REFRESH

31






Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x


App Server

LOADED

32





Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame


MoveGadget

ChangePage

OpenPanel

AddGadget

DeleteGadget

etc.

WE REALLY NEED RAILS IN THE BROWSER!

2014

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


Models JavaScript

Controllers JavaScript

Backburner JavaScript

Components JavaScript

present

NxGEN: THE NEW S&P CAPITAL IQ

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 different lenses.

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 !!!!

!!

!

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 !!!!

!!

!

DESIGN WITH CODE

SKETCH ADOBE EDGE REFLOW WEBFLOW MACAW !

SKETCH ADOBE EDGE REFLOW WEBFLOW MACAW !

CHROME DEV TOOLS !

WORK FRONT TO BACK

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

DEPLOY

CONCEPTUAL

EMBER DATA ADAPTERS !

ADAPTERS

60

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

NxGEN: THE NEW S&P CAPITAL IQ

API STUBS !

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 fixture data for "/api/activities" server.get("/activities", function(req, res) { var activities = [ ]; }; res.send(activities); }); }); };

EMBER APP KIT

65

{ "name": "app-kit", "namespace": "appkit", "APIMethod": "stub", … !{ "name": "app-kit", "namespace": "appkit", "APIMethod": “proxy”, "proxyURL": "http://whatever.api:3232", ...

EMBRACE THE EMBER WAY

!!FRIENDS OR FOES

ACTIVE GENERATION !

NAMING CONVENTIONS !

!

ACTIVE GENERATION

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; !});

NAMING CONVENTIONS

CONVENTIONS

NAMING CONVENTIONS

CONVENTIONS

THE EMBER OBJECT MODEL

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

77200

7

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

App.DefaultPlayer = Em.Object.extend({ 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

App.DefaultPlayer = Em.Object.extend({ 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

App.DefaultPlayer = Ember.Object.extend({ … 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

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') });

EMBER RUN LOOP || BACKBURNER.JS

POST LOADED

86




Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame


2007

POST LOADED

87






Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x


DRAG N’ DROP EVENT FIRES!

2007

POST LOADED

88






Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x


x{ action:”moveGadget", version:1, category:category, order:order };


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('firstName', 'Erik'); // render again model.set('lastName', 'Bryn'); !!

ACTIONS ARE DEFERRED !

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('firstName', '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"]

http://emberjs.com.s3.amazonaws.com/run-loop-guide/index.html


































































AINT’ THAT FANCY!

JS TEMPLATES

DOM

96




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

DOM VS INNERHTML

98200

8

INNERHTML

99




gadgets.Gadget.prototype.render = function(chrome) { if (chrome) { this.getContent(function(content) { chrome.innerHTML = content; }); } }; !

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 output.push("<script type='text/x-‐placeholder' id='end-‐1'></script>"); output.push("\">"); output.push("<script type='text/x-‐placeholder' id='start-‐2'></script>"); // insert the value of myValue output.push("<script type='text/x-‐placeholder' id='end-‐2'></script>"); output.push("</div>");

Output string

innerHTML

HANDLEBARS

102

<script type="text/x-handlebars" data-template-name=“application">  </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


LINKS

105


LISTS

106

{{App.applicationName}} <ul class="navbar artists”> {{#each item in navbar-items}} {{#if item.isAccessible}} {{#each label in item.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>

BOUND ATTRIBUTES

107


!

HTMLBARS

!!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


NO MORE BIND-ATTR

112

{{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 href=“{{fullAddress}}”> {{item.name}}</a> </li> {{/if}} {{/each}} </ul>

LOGIC-LESS

113

{{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 href=“{{fullAddress}}”> {{item.name}}</a> </li> {{/if}} {{/each}} </ul>

LOGIC

114

{{App.applicationName}} <ul class="navbar artists”> {{#each item in navbar-items}} {{#if (item.type === ‘sidenavbar-item’) }} {{#each label in items.labels}} <li> {{#linkTo ‘label’ label.id}}{{label.title}}{{/linkTo}} </li> {{/each}} {{else}} <li> <a href=“{{fullAddress}}”> {{item.name}}</a> </li> {{/if}} {{/each}} </ul>

HTMLBARS

115

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

http://jsfiddle.net/Ut2X6/embedded/result/


































































METAMORPHS

116

PROMISES AND THE ASYNC ROUTER

!!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




!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; }); } }; ! 200

7

CONTINUATION

122

!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; }); } }; !

2007

XHR RESPONSE

123






Gadget App 1 iFrame

Gadget App 2 iFrame

Gadget App 3 iFrame

x


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 finished, 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 });

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 !!!!

!!

!

WEB COMPONENTS

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 !!!!!!!!!!

!!

!

THAT’S NASTY

OH WAIT, ONE MORE THING. !

- ERIK BRYN, EMBER CONF 2014

THE FUTURE IS NOW

Software

The Art and Science of Shipping Ember Apps