A presentation at International JavaScript Conference 2019 in in London, UK by Phil Hawksworth
DO WE REALLY NEED THIS JAMSTACK THING? AND WHAT EVEN IS IT? PHIL HAWKSWORTH
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WHAT DOES THAT EVEN MEAN?
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEFINITION / UNDERSTANDING IMPACT / OPPORTUNITIES TOOLS / SERVICES EXAMPLES / RESULTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth @ PHIL HAWKSWORTH DEVELOPER EXPERIENCE, NETLIFY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SOME DEFINITIONS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC EXPERIENCE ? or ARCHITECTURE ?
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC VIRTUE a as
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC DYNAMIC vs
netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATICs n a e m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATICs n a e m AN OPPORTUNITY TO REDUCE COMPLEXITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC VIRTUE a as
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SO…… REASONABLE VOICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LET’S TALK STACKS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LAMP
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAM
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth APIs JAVASCRIPT MARKUP DATA ACCESS RUNTIME BROWSER STATICCDN SERVER HTTP ROUTING AND SERVING
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth k c a t s m ja PRE-RENDERED SERVED STATICALLY PROGRESSIVELY ENHANCED
netlify What even is the JAMstack? APACHE PHP MYSQL LINUX WEB SERVER iJS, London, 2019 @philhawksworth WITH JAMSTACK THE STACK HAS MOVED UP A LEVEL TO THE BROWSER APIs JAVASCRIPT MARKUP BROWSER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth n a c s i h t SIMPLIFY DEPLOYMENTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROJECT COMPLEXITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ! BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LAUNCH DAY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ” BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE ” :lemon: BRIEF START SCOPE RE-SCOPE FIXES CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES
START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify What even is the JAMstack? GET TO THE CHOPPER CDN iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WELL ACTUALLY… THIS JAMSTACK STUFF IS NOTHING NEW THAT VOICE ON THE INTERNET
netlify What even is the JAMstack? iJS, London, 2019 BAKE, DON’T FRY – Aaron Swartz @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ , 2002
netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth IMPACTS AND OPPORTUNITIES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SECURITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A GREATLY REDUCED SURFACE AREA
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FAR FEWER MOVING PARTS TO ATTACK
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YOUR-DOMAIN.COM/WP-ADMIN
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PERFORMANCE & SCALE
netlify What even is the JAMstack? c i m a n y d c i t a st iJS, London, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEVELOPER EXPERIENCE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEPLOYMENT CONFIDENCE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A JAMSTACK SITE CAN MORE EASILY HAVE IMMUTABLE, ATOMIC DEPLOYS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BEYOND STATIC
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth AUTOMATION REPEATABILITY / PREDICTABILITY / ACCOUNTABILITY / AGILITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth REPLICATION REPEATABILITY / PREDICTABILITY / CONFIDENCE / VERSION CONTROL
netlify What even is the JAMstack? iJS, London, 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth GIT-BASED DEPLOYMENTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CI/CD + HOSTING LOCAL CDN STATIC SERVER BUILD GIT BUILD
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DATA SOURCES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CONTENT APIS CI/CD + HOSTING LOCAL CDN STATIC SERVER BUILD GIT BUILD
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DEPLOYING WITH LOW FRICTION n i s lt u s e r HIGH CONFIDENCE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A RIDICULOUS AUTOMATION EXAMPLE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify What even is the JAMstack? WEBSTASK.IO iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? WEBSTASK.IO iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ( DON’T DO THIS )
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth EXAMPLES AND RESULTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC
netlify What even is the JAMstack? iJS, London, 2019 VUEJS.ORG REACTJS.ORG @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC
netlify What even is the JAMstack? iJS, London, 2019 SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WE HAD SOME CACHING ISSUES… WITH PROBABLY EVERY SINGLE WORDPRESS CACHING PLUGIN OUT THERE VITALY FRIEDMAN
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PLATFORMS from 5 to 1 https://www.netlify.com/case-studies/smashing/
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SMASHINGMAGAZINE.COM TIME TO FIRST LOAD m o r f to 800MS 80MS https://www.netlify.com/case-studies/smashing/
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth proxx
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROXX.APP PAYLOAD TO INTERACTIVE 25KB https://web.dev/proxx-announce/
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PROXX.APP TIME TO INTERACTIVE r e d un 5 SECONDS https://web.dev/proxx-announce/
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAVASCRIPT
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth JAMSTACK SITES DON’T HAVE TO DEPEND ON JAVASCRIPT A COMMON MISCONCEPTION
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
<body id=”app”>!</body>netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SHIP LESS JAVASCRIPT ALEX RUSSELL
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SOMETHING, SOMETHING POWER, SOMETHING, SOMETHING RESPONSIBILITY VARIOUS MARVEL CHARACTERS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PRERENDING TO REMOVE THE NEED FOR AN ORIGIN SERVER PROGRESSIVE ENHANCEMENT TO ENRICH THE EXPERIENCE WITH JAVASCRIPT AND SERVICES VIA APIS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth AUGMENTING JAMSTACK SITES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER MANY OF US, SOMETIMES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SERVERLESS TO THE RESCUE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FUNCTIONS AS A SERVICE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FUNCTIONS AS A SERVICE ENABLE A MICROSERVICES ARCHITECTURE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth LOWERING THE OVERHEAD OF DEPLOYING / MAINTAINING / MANAGING / SECURING OUR CODE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth exports.handler = (event, context, callback) !=> { callback(null, { statusCode: 200, body: ‘Hello UpFront!’ }) }
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SHIFT THE BURDEN SOFTWARE AND PATCHES OPERATING SYSTEM NETWORK PHYSICAL / VIRTUAL SCALING
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BY BREAKING THE MONOLITH APART, WE CAN ENJOY BOUGHT OR BUILT SPECIALIST SERVICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth ONE JOB
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth YOU HAD ONE JOB
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth EVENTS, WEBHOOKS, MICROSERVICES, AND APIS PROVIDE GLUE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SERVICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BOUGHT SERVICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth CMS ASSETS COMMERCE IDENTITY CONTENTFUL SANITY GRAPHCMS CLOUDINARY STRIPE SNIPCART AUTH0 OAUTH
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BUT WHAT OF THE RISK?
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth the DREAM CRUSHER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth VENDORS PROVIDING A SINGLE SERVICE DEPEND ON ITS SUCCESS MORE THAN YOU DO
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth TECHNICAL AND SERVICE LEVEL CONTRACTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth BOUGHT BUILT SERVICES
netlify What even is the JAMstack? CMS iJS, London, 2019 DAMS @philhawksworth COMMERCE IDENTITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth SMALLER SURFACES ARE EASIER TO REASON ABOUT, AND CREATE GREATER AGILITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth GREATER FOCUS PROVIDES A MORE OBVIOUS PATH TO MVP
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth A NOTE ABOUT MVP
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I WOULDN’T USE A MINIMUM VIABLE PARACHUTE A SPEAKER AT A CONFERENCE ONCE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth I FUCKING WOULD ME, IMAGINING A SITUATION WHEN I’D NEED A PARACHUTE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth MVP IS NOT CHOOSING A WEAK PRODUCT OVER GOOD PRODUCT
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth MVP IS CHOOSING TO HAVE SOMETHING NOW AND SOMETHING BETTER LATER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WEBHOOKS AND SERVERLESS AND AUTOMATION (OH MY!)
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth FINDTHAT.AT/COMMENTS https://jamstack-comments.netlify.com JAMSTACK-COMMENTS.NETLIFY.COM ZERO JAVASCRIPT DEPENDENCIES COMMENTS AS PAGE CONTENT NOTIFICATIONS AND MODERATION VIA SLACK
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth WHAT IS THE JAMSTACK? THE QUESTION WE STARTED WITH
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth e r a s e it s k c sta jam RENDERED IN ADVANCE NOT DEPENDENT ON AN ORIGIN PROGRESSIVELY ENHANCED IN THE BROWSER WITH JAVASCRIPT
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth DO WE NEED IT? THE QUESTION WE STARTED WITH
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth s g n i r b k c a t s m ja REDUCED INFRASTRUCTURE COSTS IMPROVED SECURITY, PERFORMANCE, SCALABILITY PROJECT LIFECYCLE CONFIDENCE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth STATIC SITE GENERATORS staticgen.com NETLIFY STATIC SET YOUR WATCH - FRICTION FREE DEPLOYMENTS www.netlify.com https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/ ONE-CLICK TEMPLATES templates.netlify.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth PHIL’S OWN JAMSTACK SITE hawksworx.com HEADLESS / DECOUPLED CMS STATIC ABOUT THE JAMSTACK / COMMUNITY headlesscms.org jamstack.org THE NEW DYNAMIC www.thenewdynamic.org/
netlify What even is the JAMstack? iJS, London, 2019 FINDTHAT.AT/CONF https://jamstackconf.com @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth N O D N O L Y L U J 0 1 9 FINDTHAT.AT/CONF https://jamstackconf.com
THANKS FINDTHAT.AT/JAMSTACK @PHILHAWKSWORTH
Do we really need this JAMstack thing? And what even is it?
In this session, we’ll demystify the buzzwordy term, and explore how the approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security.
We’ll see how the JAMstack is placing more power, more confidence, and more capabilities in the hands of designers, authors and front-end developers.
And we’ll show how serverless functions can augment this stack to let us rapidly build interfaces and APIs to power sites that we’d be brave enough to share with the world.
