Slide 1

Slide 1 text

The JAM Stack Not a presentation about breakfast

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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