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

BRIEF

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