Evolution of the Single Page Application
22
Evolution of the Single Page Application Caleb Sotelo・@calebds Software Engineer, OpenX
-
Upload
caleb-sotelo -
Category
Engineering
-
view
70 -
download
1
Transcript of Evolution of the Single Page Application
Evolution of the Single Page Application
Caleb Sotelo・@calebdsSoftware Engineer, OpenX
1997 2017
A Story About Building the Web
What is a SPA?
A Single Page App is a web application that requires a single
page load in a web browser.
Wait, what is a page?
<html>
The Right Environment1. Hypertext
2. HTTP
3. URLs
4. httpd
Building Blocks of Life: JavaScript
element.onClick = function() {
document.getElementById('myImage').src =
'differentImage.jpg';
}
Invented so people could do DHTML:
Meanwhile, Server-side Sophistication
We can make dynamic web pages!
1. Common Gateway Interface2. “Page” Languages:
a. 1994 - PHPb. 1996 - ASPc. 1999 - JSP
3. Apache Modules
Single Page Ancestors
Y2K
It's a technology! It's a language! It's..AJAX! (It's JSON)
var request = new XMLHTTPRequest();
request.onload = function() {
alert(this.responseText);
};
request.open('get', 'endpoint.php');
request.send();
Doug Crockford
2001 - JSON2002 - JsLint2003 - JsMin2008 - JavaScript: The Good Parts
“It is much harder to write correct programs if you do not understand what the language actually does.”
JavaScript Libraries: Pre-GitHub
2004 - Dojo2005 - Prototype (February)2006 - jQuery (January)2006 - YUI (February)2006 - MooTools (September)
JavaScript Libraries: GitHub Era1. HTTP: jquery, YUI.io, closure2. Partials: jquery.load, hogan3. Storage: amplify, store4. Templating: underscore, mustache, ejs5. Routing: hashchange, YUI.history, crossroads6. MVC: backbone, sproutcore, knockout
JavaScript Cambrian Explosion
JavaScript Cambrian Explosion
Conscious Life: JavaScript Tooling
NodeJS sends JavaScript to the server in 2009.
1. Code organization - AMD, RequireJS, CommonJS2. Code sharing - NPM, Bower3. Automation - Grunt, Gulp
The Modern SPA
Best SPA practices and tools coalesce:
1. Declarative Programming2. Separation of view and app state3. Data Binding4. Promises5. Dependency Injection
Modern SPA Frameworks
1. Angular2. React +3. Meteor4. Vue5. Ember
Honorable Mention
1. Moore’s Law2. RESTful Web Services3. Browser Wars4. Firebug
JavaScript 2017
Next Mutation: Web as App Platform
1. Web APIs (WebGL, Web Audio API, File System API)
2. Web Components
PWAs AMP AngularCLI
Thanks!Caleb Sotelo・@calebds
Software Engineer, OpenX
