JAMStack - The Total Victory of JavaScript

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

Slide 1

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

Slide 2

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

Slide 3

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

Slide 4

#LearnInPublic @swyx

Slide 5

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

Slide 6

Slide 7

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

IN THE BEGINNING @swyx

Slide 8

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

Slide 9

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

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

Slide 27

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

Slide 28

Slide 29

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

IN THE BEGINNING: LAMP STACK 2. LAMP PROBLEMS 3. MEAN STACK

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

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/

Slide 35

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

Slide 36

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

Slide 37

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

Slide 38

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

Slide 39

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

Slide 40

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

Slide 41

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

Slide 42

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

Slide 43

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

Slide 44

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

Slide 45

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

Slide 46

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

Slide 47

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

Slide 48

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

Slide 49

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

Slide 50

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

Slide 51

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

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

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

Slide 56

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

Slide 57

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

Slide 58

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

Slide 59

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

Slide 60

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

Slide 61

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

Slide 62

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

Slide 63

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

Slide 64

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

Slide 65

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

Slide 66

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

Slide 67

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

Slide 68

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

Slide 69

Slide 70

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

Slide 71

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

Slide 72

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

Slide 73

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

Slide 74

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

Slide 75

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

Slide 76

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

Slide 77

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

Slide 78

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

Slide 79

THE OPEN WEB

Slide 80

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

Slide 81

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

Slide 82

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

Slide 83

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

Slide 84

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