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

Transcript

1. Node.js
   server side render
   in the Age of APIs
   Dev Teach - Montreal 2017
   

   View Slide

2. Ruy Adorno
   @ruyadorno
   http://ruyadorno.com
   ! "
   

   View Slide

3. A little bit of history...
   

   View Slide

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

   View Slide

5. Microservices
   • Modularization
   • Decentralized
   • Flexibility
   

   View Slide

6. Front end should
   also benefit from it
   

   View Slide

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

   View Slide

8. Web APIs
   • REST APIs
   • GraphQL
   

   View Slide

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

   View Slide

10. Static sites
    Nothing can beat
    serving static files
    

    View Slide

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

    View Slide

12. What if we bring
    microservices
    into the mix?
    

    View Slide

13. View Slide

14. • Event-driven runtime
    • Google V8 + event loop
    • Universal JavaScript
    

    View Slide

15. Universal JavaScript
    microservice
    • Node.js microservice
    • Fetches data from APIs
    • Leverages Universal JS
    • Renders markup + data
    

    View Slide

16. Developer Experience
    • Modern JS environment
    • Mocked APIs
    • Hot reload ❤
    

    View Slide

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

    View Slide

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

    View Slide

19. Conclusions
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide