JAMSTACKPHIL HAWKSWORTH

GETTING STUCK IN TO

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

QUICKLYSAY

HELLO

BRIEFLY INTRODUCE CONCEPTS

HELPFULLYOUTLINE BENEFITS

SHAMBOLICALLY SHOW SOME

DEMOS

HAPPILY ANSWER

QUESTIONS

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

PHIL HAWKSWORTH@DEVELOPER EXPERIENCE, NETLIFY

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

STACKS FOR DAYZMEAN / LAMP / MAMP / XAMP / ROR / WISA / MEAN / LAMP / MAMP / XAMP / ROR / WISA

MEAN / LAMP / MAMP / XAMP / ROR / WISA / MEAN / LAMP / MAMP / XAMP / ROR / WISA

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth

ISN'T JAMSTACK JUST ANOTHER WORD FOR STATIC SITES?SOME PEOPLE, WHO HAVE BEEN AROUND A WHILE

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

jamstackJAVASCRIPT / API / MARKUP

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

jamstackA modern architecture —

Create fast and secure sites and dynamic apps with JavaScript, APIs, and pre-rendered Markup, served without web servers

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

TRADITIONALJAMSTACK

vs

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

CDN LOAD BALANCER WEB SERVERS DB SERVERStraditional

jamstack

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

SIMPLIFYING

STACKthe

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

CDN LOAD BALANCER WEB SERVERS DB SERVERStraditional

jamstack

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

jamstack

DEPLOYMENT

BUILD

REQUEST TIME

BULD TIME

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

GET TO THE CHOPPER CDN

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

jamstackJAVASCRIPT API MARKUP/ /&&

you don't have to use ALL THREE

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

is it jamstack?

JEKYLL YAMLNO JSNO APIsGITHUB PAGES

GATSBY MARKDOWN GRAPHQL APIs JS HYDRATION AMAZON S3

HUGO MARKDOWNJS INTERACTIONSNO APIsGOOGLE CLOUD

NUXT JSONJS INTERACTIONSCOMMERCE APIsNETLIFY

yes yes yes yes

HAND-MADE PWAWEBPACK JWTBROWSER APIsAZUREyes

ORIGIN SERVER

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

JAMSTACK

CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

means

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

ENJOYS THE BENEFITS

SERVING STATIC ASSETSof

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

A GREATLY REDUCED SURFACE AREA

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

CDN LOAD BALANCER WEB SERVERS DB SERVERStraditional

jamstack

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

TRADITIONAL STACKS ADD STATIC LAYERS

IN ORDER TO IMPROVE PERFORMANCE

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

CACHING GALORE

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

CDN LOAD BALANCER WEB SERVERS DB SERVERStraditional

jamstack

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

TRADITIONAL STACKS ADD INFRASTRUCTURE

IN ORDER TO SCALE

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

CDN LOAD BALANCER WEB SERVERS DB SERVERStraditional

jamstack

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth

OK! WILL YOU PLEASE JUST SHOW US SOMETHING?

PROBABLY MANY OF YOU, BY NOW

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

JAMSTACK SITES USING NETLIFY

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth

STATIC

REACTJS.ORGREACTJS.ORG

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth

STATIC

REACTJS.ORGYARNPKG.COM

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth

REACTJS.ORGVUEJS.ORG

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth

SMASHINGMAGAZINE.COMDOCS.CITRIX.COM

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth

SMASHINGMAGAZINE.COMSMASHINGMAGAZINE.COM

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

5from

1to

https://www.netlify.com/case-studies/smashing/

PLATFORMS

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

WE HAD SOME CACHING ISSUES... WITH PROBABLY EVERY SINGLE WORDPRESS CACHING PLUGIN

OUT THERE

VITALY FRIEDMAN

JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworthnetlify

TIME TO FIRST LOADSMASHINGMAGAZINE.COM

800MSfrom

80MSto

https://www.netlify.com/case-studies/smashing/

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

OFFERS MANY POSSIBILITIES

AN EXPLOSION IN TOOLS AND SERVICES

thanks to

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

STATICVARIOUS RELATED RESOURCES FROM CHRIS COYIER https://serverless.css-tricks.com/

STATIC SITE GENERATORS staticgen.com

NETLIFY www.netlify.com

CITRIX PRESENTATION FROM JAMSTACKCONF NYCyoutube.com/watch?v=kvS5h5domf0

JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworthnetlify

STATICABOUT THE JAMSTACK / COMMUNITY jamstack.org

JAMSTACK CONFERENCE jamstackconf.com

HEADLESS / DECOUPLED CMS headlesscms.org

THE NEW DYNAMICwww.thenewdynamic.org/

THANKS@PHILHAWKSWORTH