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

The JAM stack

Alex Muraro
September 19, 2017

The JAM stack

Presentation given at the Aachen Web Makers Meetup on the 15th of September 2017.

Alex Muraro

September 19, 2017
Tweet

More Decks by Alex Muraro

Other Decks in Technology

Transcript

  1. The JAM Stack Not a presentation about breakfast

  2. Alessandro Muraro Frontend Developer @ navabi.de https://alexmuraro.me https://twitter.com/akmur

  3. What are we talking about • Not Breakfast • Not

    really a stack, but rather an approach • A new (but old) way to build websites
  4. What does JAM mean? • JavaScript • API • Markup

    More about this later...
  5. What is not JAM stack? • A site built with

    server side CMS • A SPA where views are built on the server at run time • A monolithic app running on PHP, Node, Ruby, etc
  6. None
  7. Current status

  8. None
  9. (some of) the problems we face right now • Performance

    • Complexity • Deployment strategies • Caching • Security • Scalability • Reliability
  10. (some of) the problems we face right now • Performance

    • Complexity • Deployment strategies • Caching • Security • Scalability • Reliability
  11. Isn’t it getting out of hand?

  12. None
  13. Enter the JAM!

  14. JAM in a nutshell • Generate static Markup for public

    pages • Make it interactive with JavaScript • Use APIs instead of databases • Use serverless services if needed • Deploy GIT branches to CDN services
  15. Generate static Markup for public pages • Jekyll • Hugo

    • Netlify CMS • Middleman • Nuxt • WordPress!
  16. JAM in a nutshell • Generate static Markup for public

    pages • Make it interactive with JavaScript • Use APIs instead of databases • Use serverless services if needed • Deploy GIT branches to CDN services
  17. Make it interactive with JavaScript • Add dynamic features •

    Add User-centric features • Use React, Vue, Angular, Vanilla, etc • Interact with APIs using “AJAX”
  18. JAM in a nutshell • Generate static Markup for public

    pages • Make it interactive with JavaScript • Use APIs instead of databases • Use serverless services if needed • Deploy GIT branches to CDN services
  19. Use APIs instead of databases

  20. JAM in a nutshell • Generate static Markup for public

    pages • Make it interactive with JavaScript • Use APIs instead of databases • Use serverless services if needed • Deploy GIT branches to CDN services
  21. Use serverless services if needed • Example: A function to

    resize a picture • Services like Amazon Lambda, Google Functions, Stdlib • Functions as a Service • Call functions when you need them • Scalable, Fast, Cheap
  22. JAM in a nutshell • Generate static Markup for public

    pages • Make it interactive with JavaScript • Use APIs instead of databases • Use serverless services if needed • Deploy GIT branches to CDN services
  23. Deploy GIT branches to CDN services • No need for

    complex deployment strategies • Easily get staging branches live • Just push a branch to the CDN service
  24. We end up with...

  25. The result is... • Scalable • Reliable • Super fast

    • Super secure • Simple
  26. Smashing Magazine did it • Switched from WordPress to JAM

    stack • Hosted by Netlify • Uses Netlify CMS (custom built then open sourced) • Got 10x faster
  27. Just let it go

  28. Just let it go • Realize you don’t have to

    own your stack • Delegation is good • Let the specialists do their job • Don’t worry about servers and databases • Focus on building the product • Have fun doing what you like
  29. Resources • Netlify • Shifter • Jamstack.org • JAM stack

    radio podcast • The Smashing Magazine Story