Evolution of the Single Page Application

Evolution of the
Single Page Application
Caleb Sotelo・@calebds
Software 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.

The Right Environment
1. 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 Interface
2. “Page” Languages:
a. 1994 - PHP
b. 1996 - ASP
c. 1999 - JSP
3. Apache Modules

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 - JSON
2002 - JsLint
2003 - JsMin
2008 - 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 - Dojo
2005 - Prototype (February)
2006 - jQuery (January)
2006 - YUI (February)
2006 - MooTools (September)

JavaScript Libraries: GitHub Era
1. HTTP: jquery, YUI.io, closure
2. Partials: jquery.load, hogan
3. Storage: amplify, store
4. Templating: underscore, mustache, ejs
5. Routing: hashchange, YUI.history, crossroads
6. MVC: backbone, sproutcore, knockout

Conscious Life: JavaScript Tooling
NodeJS sends JavaScript to the server in 2009.
1. Code organization - AMD, RequireJS, CommonJS
2. Code sharing - NPM, Bower
3. Automation - Grunt, Gulp

The Modern SPA
Best SPA practices and tools coalesce:
1. Declarative Programming
2. Separation of view and app state
3. Data Binding
4. Promises
5. Dependency Injection

Modern SPA Frameworks
1. Angular
2. React +
3. Meteor
4. Vue
5. Ember

Honorable Mention
1. Moore’s Law
2. RESTful Web Services
3. Browser Wars
4. Firebug

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

Evolution of the Single Page Application

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to Evolution of the Single Page Application (20)

Recently uploaded (20)

Evolution of the Single Page Application