Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Node.js server side render in the Age of APIs - Full Stack Toronto 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/react-ssr-fsto-2017-demo

Ruy Adorno

October 23, 2017
Tweet

More Decks by Ruy Adorno

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Ruy Adorno
    @ruyadorno
    http://ruyadorno.com
    ‘ 6

    View full-size slide

  3. A little bit of history...

    View full-size slide

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

    View full-size slide

  5. Microservices
    • Modularization
    • Decentralized
    • Flexibility

    View full-size slide

  6. Front end should
    also benefit from it

    View full-size slide

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

    View full-size slide

  8. Web APIs
    • REST APIs
    • GraphQL

    View full-size slide

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

    View full-size slide

  10. Static sites
    Nothing can beat
    serving static files

    View full-size slide

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

    View full-size slide

  12. What if we bring
    microservices
    into the mix?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. That's it
    http://ruyadorno.com
    ‘ 6

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide