Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Node.js
server side render
in the Age of APIs
Full Stack Toronto - 2017
Ruy Adorno
@ruyadorno
http://ruyadorno.com
A little bit of history...
Monolithic Apps
• Apache web server
• PHP
• MySQL
Microservices
• Modularization
• Decentralized
• Flexibility
Front end should
also benefit from it
Now let's take a
look at the current
state of the art
Web APIs
• REST APIs
• GraphQL
Single Page Apps
• Client-side logic
• Ajax
Static sites
Nothing can beat
serving static files
JamStack
• Static HTML Pages
• Client-side logic (SPA)
• APIs
What if we bring
microservices
into the mix?
• Event-driven runtime
• Google V8 + event loop
• Universal JavaScript
Universal JavaScript
microservice
• Node.js microservice
• Fetches data from APIs
• Leverages Universal JS
• Renders marku...
Developer Experience
• Modern JS environment
• Mocked APIs
• Hot reload ❤
Demo time
https://github.com/ruyadorno/react-ssr-fsto-2017-demo
Frameworks / libs
• Next.js
• react-server
• Electrode
• Razzle
Conclusions
That's it
http://ruyadorno.com
Resources
• https://martinfowler.com/articles/microservices.html
• https://nodejs.org/en/
• https://en.wikipedia.org/wiki/...
Photo credits
• Photo by Roman Kraft on Unsplash, http://unsplash.com/photos/X1exjxxBho4
• Photo by Dennis Kummer on Unspl...
 Node.js server side render in the Age of APIs - Full Stack Toronto 2017
Upcoming SlideShare
Loading in …5
×

Node.js server side render in the Age of APIs - Full Stack Toronto 2017

128 views

Published on

With the increasing popularity of Universal JavaScript and microservices, more and more front-end developers are taking ownership of their server-side render using Node.js.
In this talk we'll see how leveraging APIs in both server and client side is giving birth to new libraries and frameworks and what is the role of a front end developer in this post-full stack world.

Demo: https://github.com/ruyadorno/react-ssr-fsto-2017-demo

Published in: Technology
  • Be the first to comment

Node.js server side render in the Age of APIs - Full Stack Toronto 2017

  1. 1. Node.js server side render in the Age of APIs Full Stack Toronto - 2017
  2. 2. Ruy Adorno @ruyadorno http://ruyadorno.com
  3. 3. A little bit of history...
  4. 4. Monolithic Apps • Apache web server • PHP • MySQL
  5. 5. Microservices • Modularization • Decentralized • Flexibility
  6. 6. Front end should also benefit from it
  7. 7. Now let's take a look at the current state of the art
  8. 8. Web APIs • REST APIs • GraphQL
  9. 9. Single Page Apps • Client-side logic • Ajax
  10. 10. Static sites Nothing can beat serving static files
  11. 11. JamStack • Static HTML Pages • Client-side logic (SPA) • APIs
  12. 12. What if we bring microservices into the mix?
  13. 13. • Event-driven runtime • Google V8 + event loop • Universal JavaScript
  14. 14. Universal JavaScript microservice • Node.js microservice • Fetches data from APIs • Leverages Universal JS • Renders markup + data
  15. 15. Developer Experience • Modern JS environment • Mocked APIs • Hot reload ❤
  16. 16. Demo time https://github.com/ruyadorno/react-ssr-fsto-2017-demo
  17. 17. Frameworks / libs • Next.js • react-server • Electrode • Razzle
  18. 18. Conclusions
  19. 19. That's it http://ruyadorno.com
  20. 20. Resources • https://martinfowler.com/articles/microservices.html • https://nodejs.org/en/ • https://en.wikipedia.org/wiki/Node.js • https://en.wikipedia.org/wiki/Web_API • https://en.wikipedia.org/wiki/Representational_state_transfer • https://en.wikipedia.org/wiki/Single-page_application • https://en.wikipedia.org/wiki/Ajax_(programming) • https://jamstack.org/ • https://martinfowler.com/articles/serverless.html • https://github.com/zeit/next.js • https://react-server.io/ • http://www.electrode.io/ • https://github.com/jaredpalmer/razzle
  21. 21. Photo credits • Photo by Roman Kraft on Unsplash, http://unsplash.com/photos/X1exjxxBho4 • Photo by Dennis Kummer on Unsplash, http://unsplash.com/photos/52gEprMkp7M • Photo by chuttersnap on Unsplash, http://unsplash.com/photos/kyCNGGKCvyw • Photo by Israel Sundseth on Unsplash, http://unsplash.com/photos/BYu8ITUWMfc • Photo by Janko Ferlic on Unsplash, http://unsplash.com/photos/sfL_QOnmy00 • Photo by Matt Briney on Unsplash, http://unsplash.com/photos/kkwVdhkJPfw • Photo by Justin Lawrence on Unsplash, http://unsplash.com/photos/Q3Ag52FRGC8 • Photo by Jonathan Pielmayer on Unsplash, http://unsplash.com/photos/c69HK1HKHYs • Photo by Edouard Ki on Unsplash, http://unsplash.com/photos/xcrI6CPkkJs • Photo by Dean Johns on Unsplash, http://unsplash.com/photos/ls6DOZ--4p4 • Photo by Quino Al on Unsplash, http://unsplash.com/photos/vBxlL1xpSdc • Photo by David Di Veroli on Unsplash, http://unsplash.com/photos/-m1duEoiJng • Photo by Miles Storey on Unsplash, http://unsplash.com/photos/X45VKpWV7hw • Photo by rawpixel.com on Unsplash, http://unsplash.com/photos/C05KN4h8WKw • Photo by Joanna Kosinska on Unsplash, http://unsplash.com/photos/1_CMoFsPfso • Photo by Patrick Tomasso on Unsplash, http://unsplash.com/photos/Oaqk7qqNh_c

×