A presentation at Pixel Pioneers in in Bristol, UK by Phil Hawksworth
JAMSTACK SILLY NAME SERIOUS BUSINESS PHIL HAWKSWORTH
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002 http://www.aaronsw.com/weblog/000404
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth BAKE, DON’T FRY – Aaron Swartz http://www.aaronsw.com/weblog/000404
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PRE-RENDERING an h t r e h t ra RENDERING ON DEMAND
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth by RENDERING n a e m we GENERATING MARKUP
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SIMPLIFYING e h t STACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth DEVELOPMENT PROJECTS e r a COMPLEX ENOUGH
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ! BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth LAUNCH DAY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth LAUNCH DAY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES ” BRIEF START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SIMPLIFYING e h t STACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth WHAT DOES THAT EVEN MEAN?
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth @ PHIL HAWKSWORTH DEVELOPER EXPERIENCE, NETLIFY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth DEFINITION / DESCRIPTION IMPACT / IMPLICATIONS TOOLS / SERVICES RESOURCES / FIRST STEPS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SIMPLIFYING e h t STACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STACKS FOR DAYZ / MEAN / LAMP / MAMP / XAMP / ROR / WISA MEAN / LAMP / MAMP / XAMP / ROR / WISA / M
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m a j A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and pre-rendered Markup, served without web servers
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TRADITIONAL vs JAMSTACK
netlify JAMstack - Serious Business l a n o i it d a r t Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAMSTACK s n a e m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAMSTACK s r e f f o AN OPPORTUNITY TO REDUCE COMPLEXITY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth ENJOYS THE BENEFITS of SERVING STATIC ASSETS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth ISN’T THIS JUST A FANCY NEW NAME FOR STATIC SITES? REASONABLE VOICES
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC EXPERIENCE ? or ARCHITECTURE ?
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC VIRTUE a as
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth LET’S TALK STACKS
netlify JAMstack - Serious Business k c sta Pixel Pioneers, June 2019 @philhawksworth the layers of technology which deliver your web site or application
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth LAMP STACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAM STACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth APIs JAVASCRIPT MARKUP DATA ACCESS RUNTIME BROWSER CDN HTTP ROUTING AND SERVING
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja PRE-RENDERED SERVED STATICALLY PROGRESSIVELY ENHANCED
netlify JAMstack - Serious Business APACHE PHP MYSQL LINUX WEB SERVER Pixel Pioneers, June 2019 @philhawksworth WITH JAMSTACK THE STACK HAS MOVED UP A LEVEL TO THE BROWSER APIs JAVASCRIPT MARKUP BROWSER
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth n a c s i h t SIMPLIFY DEPLOYMENTS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth THE PERFECT PROJECT TIMELINE FIXES
START SCOPE RE-SCOPE CLIENT REVIEW LAUNCH “ FINAL” SIGN OFF AWARDS
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth WE’VE BECOME VERY GOOD AT SERVING STATIC FILES
netlify JAMstack - Serious Business GET TO THE CHOPPER CDN Pixel Pioneers, June 2019 @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 HOSTING LOCAL STATIC SERVER BUILD CONTENT TEMPLATES DATA @philhawksworth CDN
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth LET’S ADDRESS A COMMON MISCONCEPTION
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT API MARKUP & &
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT API MARKUP & & E E R H T L L A e s u o t e v a h ‘t n o d u yo
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth ? k c a t s m a j is it JEKYLL YAML NO JS NO APIs GITHUB PAGES yes GATSBY MARKDOWN GRAPHQL APIs JS HYDRATION AMAZON S3 yes HUGO MARKDOWN JS INTERACTIONS NO APIs GOOGLE CLOUD yes ORIGIN SERVER NUXT JSON JS INTERACTIONS COMMERCE APIs NETLIFY yes HAND-MADE PWA WEBPACK JWT BROWSER APIs AZURE yes
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAMSTACK s n a e m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth IMPACTS AND IMPLICATIONS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SECURITY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth A GREATLY REDUCED SURFACE AREA
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth FAR FEWER MOVING PARTS TO ATTACK
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth YOUR-DOMAIN.COM/WP-ADMIN
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME NO MOVING PARTS DEPLOYMENT BUILD MOVING PARTS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PERFORMANCE
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth CACHING GALORE
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SCALE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Pixel Pioneers, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth DEVELOPER EXPERIENCE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD d e in f e d l l e w A e c a p s m e l b o pr o t m o d e e r f h wit make choices
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth FREEDOM d an CHOICE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth FREEDOM FROM THE TECHNICAL CONSTRAINTS OF EXOTIC PLATFORMS d n a CHOICE OF TOOLS AND APPROACHES WHICH BEST FIT THE TEAM AND THE PROJECT
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth CONFIDENCE s t n e m y o l p e d r u o in y
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth A JAMSTACK SITE CAN MORE EASILY HAVE IMMUTABLE, ATOMIC DEPLOYS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth AN EXAMPLE OF A DYNAMIC WEB APP?
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 WHAT JUST HAPPENED?! @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth APIS AND SERVICES
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth BOUGHT SERVICES
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth CMS ASSETS COMMERCE IDENTITY CONTENTFUL SANITY GRAPHCMS CLOUDINARY STRIPE SNIPCART AUTH0 OAUTH
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth CMS ASSETS COMMERCE IDENTITY CONTENTFUL SANITY GRAPHCMS CLOUDINARY STRIPE SNIPCART AUTH0 OAUTH
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth BUILT SERVICES
netlify JAMstack - Serious Business CMS Pixel Pioneers, June 2019 DAMS @philhawksworth COMMERCE IDENTITY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 CMS @philhawksworth DAMS COMMERCE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER MANY OF US, SOMETIMES
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SERVERLESS TO THE RESCUE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth FUNCTIONS AS A SERVICE
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth EXAMPLES AND RESULTS
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 VUEJS.ORG REACTJS.ORG @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 DOCS.CITRIX.COM SMASHINGMAGAZINE.COM @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TURNAROUND TIME FOR UPDATES WENT FROM WEEKS TO MINUTES BETH POLLOCK, CITRIX youtube.com/watch?v=kvS5h5domf0
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth WE ESTIMATE OUR ANNUAL COST SAVINGS TO RUN THE SITE PROPERLY IS 65% BETH POLLOCK, CITRIX youtube.com/watch?v=kvS5h5domf0
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM @philhawksworth
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PLATFORMS from 5 to 1 https://www.netlify.com/case-studies/smashing/
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth WE HAD SOME CACHING ISSUES… WITH PROBABLY EVERY SINGLE WORDPRESS CACHING PLUGIN OUT THERE VITALY FRIEDMAN
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth SMASHINGMAGAZINE.COM TIME TO FIRST LOAD m o r f to 800MS 80MS https://www.netlify.com/case-studies/smashing/
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth proxx
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PROXX.APP PAYLOAD TO INTERACTIVE 25KB https://web.dev/proxx-announce/
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PROXX.APP TIME TO INTERACTIVE r e d un 5 SECONDS https://web.dev/proxx-announce/
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth VARIETY
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth WHAT IS THE JAMSTACK? THE QUESTION WE STARTED WITH
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k RENDERED IN ADVANCE c a t s jam e r a s e it s NOT DEPENDENT ON AN ORIGIN PROGRESSIVELY ENHANCED IN THE BROWSER WITH JAVASCRIPT
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth k c a t s m a j A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and pre-rendered Markup, served without web servers
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth STATIC SITE GENERATORS staticgen.com NETLIFY STATIC VARIOUS RELATED RESOURCES FROM CHRIS COYIER www.netlify.com https://serverless.css-tricks.com/ CITRIX PRESENTATION FROM JAMSTACKCONF NYC youtube.com/watch?v=kvS5h5domf0
netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAMSTACK CONFERENCE jamstackconf.com HEADLESS / DECOUPLED CMS STATIC ABOUT THE JAMSTACK / COMMUNITY headlesscms.org jamstack.org THE NEW DYNAMIC www.thenewdynamic.org/
THANKS @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.
