Getting stuck in to Jamstack

A presentation at JAMstack meetup in June 2019 in Toronto, ON, Canada by Phil Hawksworth

Slide 1

Slide 1

GETTING STUCK IN TO JAMSTACK PHIL HAWKSWORTH

Slide 2

Slide 2

netlify QUICKLY SAY HELLO JAMstack - Serious Business Smashing Conference, Toronto, June 2019 BRIEFLY INTRODUCE CONCEPTS @philhawksworth HELPFULLY OUTLINE BENEFITS SHAMBOLICALLY SHOW SOME DEMOS HAPPILY ANSWER QUESTIONS

Slide 3

Slide 3

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth @ PHIL HAWKSWORTH DEVELOPER EXPERIENCE, NETLIFY

Slide 4

Slide 4

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 /

Slide 5

Slide 5

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

Slide 6

Slide 6

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP

Slide 7

Slide 7

netlify JAMstack - Serious Business Smashing Conference, Toronto, 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

Slide 8

Slide 8

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

Slide 9

Slide 9

netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Smashing Conference, Toronto, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 10

Slide 10

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth SIMPLIFYING e h t STACK

Slide 11

Slide 11

netlify JAMstack - Serious Business l a n o i it d a r t k c a t s m ja Smashing Conference, Toronto, June 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS

Slide 12

Slide 12

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD

Slide 13

Slide 13

netlify JAMstack - Serious Business GET TO THE CHOPPER CDN Smashing Conference, Toronto, June 2019 @philhawksworth

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth JAMSTACK s n a e m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN

Slide 17

Slide 17

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth ENJOYS THE BENEFITS of SERVING STATIC ASSETS

Slide 18

Slide 18

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth A GREATLY REDUCED SURFACE AREA

Slide 19

Slide 19

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

Slide 20

Slide 20

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE

Slide 24

Slide 24

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

Slide 25

Slide 25

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth OK! WILL YOU PLEASE JUST SHOW US SOMETHING? PROBABLY MANY OF YOU, BY NOW

Slide 26

Slide 26

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth JAMSTACK SITES USING NETLIFY

Slide 27

Slide 27

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC

Slide 28

Slide 28

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC

Slide 29

Slide 29

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 VUEJS.ORG REACTJS.ORG @philhawksworth

Slide 30

Slide 30

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 DOCS.CITRIX.COM SMASHINGMAGAZINE.COM @philhawksworth

Slide 31

Slide 31

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

Slide 32

Slide 32

netlify JAMstack - Serious Business Pixel Pioneers, June 2019 @philhawksworth PLATFORMS from 5 to 1 https://www.netlify.com/case-studies/smashing/

Slide 33

Slide 33

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

Slide 34

Slide 34

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/

Slide 35

Slide 35

netlify JAMstack - Serious Business Smashing Conference, Toronto, June 2019 @philhawksworth OFFERS MANY POSSIBILITIES o t s k n a th AN EXPLOSION IN TOOLS AND SERVICES

Slide 36

Slide 36

netlify JAMstack - Serious Business Smashing Conference, Toronto, 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

Slide 37

Slide 37

netlify JAMstack - Serious Business Smashing Conference, Toronto, 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/

Slide 38

Slide 38

THANKS @PHILHAWKSWORTH