$30 off During Our Annual Pro Sale. View Details »

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

Ruy Adorno

July 06, 2017
Tweet

More Decks by Ruy Adorno

Other Decks in Programming

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