JAMStack - The Total Victory of JavaScript

A presentation at JSCamp in July 2019 in Barcelona, Spain by swyx

JAMSTACK THE TOTAL VICTORY OF JAVASCRIPT @swyx // @jscamp

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx DISTRIBUTION

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

#LearnInPublic @swyx

k c a t s m ja JAVASCRIPT / API’S / MARKUP

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019
IN THE BEGINNING @swyx

netlify JAMstack: The Total Victory of JavaScript SERVER JSCamp, July 2019 @philhawksworth

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx DYNAMIC PROGRAM SERVER

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx GENERATED FROM DATA DATABASE PROGRAM SERVER

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SERVERSIDE ONLY 1990’S - 2000’S

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS

netlify DATABASE JAMstack: The Total Victory of JavaScript JSCamp, July 2019 PROGRAM @swyx SERVER

netlify JSCamp, July 2019 PROGRAM @swyx balancer cache DATABASE JAMstack: The Total Victory of JavaScript SERVER

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx balancer cache DATABASE SERVER PROGRAM CDN

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx PROBLEMS 1. MONITORING 2. VERSIONING 3. REPLICATION / MIGRATION 4. CONSISTENT HASHING 5. FINGERPRINTING 6. SECURITY UPDATES 7. AUTOSCALING 8. RELEASE ENGINEERING 9. CACHE INVALIDATION 10.CLOUD PROVISIONING

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx NOT JAMstack

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx LAMP PROBLEMS SECURITY RELIABILITY COMPLEXITY/COST

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx STATIC SITE GENERATORS (V1) GENERATED FROM DATA STATIC ASSETS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SSG’s are (JA)M-stack And HUNDREDS more…

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx JAVASCRIPT GOT SERIOUS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SERVERSIDE ONLY 1990’S - 2000’S

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SERVER-AND-CLIENTSIDE LATE - 2000’S

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx ATWOOD’S LAW Any application that can be written in JavaScript, will eventually be written in JavaScript. https://blog.codinghorror.com/the-principle-of-least-power/

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx EARLY 2010’S

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx JAVASCRIPT WON! (YAY?) THE PYRRHIC VICTORY OF JAVASCRIPT MID 2010’S

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK 4. MEAN PROBLEMS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx balancer cache CDN

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx PERFORMANCE!!!!! JS SIZE VERSION

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx CHEAT: CLIENTSIDE ROUTING

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 PERFORMANCE!!!!! TTI VERSION @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SINGLE PAGE APPS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx CLIENT-SIDE RENDERING https://developers.google.com/web/updates/2019/02/rendering-on-the-web

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript ⚒ + Inline Styles + Inline SVGs JSCamp, July 2019 @swyx XX X

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx CLIENT-SIDE RENDERING SERVER-SIDE RENDERING https://developers.google.com/web/updates/2019/02/rendering-on-the-web

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx MEAN PROBLEMS SECURITY RELIABILITY COMPLEXITY/COST + PERFORMANCE?

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx https://developers.google.com/web/updates/2019/02/rendering-on-the-web

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK 4. MEAN PROBLEMS 5. THE CHANGING ENVIRONMENT

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx GIT BASED, CI/CD WORKFLOW

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THE API ECONOMY

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx JAMSTACK LANDSCAPE

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SERVERLESS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx SERVERLESS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx BUILD TOOLS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx STATIC SITE GENERATORS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx STATIC SITE GENERATORS (v2) JS (Templating, Components, Styling) Rehydration (SSR + SPA)

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx STACK SHAMING

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx STACK SHAMING

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx HMM…. 🤔 Git Workflow + Build Tools + Serverless + API Economy + Static Sites

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK 4. MEAN PROBLEMS 5. THE CHANGING ENVIRONMENT 6. JAM STACK

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx CLIENT-SIDE RENDERING SERVER-SIDE RENDERING STATIC RENDERING https://developers.google.com/web/updates/2019/02/rendering-on-the-web

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx https://developers.google.com/web/updates/2019/02/rendering-on-the-web

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THESE ARE JAMSTACK GitHub Pages S3 Bucket / Azure / GCP Zeit Now v2 Netlify

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THESE ARE JAMSTACK

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THESE ARE JAMSTACK

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx DEVELOPER EXPERIENCE BUILD + DEPLOY LOCAL CDN DEV SERVER BUILD GIT BUILD

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx Instant roll backs Deploy previews Branch deploys Functions Forms

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 Instant roll backs Deploy previews Branch deploys Functions Forms @swyx Identity Analytics Redirects A/B Testing Managed DNS

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx
IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK 4. MEAN PROBLEMS 5. THE CHANGING ENVIRONMENT 6. JAM STACK 7. RECAP

THE OPEN WEB

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 BUILD @swyx CDN

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx WANT MORE?

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THE UNBREAKABLE WEB

netlify JAMstack: The Total Victory of JavaScript JSCamp, July 2019 @swyx THANKS JSCAMP! QUESTIONS WELCOME # SWYX.IO/TALKS | SWYX@NETLIFY.COM | @SWYX

swyx
@swyx

1 / 84

A lot has happened in the five years since Val Karpov coined the MEAN stack to describe “Full Stack” Javascript stacks. React rose to dominance, AWS Lambda started the Serverless movement, and Static Site Generators came back in a big way. What is driving this new stack of Javascript, APIs, and Markup? This is the story of how a JAMstack cynic finally turned into a believer.