Breaking the Server-Client Divide with Node.js and React
•
12 likes•2,518 views
Rendering Web applications server or client side has been a war for years, with server side proponents citing 'speed to glass' and SEO, and client side boasting speed of transitions after the upfront cost, and desktop-like application feel. For a while it was necessary to pick sides, that is until React. In this talk, I will show a stack we are using in IBM Cloud Data Services that uses Node.js and React to bring the best of both worlds in isomorphic apps. Server or client? Yes!
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Breaking the Server-Client Divide with Node.js and React
Similar to Breaking the Server-Client Divide with Node.js and React (20)
Recently uploaded
Recently uploaded (20)
Breaking the Server-Client Divide with Node.js and React
- 1. Breaking the Server-Client Divide with Node.js and React Dejan Glozic, Full-Stack Architect, IBM Cloud Data Services 2015 Programming Layer
- 2. About Me IBM Canada Toronto Lab Full-Stack Architect IBM Cloud Data Services @dglozic http://dejanglozic.com
- 3. What I Work On
- 4. Part 1 Brief history of the server-client wars
- 5. First there was only server It sent pages with text, hyperlinks and images back to the browser.
- 6. Then we started running code Great improvement, pages started coming back tailored to the user and request.
- 7. Then came Ajax Microsoft (yes, Microsoft) added XMLHTTPRequest. JJG called this Ajax (I don’t even).
- 8. Then came the frameworks Because spaghetti is great with meatballs, less great with jQuery.
- 9. It’s not done until it’s overdone ‘Extreme Ajax’ desktop != server != client
- 10. 2012, Twitter: Server is good! Pendulum swings back, because ‘time to the first tweet’ is less when server helps.
- 11. 2013: Node.js extends UI tier Nicholas Zakas says: UI is now client + Node.js server
- 12. 2013: airbnb coins ‘Isomorphic’ Then it creates rendr (Keynote spell checkr throws a hissy fit)
- 13. 2014: React takes off Yes, it was released in 2013 but you could not shut up about Angular then.
- 14. 2015: React is Hot Also, a bunch of nerds get together at a Toronto conference to talk about all this.
- 15. Part 2 Just enough React to make you dangerous.
- 16. Don’t compare React to Angular. React is just for views. You need router, model and event layers.
- 17. It assumes life is short You (and others) should know what your code does 6 months from now.
- 18. It does not make you feel stupid <todo-cmp [model]="todo" (complete)="onCompletingTodo(todo)"></todo-cmp>
- 19. When the state changes, render That’s it. Seriously.
- 20. Virtual DOM is the key React diffs virtual and real DOM, applies delta only.
- 21. Virtual DOM in other contexts Server rendering, React Native.
- 23. Part 3 In which we meet react-router and react-engine JS
- 24. Flip the fake pages Because we are really just showing and hiding divs
- 25. Boxes inside other boxes A B C Route: /A/B/C
- 26. React Express views Virtual DOM can render into a buffer - or an Express response.
- 27. react-router is JavaScript And Node.js can run JavaScript on the server. Hmm…
- 29. Meet react-engine Blend server and client using React, Express, react-router and web pack
- 30. View All together now react- router View react-engine server.js react-engine client.js react- router View View Server Client
- 31. Part 4 Demo + code review, first attempt
- 32. How To Follow • Source code on GitHub: http://github.com/ dglozic/react-engine-demo • Hosted on Bluemix: http://react-engine- demo.mybluemix.net
- 33. Part 5 Once again, this time for the real world
- 35. Not everybody uses React Need a compromise UI composition solution for the uber-system.
- 36. Dust.js to the rescue Header (HTML/CSS/JS) Page content (React) Nav (ditto) Microservice 1 Microservice 2 Microservice 3
- 37. Let’s try again • Source code on GitHub: https://github.com/dglozic/ fsto2015-demo • Hosted on Bluemix: http://fsto-2015- demo.mybluemix.net/
- 39. Server or client rendering? Yes! There is no need to choose sides any more.
- 40. Initial server rendering Instant browser content, automatic SEO
- 41. Client mount Server-rendered state is not lost
- 42. Client takes over All the virtues of client side JS, guilt-free
- 44. Yes, I know about Meteor We prefer flexibility of React ecosystem to ‘full framework’ lock-in of Meteor
- 45. React community hedge Our full stack consists of multiple libraries, reducing single vendor risk
- 46. Q/A ?
- 47. Thank you! Follow me on Twitter: @dglozic Read my blog: dejanglozic.com 2015 Programming Layer