A presentation at Smashing Conference in in San Francisco, CA, USA by Phil Hawksworth
JAMSTACK AND NETLIFY WORKSHOP PHIL HAWKSWORTH
HELLO
@ PHIL HAWKSWORTH
STATIC / PRE-RENDERED / JAMSTACK
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
k c a t s m ja JAVASCRIPT / API / MARKUP
STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /
! h h h h h s I SOMETIMES BUILT LAMP STACK SITES ON A MAC, AND I DIDN’T ALWAYS USE MYSQL
STATIC
STATIC
STATIC
STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.
STATIC /ˈstatɪk/ lacking in movement, action, or change, especially in an undesirable or uninteresting way.
STATIC ARCHITECTURE? or RESULT?
STATIC ARCHITECTURE? or EXPERIENCE?
STATIC VIRTUE a as
STATIC / DYNAMIC STATIC
c i m a n y d c i t a st CDN LOAD BALANCER WEB SERVERS DB SERVERS
STATIC s n ea m CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
STATIC s n ea m NO WORK TO BE DONE AT REQUEST TIME
STATIC s n ea m A FAR SMALLER ATTACK SURFACE TO SECURE AND PROTECT
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
GET TO THE CHOPPER CDN
NETLIFY LOCAL STATIC SERVER BUILD CDN
BUILD AUTOMATION TESTS / CONTENT GATHERING / SITE GENERATION / OPTIMSATION / DEPLOY
NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD
DATA / CONTENT SOURCES
CONTENT APIS NETLIFY LOCAL CDN STATIC SERVER BUILD GIT BUILD
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
A BIT OF A TOUR THE NETLIFY ADMIN CONTINUOUS INTEGRATION ENVIRONMENT VARIABLES DEPLOY HOOKS NOTIFICATIONS DEPLOYS AND ROLLBACKS PROVISION UNLIMITED ENVIRONMENTS PREVIEW BUILDS FORM HANDLING A/B TESTING
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
LOW FRICTION
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
SETYOURWATCHBY.NETLIFY.COM
WEBSTASK.IO
WEBSTASK.IO
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
COMMENTS ENGINE DEMO or NETLIFY DEV?
FINDTHAT.AT / DEV
POSSIBILITIES
REACTJS.ORG STATIC
VUEJS.ORG STATIC
YARNPKG.COM STATIC
BUT ALSO
SMASHINGMAGAZINE.COM STATIC
STATIC SITE GENERATORS staticgen.com NETLIFY www.netlify.com NETLIFY DEV www.netlify.com/products/dev SET YOUR WATCH - FRICTION FREE DEPLOYMENTS https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/ ONE-CLICK TEMPLATES templates.netlify.com
THE PLAN SAY HELLO ✔ WHAT DOES STATIC MEAN? THE NETLIFY APPROACH A BIT OF A TOUR A RIDICULOUS EXAMPLE AN INTERESTING EXAMPLE QUESTIONS
THANKS QUESTIONS? @PHILHAWKSWORTH
Maybe you’ve heard this buzzword and thought - “Yawn! That’s just about static sites.” There’s more to it. We should look deeper.
This show-and-tell session will look at the rising tide of static site generators, and the tooling and services that combine to create a compelling reason to consider a JAMstack architecture for your next project.
We’ll talk a little about some of the characteristics of a JAMstack architecture, like improved security and performance. Like cheaper, more scalable hosting. And like more rapid and modern development workflows. And we’ll dig more deeply into the tooling Netlify offers to help bring a wide array of tools and services together to create dynamic and engaging experiences.
Key takeaway: A considered approach to deciding if a static site architecture could be right for you, and insights into more advanced capabilities of Netlify in the service of a JAMstack architecture for your sites.
