Node.js server side render in the Age of APIs - DevTeach Montreal 2017

Node.js server side render in the Age of APIs - DevTeach Montreal 2017

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/nextjs-api-fetch-example

B1f68959f14f39a7cba2bc9fd4b926e9?s=128

Ruy Adorno

July 06, 2017
Tweet

Transcript

  1. Node.js server side render in the Age of APIs Dev

    Teach - Montreal 2017
  2. Ruy Adorno @ruyadorno http://ruyadorno.com ! "

  3. A little bit of history...

  4. Monolithic Apps • Apache web server • PHP • MySQL

  5. Microservices • Modularization • Decentralized • Flexibility

  6. Front end should also benefit from it

  7. Now let's take a look at the current state of

    the art
  8. Web APIs • REST APIs • GraphQL

  9. Single Page Apps • Client-side logic • Ajax

  10. Static sites Nothing can beat serving static files

  11. JamStack • Static HTML Pages • Client-side logic (SPA) •

    APIs
  12. What if we bring microservices into the mix?

  13. None
  14. • Event-driven runtime • Google V8 + event loop •

    Universal JavaScript
  15. Universal JavaScript microservice • Node.js microservice • Fetches data from

    APIs • Leverages Universal JS • Renders markup + data
  16. Developer Experience • Modern JS environment • Mocked APIs •

    Hot reload ❤
  17. Demo time https://github.com/ruyadorno/nextjs-api-fetch-example

  18. Frameworks / libs • Next.js • react-server • Electrode •

    Razzle
  19. Conclusions

  20. That's it http://ruyadorno.com ! "

  21. 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
  22. 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