Isomorphic JavaScript

A short presentation on "isomorphic" JavaScript, including a brief history of JavaScript and the basics of the isomorphic pattern.

Transcript

1. Isomorphic JavaScript Christopher Harrison · ch12@sanger.ac.uk Human Genetics Informatics · IGM Bull Session, 27th January 2015
2. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
3. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
4. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
5. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
6. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
 Java : JavaScript :: Laughter : Slaughter
7. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
 Java : JavaScript :: Laughter : Slaughter Increasingly useful/compatible DOM manipulation XMLHttpRequest
8. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
 Java : JavaScript :: Laughter : Slaughter Increasingly useful/compatible DOM manipulation XMLHttpRequest Standardisation (ECMAScript) and the engine arms race
9. A (Very) Brief History of JavaScript Funny little scripting language to create pop-ups
 Java : JavaScript :: Laughter : Slaughter Increasingly useful/compatible DOM manipulation XMLHttpRequest Standardisation (ECMAScript) and the engine arms race JavaScript on the server
10. –Jeff Atwood “ Any application that can be written in JavaScript, will eventually be written in JavaScript”
11. Isomorphic!? “Equal shape” A structure-preserving map which admits an inverse
12. Traditional SPAs App, often in its entirety, is pushed to the client App facilitates communication between the end user and an API, with a blank initial state App runs completely within the end user’s browser, taking time or user input to initialise Client ! ! ! ! (Browser) API Server App
13. “Isomorphic” JavaScript Rendering and application logic code is homogenised for both server and client Initial page load is rendered fully by the server Client uses this to bootstrap the code, once it’s ready Server (Node.js) App API Client (Browser)
14. Implementation
15. Holier Grail We can create web apps that still work properly* without JavaScript on the client * YMMV
16. Holier Grail We can create web apps that still work properly* without JavaScript on the client * YMMV