Breaking the Server-Client Divide with Node.js and React

Breaking the Server-Client Divide with Node.js and React

Dejan Glozic, Full-Stack Architect, IBM Cloud Data Services

2015 Programming Layer

About MeIBM Canada Toronto Lab

Full-Stack Architect IBM Cloud Data Services

@dglozic http://dejanglozic.com

What I Work On

Part 1Brief history of the server-client wars

First there was only serverIt sent pages with text, hyperlinks and images back to the browser.

Then we started running codeGreat improvement, pages started coming back tailored to the user and request.

Then came AjaxMicrosoft (yes, Microsoft) added XMLHTTPRequest.

JJG called this Ajax (I don’t even).

Then came the frameworksBecause spaghetti is great with meatballs, less great with jQuery.

It’s not done until it’s overdone‘Extreme Ajax’

desktop != server != client

2012, Twitter: Server is good!Pendulum swings back, because ‘time to the first tweet’ is less when server helps.

2013: Node.js extends UI tierNicholas Zakas says: UI is now client + Node.js server

2013: airbnb coins ‘Isomorphic’Then it creates rendr (Keynote spell checkr throws a hissy fit)

2014: React takes offYes, it was released in 2013 but you could not shut up about Angular then.

2015: React is HotAlso, a bunch of nerds get together at a Toronto conference to talk about all this.

Part 2Just enough React to make you dangerous.

Don’t compare React to Angular.

React is just for views. You need router, model and event layers.

It assumes life is shortYou (and others) should know what your code does 6 months from now.

It does not make you feel stupid<todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>

When the state changes, renderThat’s it. Seriously.

Virtual DOM is the keyReact diffs virtual and real DOM, applies delta only.

Virtual DOM in other contextsServer rendering, React Native.

Flux+React

DispatcherData Store

ViewServer ActionAction

Part 3In which we meet react-router and react-engine

JS

Flip the fake pagesBecause we are really just showing and hiding divs

Boxes inside other boxes

A

BC

Route: /A/B/C

React Express viewsVirtual DOM can render into a buffer - or an Express response.

react-router is JavaScriptAnd Node.js can run JavaScript on the server. Hmm…

Meet react-engineBlend server and client using React, Express, react-router and web pack

View

All together now

react-router

View react-engine server.js

react-engine client.js

react-router View

View

Server Client

Part 4Demo + code review, first attempt

How To Follow

• Source code on GitHub: http://github.com/dglozic/react-engine-demo

• Hosted on Bluemix: http://react-engine-demo.mybluemix.net

Part 5Once again, this time for the real world

Remember this page?

Not everybody uses ReactNeed a compromise UI composition solution for the uber-system.

Dust.js to the rescueHeader (HTML/CSS/JS)

Page content (React)Nav (ditto)

Microservice 1

Microservice 2 Microservice 3

Let’s try again

• Source code on GitHub: https://github.com/dglozic/fsto2015-demo

• Hosted on Bluemix: http://fsto-2015-demo.mybluemix.net/

ConclusionIsomorphic apps FTW

Server or client rendering? Yes!There is no need to choose sides any more.

Initial server renderingInstant browser content, automatic SEO

Client mountServer-rendered state is not lost

Client takes overAll the virtues of client side JS, guilt-free

Yes, I know about MeteorWe prefer flexibility of React ecosystem to ‘full framework’ lock-in of Meteor

React community hedgeOur full stack consists of multiple libraries, reducing single vendor risk

Q/A?

Thank you!Follow me on Twitter: @dglozicRead my blog: dejanglozic.com

2015 Programming Layer