building isomorphic javascript apps - ndc 2015

125
ISOMORPHIC JAVASCRIPT APPLICATIONS (*yawn*…… wut?)

Upload: eirik-vullum

Post on 08-Aug-2015

533 views

Category:

Software


0 download

TRANSCRIPT

ISOMORPHIC JAVASCRIPT APPLICATIONS

(*yawn*…… wut?)

ABOUT MEScandinavia Online

JavaScript / node.js <3

github @eiriklv twitter @eiriklv

+ =

ISOMORPHIC JAVASCRIPT

Yes, fancy words - but why should I care..?

ISOMORPHICwtf do you

even mean bro?

JAVASCRIPT

days since last framework?

JAVASCRIPT

0

JAVASCRIPT

embularactymerbone.js(credits to @ryanflorence)

WEB DEVELOPMENTHTML5

CSS3

Isomorphic

AsyncCDNAJAX JSON

Minification

WebSockets

TranspilingSEOES6

kamelåså.js

ISOMORPHIC JSTurns out:

Not that scary after all

ISOMORPHIC JS

server(node.js)

client(browser)

other(e.g iOS)

JavaScript

ISOMORPHIC JSAn abstraction on top of

your environments

THE GOOD OL’ DAYS

When everything was easy(?)

SERVER-SIDEJust ship it all from scratch every time

SERVER-SIDESo easy!

SERVER-SIDEBut poor user experience if you interact a lot

NOT GOOD ENOUGHGimme some dynamic web

pages already!

CLIENT-SIDE (SPA)Look ma’

I can do all the things without reloading now!

CLIENT-SIDE (SPA)

CLIENT-SIDE (SPA)Don’t you dare press the

back button

CLIENT-SIDE (SPA)SEO..?

SERVER-SIDE•Easy to reason about •SEO out of the box

SERVER-SIDE•Every action is a refresh •Poor user experience for dynamic apps

CLIENT-SIDE (SPA)•Actions without refresh •Less redundancy •Better user experience

CLIENT-SIDE (SPA)•No content before the js loads •SEO can be a PITA

BUT I WANT IT ALL!

SERVER + CLIENT•Gets your stuff done

•Two separate codebases for the same application

SERVER + CLIENT

Well that turned into a mess pretty quickly..

anecdotal - YMMV

BOLD STATEMENTSApproaching..

ISOMORPHIC•All the above!

•None of the above!(yeah,right…)

ISOMORPHIC

ISOMORPHISMDemystified

No more conceptual divide between the

server and the client

ISOMORPHISM

ISOMORPHISM

server(node.js)

client(browser)

JavaScript (your app)

ISOMORPHISM

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

ISOMORPHISM

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

ISOMORPHISM

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

ISOMORPHISM

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

ISOMORPHISM

Requestfrom user

(HTTP)

Loadthe same

JavaScripton client

«Hook» into the

rendered app

Respond with

HTML

Renderon server

with JavaScript

We need to use abstractions that are environment agnostic

ISOMORPHISM

HOW CAN I DO THIS?So many options..

REACTserver

(node.js)

String(HTML)

React.renderToString()

server(node.js)

String

client(browser)

DOM(nodes)

REACT

React.render()

LETS BUILD ONEThe simplest isomorphic

JavaScript app?

+

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js |——/public | |—— bundle.js | |——app.js |——webpack.config.js

|——/components | |—— App.jsx | |—— Video.jsx |——/render | |—— server.js | |—— client.js |——/services | |—— get-ndc-videos.js | |——app.js |——webpack.config.js

> webpack

> node app.js

> open http://localhost:3000

We have an isomorphic JavaScript app!

THE POINT OF IT ALLTo be fancy? (yes, but no)

Maintainability (single codebase)

THE POINT OF IT ALL

SEO

THE POINT OF IT ALL

•Progressive Enhancement •Graceful degradation

THE POINT OF IT ALL

Abstracting away the gap betweet server and client

THE POINT OF IT ALL

ISOMORPHISM

There’s more to it

RENDERING

RENDERINGrender()

vs. renderToString()

ROUTING

- router

ROUTINGreq.url

vs. window.location

ROUTINGDifferent inputs

- same API

- router

DATA FETCHING

superagent

DATA FETCHINGXMLHttpRequest

vs. http.request

DATA FETCHING

superagent.get(‘/videos/12’)

DATA FETCHINGDifferent implementations

- same API

MODULESAll abstractions must be

isomorphic(i.e - work on both the client and server)

MODULESIf a module does not depend on the environment it is isomorphic by default

DEMOLet’s look at fully

isomorphic application in action

DEMO

•rendering •routing •data fetching

Isomorphic:

RECAPWhy should we use this did

you say..?

WHY YOU SHOULD BE EXITED

•Less context switching •Maintainability •Best of both worlds

WHY YOU SHOULD BE EXITED

•We push features faster(*)

(*) anecdotal - YMMV

CODEgithub.com/eiriklv/ndc-isomorphic github.com/eiriklv/ndc-isomorphic-flux

QUESTIONS?github.com/eiriklv/ndc-isomorphic github.com/eiriklv/ndc-isomorphic-flux

THANKS!Scandinavia Online

JavaScript / node.js <3

github @eiriklv twitter @eiriklv