Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Viewers also liked (20)
Similar to Evolution of the Single Page Application
Similar to Evolution of the Single Page Application (20)
Recently uploaded
Recently uploaded (20)
Evolution of the Single Page Application
- 1. Evolution of the Single Page Application Caleb Sotelo・@calebds Software Engineer, OpenX
- 2. 1997 2017 A Story About Building the Web
- 3. What is a SPA? A Single Page App is a web application that requires a single page load in a web browser.
- 4. Wait, what is a page? <html>
- 5. The Right Environment 1. Hypertext 2. HTTP 3. URLs 4. httpd
- 6. Building Blocks of Life: JavaScript element.onClick = function() { document.getElementById('myImage').src = 'differentImage.jpg'; } Invented so people could do DHTML:
- 7. 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
- 9. Y2K
- 10. 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();
- 11. 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.”
- 12. JavaScript Libraries: Pre-GitHub 2004 - Dojo 2005 - Prototype (February) 2006 - jQuery (January) 2006 - YUI (February) 2006 - MooTools (September)
- 13. 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
- 16. 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
- 17. 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
- 18. Modern SPA Frameworks 1. Angular 2. React + 3. Meteor 4. Vue 5. Ember
- 19. Honorable Mention 1. Moore’s Law 2. RESTful Web Services 3. Browser Wars 4. Firebug
- 20. JavaScript 2017
- 21. Next Mutation: Web as App Platform 1. Web APIs (WebGL, Web Audio API, File System API) 2. Web Components PWAs AMP AngularCLI