isomorphic javascript - uppsala.js #8

66
isomorphic JavaScript

Upload: alexander-aivars

Post on 15-Aug-2015

66 views

Category:

Internet


2 download

TRANSCRIPT

Page 1: Isomorphic javascript - Uppsala.js #8

isomorphic JavaScript

Page 2: Isomorphic javascript - Uppsala.js #8

Alexander Aivars

Page 3: Isomorphic javascript - Uppsala.js #8

Frontend developer

Page 4: Isomorphic javascript - Uppsala.js #8

SVT

Page 5: Isomorphic javascript - Uppsala.js #8

@alexaivarsgithub.com/alexaivars

Page 6: Isomorphic javascript - Uppsala.js #8

Agenda

Page 7: Isomorphic javascript - Uppsala.js #8

Why build isomorphic apps

Page 8: Isomorphic javascript - Uppsala.js #8

How to build isomorphic apps

Page 9: Isomorphic javascript - Uppsala.js #8

How isomorphic with React makes developing fun

Page 10: Isomorphic javascript - Uppsala.js #8

What is isomorphic JavaScript

Page 11: Isomorphic javascript - Uppsala.js #8

Client + Server

Page 12: Isomorphic javascript - Uppsala.js #8

API

Server

Browser

Isomorphic Application

Client plus Server MVC

Page 13: Isomorphic javascript - Uppsala.js #8

BrowsersServerAPI

JSON

JSON HTML

JS

Page 14: Isomorphic javascript - Uppsala.js #8

BrowsersServerAPI

JSON

JSON HTML

JS

Page 15: Isomorphic javascript - Uppsala.js #8

BrowsersServerAPI

JSON

JSON HTML

JS

Page 16: Isomorphic javascript - Uppsala.js #8

SEO + Speed

Page 17: Isomorphic javascript - Uppsala.js #8

Progressive enhancement

Page 18: Isomorphic javascript - Uppsala.js #8

Progressive enhancement

Page 19: Isomorphic javascript - Uppsala.js #8

Why build isomorphic apps

Page 20: Isomorphic javascript - Uppsala.js #8

Deliver the best experience

Page 21: Isomorphic javascript - Uppsala.js #8

Content to everyone

Page 22: Isomorphic javascript - Uppsala.js #8

Content to everyone

Page 23: Isomorphic javascript - Uppsala.js #8

You never know whats out there!

Page 24: Isomorphic javascript - Uppsala.js #8

Growing amount of legacy

Page 25: Isomorphic javascript - Uppsala.js #8

Key to reducing the effort

Page 26: Isomorphic javascript - Uppsala.js #8

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

Page 27: Isomorphic javascript - Uppsala.js #8
Page 28: Isomorphic javascript - Uppsala.js #8

“Isomorphic is the key to building javascript applications

that work without JavaScript”

Page 29: Isomorphic javascript - Uppsala.js #8

How we build isomorphic apps

Page 30: Isomorphic javascript - Uppsala.js #8

node

Page 31: Isomorphic javascript - Uppsala.js #8

node

Page 32: Isomorphic javascript - Uppsala.js #8

Micro service architecture

Page 33: Isomorphic javascript - Uppsala.js #8

Micro service architecture

Page 34: Isomorphic javascript - Uppsala.js #8

React

Page 35: Isomorphic javascript - Uppsala.js #8

React

Page 36: Isomorphic javascript - Uppsala.js #8

How isomorphic and react makes developing fun.

Page 37: Isomorphic javascript - Uppsala.js #8

Unified coding experience

Page 38: Isomorphic javascript - Uppsala.js #8

React fixes the DOM

Page 39: Isomorphic javascript - Uppsala.js #8

Concentrate on WHAT not HOW

Page 40: Isomorphic javascript - Uppsala.js #8

Virtual DOM

Page 41: Isomorphic javascript - Uppsala.js #8

Re-render

Page 42: Isomorphic javascript - Uppsala.js #8

Easy to understand components

Page 43: Isomorphic javascript - Uppsala.js #8

Components are just functions

Page 44: Isomorphic javascript - Uppsala.js #8

Flux

Page 45: Isomorphic javascript - Uppsala.js #8

ViewStoreDispatcher

Action

Page 46: Isomorphic javascript - Uppsala.js #8

Productive

Page 47: Isomorphic javascript - Uppsala.js #8

Valuable

Page 48: Isomorphic javascript - Uppsala.js #8

The stack

Page 49: Isomorphic javascript - Uppsala.js #8

React

Page 50: Isomorphic javascript - Uppsala.js #8

React Router

Page 51: Isomorphic javascript - Uppsala.js #8

Fluxible

Page 52: Isomorphic javascript - Uppsala.js #8

Superagent

Page 53: Isomorphic javascript - Uppsala.js #8

Webpack

Page 54: Isomorphic javascript - Uppsala.js #8

www.svt.se/nyheter

www.svt.se/barnkanalen

www.svt.se/barnkanalen/barnplay

Page 55: Isomorphic javascript - Uppsala.js #8

Join the party

Page 56: Isomorphic javascript - Uppsala.js #8

Management

Page 57: Isomorphic javascript - Uppsala.js #8

The key to spending

less💰supporting old browsers

Page 58: Isomorphic javascript - Uppsala.js #8

Perceived page speed

Page 59: Isomorphic javascript - Uppsala.js #8

SEO-friendly by default

Page 60: Isomorphic javascript - Uppsala.js #8

Developers

Page 61: Isomorphic javascript - Uppsala.js #8

Less 🐞

Page 62: Isomorphic javascript - Uppsala.js #8

Fixes the DOM

Page 63: Isomorphic javascript - Uppsala.js #8

New way to solve old problems

Page 64: Isomorphic javascript - Uppsala.js #8

Our users

Page 65: Isomorphic javascript - Uppsala.js #8

One more thing…

Page 66: Isomorphic javascript - Uppsala.js #8

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

supporting users when javascript breaks