The JAM stack

7fa6101cd43067653cf4ac6c7ca54305?s=47 Alex Muraro
September 19, 2017

The JAM stack

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

7fa6101cd43067653cf4ac6c7ca54305?s=128

Alex Muraro

September 19, 2017
Tweet

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