What are we talking about
● Not Breakfast
● Not really a stack, but rather an approach
● A new (but old) way to build websites
Slide 4
Slide 4 text
What does JAM mean?
● JavaScript
● API
● Markup
More about this later...
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Current status
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
(some of) the problems we face right
now
● Performance
● Complexity
● Deployment strategies
● Caching
● Security
● Scalability
● Reliability
Slide 10
Slide 10 text
(some of) the problems we face right
now
● Performance
● Complexity
● Deployment strategies
● Caching
● Security
● Scalability
● Reliability
Slide 11
Slide 11 text
Isn’t it getting
out of hand?
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Enter the JAM!
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Generate static Markup for public
pages
● Jekyll
● Hugo
● Netlify CMS
● Middleman
● Nuxt
● WordPress!
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Make it interactive with JavaScript
● Add dynamic features
● Add User-centric features
● Use React, Vue, Angular, Vanilla, etc
● Interact with APIs using “AJAX”
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Use APIs instead of databases
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
We end up with...
Slide 25
Slide 25 text
The result is...
● Scalable
● Reliable
● Super fast
● Super secure
● Simple
Slide 26
Slide 26 text
Smashing Magazine did it
● Switched from WordPress to JAM stack
● Hosted by Netlify
● Uses Netlify CMS (custom built then open
sourced)
● Got 10x faster
Slide 27
Slide 27 text
Just let it go
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
Resources
● Netlify
● Shifter
● Jamstack.org
● JAM stack radio podcast
● The Smashing Magazine Story