Upload
dejan-glozic
View
1.372
Download
0
Embed Size (px)
Citation preview
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