This document discusses the early development of single page applications using JavaScript frameworks. It describes initial naive implementations that lacked conventions and developer ergonomics. Early frameworks used techniques like iframes, JSON markup languages, and custom rendering engines. Modern frameworks like Ember.js improved on these approaches with conventions, active model patterns, and features like templates, routing, and data loading. The document advocates embracing the Ember way through techniques like working from front to back, using naming conventions, and leveraging features like computed properties and observers.
13. !
WHY?
!
!
“YOU HAVE TO KNOW THE PAST TO UNDERSTAND THE PRESENT.”
!
- DR. CARL SAGAN
!
"STUDY THE PAST IF YOU WOULD DEFINE THE FUTURE...."
!
- CONFUCIUS
!
!
!
!
!
15. App Server
EARLY SPA
IMPLEMENTATION
15
Container App
HTML5/CSS3
Web Framework
HTML5/CSS3/JavaScript
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
16.
17.
18. 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
!
!
!
!
!
!
!
23. INITIAL LOAD
23
Container App
HTML5/CSS3
Web Framework
HTML5/CSS3/JavaScript
Render Engine
JavaScript DOM creation
&& 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]);
}
}
};
24. INITIAL LOAD
24
Container App
HTML5/CSS3
Web Framework
HTML5/CSS3/JavaScript
Render Engine
JavaScript DOM creation
&& 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;
}
47. 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.
48. 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
!
!
!
!
!
!
!
49. 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
!
!
!
!
!
!
!
57. 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
58. 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
64. 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);
});
});
};
126. 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!”);
});
127. 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
});
128. 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
!
!
!
!
!
!
!
130. 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
!
!
!
!
!
!
!
!
!
!
!
!
!