Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
DO WE REALLY NEED THIS JAMSTACK THING?
PHIL HAWKSWORTH
AND WHAT EVEN IS IT?
What even is the JAMstack? iJS, London, 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
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
jamstackJAVASCRIPT / API / MARKUP
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
WHAT DOES THAT EVEN
MEAN?
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DEFINITION / UNDERSTANDING IMPACT / OPPORTUNITIES TOOLS / SERVICES EXAMPLES / RESULTS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
ISN'T THIS JUST A FANCY NEW NAME FOR
STATIC SITES?REASONABLE VOICES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
PHIL HAWKSWORTH@DEVELOPER EXPERIENCE, NETLIFY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
ISN'T THIS JUST A FANCY NEW NAME FOR
STATIC SITES?REASONABLE VOICES
SOME DEFINITIONS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC/ˈstatɪk/lacking in movement, action, or change, especially in an undesirable or uninteresting way.
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATICorEXPERIENCE?
ARCHITECTURE?
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATICVIRTUE
as a
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC DYNAMICvs
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CDN LOAD BALANCER WEB SERVERS DB SERVERSdynamic
static
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC
CAPABLE OF BEING SERVED DIRECTLY FROM A CDN
means
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATIC
AN OPPORTUNITY TOREDUCE COMPLEXITY
means
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATICVIRTUE
as a
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SO......REASONABLE VOICES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
ISN'T THIS JUST A FANCY NEW NAME FOR
STATIC SITES?REASONABLE VOICES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
LET'S TALK STACKS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
LAMP
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
APACHE
OPERATING SYSTEM
DATA ACCESS
PREPROCESSING
HTTP ROUTING AND SERVING
WEB SERVER
PHP
MYSQL
LINUX
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
JAM
CDNSTATIC SERVER
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DATA ACCESS
RUNTIME
HTTP ROUTING AND SERVING
BROWSER
JAVASCRIPT
APIs
MARKUP
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
jamstackPRE-RENDERED SERVED STATICALLY PROGRESSIVELY ENHANCED
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
APACHE
WEB SERVER
PHP
MYSQL
LINUX
APIs
BROWSER
JAVASCRIPT
MARKUP
WITH JAMSTACKTHE STACK HAS MOVED UP A LEVEL
TO THE BROWSER
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SIMPLIFY DEPLOYMENTS
this can
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
PROJECT COMPLEXITY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
THE PERFECT PROJECT TIMELINE
BRIEF AWARDSLAUNCHSTART
SCOPE
RE-SCOPE CLIENTREVIEW
FINAL SIGN OFF
FIXES
“ ”
!
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
LAUNCH DAY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
“ ”
"
THE PERFECT PROJECT TIMELINE
BRIEF AWARDSLAUNCHSTART
SCOPE
RE-SCOPE CLIENTREVIEW
FINAL SIGN OFF
FIXES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
THE PERFECT PROJECT TIMELINE
BRIEF AWARDSLAUNCHSTART
SCOPE
RE-SCOPE CLIENTREVIEW
FINAL SIGN OFF
FIXES
“ ”
:lemon: "
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
“ ”
#
THE PERFECT PROJECT TIMELINE
BRIEF AWARDSLAUNCHSTART
SCOPE
RE-SCOPE CLIENTREVIEW
FINAL SIGN OFF
FIXES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CDN LOAD BALANCER WEB SERVERS DB SERVERSdynamic
static
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
GET TO THE CHOPPER CDN
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
WELL ACTUALLY...THIS JAMSTACK STUFF
IS NOTHING NEWTHAT VOICE ON THE INTERNET
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
BAKE, DON’T FRY
– Aaron Swartz
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER,
POSTGRES AND ORACLE INSTALLS
AARON SWARTZ, 2002
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CDN LOAD BALANCER WEB SERVERS DB SERVERSdynamic
static
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
HOSTING
CDN
LOCALLOCAL
BUILDSTATIC SERVER
CONTENT TEMPLATES
DATA
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
IMPACTS AND
OPPORTUNITIES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SECURITY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
A GREATLY REDUCED SURFACE AREA
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
FAR FEWER MOVING PARTS
TO ATTACK
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
YOUR-DOMAIN.COM/WP-ADMIN
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
PERFORMANCE & SCALE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CDN LOAD BALANCER WEB SERVERS DB SERVERSdynamic
static
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DEVELOPER EXPERIENCE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DEPLOYMENT CONFIDENCE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
A JAMSTACK SITE CAN MORE EASILY HAVE
IMMUTABLE, ATOMIC DEPLOYS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
BEYOND STATIC
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AUTOMATIONREPEATABILITY / PREDICTABILITY / ACCOUNTABILITY / AGILITY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
REPLICATIONREPEATABILITY / PREDICTABILITY / CONFIDENCE / VERSION CONTROL
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
HOSTING
CDN
LOCALLOCAL
BUILDSTATIC SERVER
CONTENT TEMPLATES
DATA
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
GIT-BASED DEPLOYMENTS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CI/CD + HOSTING
BUILDCDN
LOCAL
BUILDSTATIC SERVER
GIT
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DATA SOURCES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CI/CD + HOSTING
BUILDCDN
LOCAL
BUILDSTATIC SERVER
GIT
CONTENT APIS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DEPLOYING WITHLOW FRICTION
results in HIGH CONFIDENCE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
A RIDICULOUS AUTOMATION
EXAMPLE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/TIMEhttps://setyourwatchby.netlify.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/TIMEhttps://setyourwatchby.netlify.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/TIMEhttps://setyourwatchby.netlify.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/TIMEhttps://setyourwatchby.netlify.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
WEBSTASK.IO
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
WEBSTASK.IO
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
( DON'T DO THIS )
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
EXAMPLES AND
RESULTS
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
STATIC
REACTJS.ORGREACTJS.ORG
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
REACTJS.ORGVUEJS.ORG
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
STATIC
REACTJS.ORGYARNPKG.COM
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
SMASHINGMAGAZINE.COMSMASHINGMAGAZINE.COM
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
WE HAD SOME CACHING ISSUES... WITH PROBABLY EVERY SINGLE WORDPRESS CACHING PLUGIN
OUT THERE
VITALY FRIEDMAN
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
5from
1to
https://www.netlify.com/case-studies/smashing/
PLATFORMS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
TIME TO FIRST LOADSMASHINGMAGAZINE.COM
800MSfrom
80MSto
https://www.netlify.com/case-studies/smashing/
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
proxx
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
PAYLOAD TO INTERACTIVEPROXX.APP
25KBhttps://web.dev/proxx-announce/
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
TIME TO INTERACTIVEPROXX.APP
https://web.dev/proxx-announce/
5 SECONDSunder
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
JAVASCRIPT
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
JAMSTACK SITES DON'T HAVE TO DEPEND ON
JAVASCRIPTA COMMON MISCONCEPTION
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
<body id="app">!</body>
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SHIP LESS JAVASCRIPTALEX RUSSELL
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
VARIOUS MARVEL CHARACTERS
SOMETHING, SOMETHING POWER, SOMETHING, SOMETHING RESPONSIBILITY
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
PROGRESSIVEENHANCEMENT
TO ENRICH THE EXPERIENCE WITH JAVASCRIPT AND SERVICES VIA APIS
PRERENDING TO REMOVE THE NEED FOR AN ORIGIN SERVER
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AUGMENTING JAMSTACK SITES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC
ON A SERVERMANY OF US, SOMETIMES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SERVERLESS TO THE RESCUE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
FUNCTIONS AS A SERVICE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FUNCTIONS AS A SERVICE ENABLE A MICROSERVICES
ARCHITECTURE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
LOWERING THE OVERHEAD OF DEPLOYING / MAINTAINING /
MANAGING / SECURING OUR CODE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
exports.handler = (event, context, callback) !=> {
callback(null, { statusCode: 200, body: 'Hello UpFront!' })
}
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SHIFT THE BURDEN
SOFTWARE AND PATCHES OPERATING SYSTEM
NETWORK PHYSICAL / VIRTUAL SCALING
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
BY BREAKING THE MONOLITH APART,
WE CAN ENJOY BOUGHT OR BUILT
SPECIALIST SERVICES
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
ONE JOB
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
YOU HAD ONE JOB
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
EVENTS, WEBHOOKS, MICROSERVICES, AND APIS
PROVIDE GLUE
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SERVICES
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SERVICESBOUGHT
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CMS ASSETS COMMERCE IDENTITY
CONTENTFUL SANITY
GRAPHCMS
CLOUDINARY STRIPE SNIPCART
AUTH0 OAUTH
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
BUT WHAT OF THE RISK?
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AFTER DINNER SPEAKERCRUSHERDREAM
the
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AFTER DINNER SPEAKER
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AFTER DINNER SPEAKER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
AFTER DINNER SPEAKER
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
VENDORS PROVIDING A SINGLE SERVICE
DEPEND ON ITS SUCCESS MORE THAN YOU DO
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
TECHNICAL AND SERVICE LEVEL
CONTRACTS
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
SERVICESBOUGHTBUILT
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
CMS DAMS COMMERCE IDENTITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
SMALLER SURFACES ARE EASIER TO REASON ABOUT,
AND CREATE GREATER AGILITY
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
GREATER FOCUS PROVIDES A MORE OBVIOUS PATH TO MVP
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
A NOTE ABOUT MVP
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
A SPEAKER AT A CONFERENCE ONCE
I WOULDN'T USE A MINIMUM VIABLE PARACHUTE
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
ME, IMAGINING A SITUATION WHEN I'D NEED A PARACHUTE
I FUCKING WOULD
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
CHOOSING A WEAK PRODUCT
OVER GOOD PRODUCT
MVP IS NOT
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
MVP ISCHOOSING TO HAVE SOMETHING NOW
AND SOMETHING BETTER LATER
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
WEBHOOKS AND SERVERLESS AND
AUTOMATION(OH MY!)
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
JAMSTACK-COMMENTS.NETLIFY.COM
FINDTHAT.AT/COMMENTShttps://jamstack-comments.netlify.com
ZERO JAVASCRIPT DEPENDENCIES
COMMENTS AS PAGE CONTENT
NOTIFICATIONS AND MODERATION VIA SLACK
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
WHAT IS THE JAMSTACK?THE QUESTION WE STARTED WITH
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
RENDERED IN ADVANCE NOT DEPENDENT ON AN ORIGIN
PROGRESSIVELY ENHANCED
IN THE BROWSER WITH JAVASCRIPT
jamstack sites are
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
DO WE NEED IT?THE QUESTION WE STARTED WITH
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
REDUCED INFRASTRUCTURE COSTSIMPROVED SECURITY,
PERFORMANCE, SCALABILITY
PROJECT LIFECYCLE CONFIDENCE
jamstack brings
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATICSET YOUR WATCH - FRICTION FREE DEPLOYMENTS https://www.netlify.com/blog/2018/08/02/exploring-the-potential-of-friction-free-deployments/
STATIC SITE GENERATORS staticgen.com
NETLIFY www.netlify.com
ONE-CLICK TEMPLATEStemplates.netlify.com
What even is the JAMstack? iJS, London, 2019 @philhawksworthnetlify
STATICABOUT THE JAMSTACK / COMMUNITY jamstack.org
PHIL'S OWN JAMSTACK SITE hawksworx.com
HEADLESS / DECOUPLED CMS headlesscms.org
THE NEW DYNAMICwww.thenewdynamic.org/
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/CONFhttps://jamstackconf.com
netlify What even is the JAMstack? iJS, London, 2019 @philhawksworth
FINDTHAT.AT/CONFhttps://jamstackconf.com
LONDON 9-10 JULY
THANKS FINDTHAT.AT/JAMSTACK@PHILHAWKSWORTH