$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

    View Slide

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

    View Slide

  3. What are we talking about
    ● Not Breakfast
    ● Not really a stack, but rather an approach
    ● A new (but old) way to build websites

    View Slide

  4. What does JAM mean?
    ● JavaScript
    ● API
    ● Markup
    More about this later...

    View Slide

  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

    View Slide

  6. View Slide

  7. Current status

    View Slide

  8. View Slide

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

    View Slide

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

    View Slide

  11. Isn’t it getting
    out of hand?

    View Slide

  12. View Slide

  13. Enter the JAM!

    View Slide

  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

    View Slide

  15. Generate static Markup for public
    pages
    ● Jekyll
    ● Hugo
    ● Netlify CMS
    ● Middleman
    ● Nuxt
    ● WordPress!

    View Slide

  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

    View Slide

  17. Make it interactive with JavaScript
    ● Add dynamic features
    ● Add User-centric features
    ● Use React, Vue, Angular, Vanilla, etc
    ● Interact with APIs using “AJAX”

    View Slide

  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

    View Slide

  19. Use APIs instead of databases

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  24. We end up with...

    View Slide

  25. The result is...
    ● Scalable
    ● Reliable
    ● Super fast
    ● Super secure
    ● Simple

    View Slide

  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

    View Slide

  27. Just let it go

    View Slide

  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

    View Slide

  29. Resources
    ● Netlify
    ● Shifter
    ● Jamstack.org
    ● JAM stack radio podcast
    ● The Smashing Magazine Story

    View Slide