isomorphic JavaScript

Alexander Aivars

Frontend developer

SVT

@alexaivarsgithub.com/alexaivars

Agenda

Why build isomorphic apps

How to build isomorphic apps

How isomorphic with React makes developing fun

What is isomorphic JavaScript

Client + Server

API

Server

Browser

Isomorphic Application

Client plus Server MVC

BrowsersServerAPI

JSON

JSON HTML

JS

BrowsersServerAPI

JSON

JSON HTML

JS

BrowsersServerAPI

JSON

JSON HTML

JS

SEO + Speed

Progressive enhancement

Progressive enhancement

Why build isomorphic apps

Deliver the best experience

Content to everyone

Content to everyone

You never know whats out there!

Growing amount of legacy

Key to reducing the effort

The server can use the same application code to render every page

“Isomorphic is the key to building javascript applications

that work without JavaScript”

How we build isomorphic apps

node

node

Micro service architecture

Micro service architecture

React

React

How isomorphic and react makes developing fun.

Unified coding experience

React fixes the DOM

Concentrate on WHAT not HOW

Virtual DOM

Re-render

Easy to understand components

Components are just functions

Flux

ViewStoreDispatcher

Action

Productive

Valuable

The stack

React

React Router

Fluxible

Superagent

Webpack

www.svt.se/nyheter

www.svt.se/barnkanalen

www.svt.se/barnkanalen/barnplay

Join the party

Management

The key to spending

less💰supporting old browsers

Perceived page speed

SEO-friendly by default

Developers

Less 🐞

Fixes the DOM

New way to solve old problems

Our users

One more thing…

Isomorphic javascript is not about supporting browsers that don't have javascript but

supporting users when javascript breaks