The JAM stack

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