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

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

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

  6. Current status

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Isn’t it getting
    out of hand?

    View full-size slide

  10. Enter the JAM!

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

  16. Use APIs instead of databases

    View full-size slide

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

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

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

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

  21. We end up with...

    View full-size slide

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

    View full-size slide

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

  24. Just let it go

    View full-size slide

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

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

    View full-size slide