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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

A little bit of history...

Slide 4

Slide 4 text

Monolithic Apps • Apache web server • PHP • MySQL

Slide 5

Slide 5 text

Microservices • Modularization • Decentralized • Flexibility

Slide 6

Slide 6 text

Front end should also benefit from it

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Web APIs • REST APIs • GraphQL

Slide 9

Slide 9 text

Single Page Apps • Client-side logic • Ajax

Slide 10

Slide 10 text

Static sites Nothing can beat serving static files

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

What if we bring microservices into the mix?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Conclusions

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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