A presentation at FreeCodeCamp - Jamstack course by Phil Hawksworth
INTRODUCTION TO JAMSTACK PHIL HAWKSWORTH
y n a m e r a e r the APPROACHES TO DELIVERING WEBSITES
ASK FOR STUFF
ASK FOR STUFF GET STUFF
ASK FOR STUFF DO STUFF GET STUFF
LOAD BALANCER WEB SERVERS DB SERVERS
CDN LOAD BALANCER WEB SERVERS DB SERVERS
IT GOT COMPLICATED
y l i k c u l but WE’VE BEEN LEARNING AND BUILDING NEW TOOLS
BROWSERS GOT MORE CAPABLE PROCESSES MATURED TOOLING IMPROVED
WHAT IS THE JAMSTACK?
s e o d t a h w k c a t s jam s e o d t a h w k c a t s jam STAND FOR? MEAN?
k c a t s m ja JAVASCRIPT / API / MARKUP
k c sta the layers of technology which deliver your web site or application
s e o d t a h w k c a t s jam s e o d t a h w k c a t s jam STAND FOR? MEAN?
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /
LAMPSTACK
APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER
APACHE PHP HTTP ROUTING AND SERVING PREPROCESSING MYSQL DATA ACCESS LINUX OPERATING SYSTEM WEB SERVER
JAMSTACK
APIs JAVASCRIPT DATA ACCESS RUNTIME MARKUP BROWSER STATIC SERVER / CDN HTTP ROUTING AND SERVING
k c a t s m ja PRE-RENDERED LEVERAGE THE BROWSER WITHOUT A WEBSERVER
APACHE PHP MYSQL LINUX WEB SERVER WITH JAMSTACK THE STACK HAS MOVED UP A LEVEL TO THE BROWSER APIs JAVASCRIPT MARKUP BROWSER
ASK FOR STUFF GET STUFF
BAKE, DON’T FRY – Aaron Swartz http://www.aaronsw.com/weblog/000404
r o f s e v i t o m PRE-RENDERING
DOING THE WORK NOW, SO YOUR SERVERS DON’T HAVE TO LATER
PUT DISTANCE BETWEEN THE COMPLEXITY AND THE USER
n a c s i th SIMPLIFY DEPLOYMENTS
l a n o i it d a r t CDN LOAD BALANCER WEB SERVERS DB SERVERS
l a n o i it d a r t CDN LOAD BALANCER WEB SERVERS DB SERVERS
k c a t s m ja CDN
r o F VERSION CONTROL EVERYTHING
JAMSTACK ADVANTAGES SECURITY PERFORMANCE SCALE
SECURITY
A GREATLY REDUCED SURFACE AREA
l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS
FAR FEWER MOVING PARTS TO ATTACK
PERFORMANCE
TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE
CACHING
l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS
SCALE
TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE
l a n o i it d a r t k c a t s m ja CDN LOAD BALANCER WEB SERVERS DB SERVERS
… t u b , k o
ASK FOR STUFF GET STUFF
y l i k c u l but WE’VE BEEN LEARNING AND BUILDING NEW TOOLS
s r e l b a en STATIC SITE GENERATORS TOOLING AN AUTOMATION BROWSER CAPABILITIES SERVICES AND THE API ECONOMY
wh 1. 2. 3. 4. 5. 6. 7. ? e k a m e w l l i w at SIMPLY A STATIC SITE (32:14) JAVASCRIPT TO RENDER CONTENT (40:40) TEMPLATING AND ABSTRACTION WITH A STATIC SITE GENERATOR (52:21) CONTENT SOURCED FROM AN API AT BUILD TIME (1:24:09) LOCALISED CONTENT RENDERED AT BUILD TIME, ROUTED AT THE CDN (2:02:17 CLIENT-SIDE RENDER OF TARGETED CONTENT WITH BROWSER AND CONTENT APIS (2:28:08) BONUS: HOW TO GRADUALLY INTRODUCE THE JAMSTACK TO YOUR EXISTING INFRA (3:19:50)
EXAMPLE NUMBER 1 - ALL STATIC FINDTHAT.AT / JAMSTACK / EX1
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
k c a t s m ja JAVASCRIPT / API / MARKUP
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
WAS THAT JAMSTACK? A QUICK SENSE CHECK
k c a t s m ja JAVASCRIPT / API / MARKUP
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye
EXAMPLE NUMBER 2 - ADDING JAVASCRIPT FINDTHAT.AT / JAMSTACK / EX2
k c a t s m ja JAVASCRIPT / API / MARKUP
RENDERING
CLIENT-SIDE RENDERING SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME)
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME)
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT SERVER-SIDE RENDERING (BUILD TIME)
BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT SERVER-SIDE RENDERING (BUILD TIME)
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED
WAS THAT JAMSTACK? A QUICK SENSE CHECK
k c a t s m ja JAVASCRIPT / API / MARKUP
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye
EXAMPLE NUMBER 3 - BUILDING WITH AN SSG FINDTHAT.AT / JAMSTACK / EX3
PREREQUISITES GIT INSTALLED (FREE) GITHUB ACCOUNT (FREE) NODEJS INSTALLED (FREE) NETLIFY ACCOUNT (FREE) NODEJS.ORG NETLIFY.COM GIT-SCM.COM GITHUB.COM
BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED
BUILD AUTOMATION a g n usi STATIC SITE GENERATOR
HOW TO CHOOSE? t h g i r e h t SSG
STATICGEN.COM
LANGUAGE WORKFLOW PERFORMANCE ARCHITECTURE OUTPUT CONTROL ADOPTION
OUR SSG FOR TODAY ELEVENTY 👋
WHY ELEVENTY? LOGICAL ARCHITECTURE FLEXIBLE TEMPLATING NOTHING YOU DON’T ASK FOR JAVASCRIPT ALL THE WAY DOWN
WAS THAT JAMSTACK? A QUICK SENSE CHECK
k c a t s m ja JAVASCRIPT / API / MARKUP
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye
EXAMPLE NUMBER 4 - BUILDING WITH DATA FROM AN API FINDTHAT.AT / JAMSTACK / EX4
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
k c a t s m ja JAVASCRIPT / API / MARKUP
PERSONALIZATION
BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE
s c i t sta s r o t a r e n e g ite APPLY STRUCTURED DATA TO TEMPLATES IN ORDER TO CREATE VIEWS AND ASSETS
BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
UNIVERSAL PERSONALIZED
UNIVERSAL LOCALIZED TARGETED PERSONALIZED
s r e l b a n e AUTOMATION TOOLS & SERVICES THE API ECONOMY
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
BROWSER WEBSERVER DATABASE MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE
BROWSER CDN WEBSERVER MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME BUILD / UPDATE DATABASE
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
EXAMPLE NUMBER 5 - GENERATING LOCALIZED CONTENT FINDTHAT.AT / JAMSTACK / EX5
UNIVERSAL LOCALIZED TARGETED PERSONALIZED
WAS THAT JAMSTACK? A QUICK SENSE CHECK
k c a t s m ja JAVASCRIPT / API / MARKUP
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED
DATA SOURCE BROWSER CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
PROGRESSIVE ENHANCEMENT 1. DECIDE ON WHAT IS CRITICAL TO THE EXPERIENCE 2. DELIVER AS MUCH AS POSSIBLE USING A LITTLE AS POSSIBLE 3. DETECT SUPPORTED FEATURES AND ENHANCE WHERE POSSIBLE
EXAMPLE NUMBER 6 - CLIENT-SIDE API CALLS FINDTHAT.AT / JAMSTACK / EX6
DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
CLIENT-SIDE RENDERING JAVASCRIPT IN THE BROWSER MANIPULATES THE DOM SERVER-SIDE RENDERING (REQUEST TIME) SERVER-SIDE RENDERING (BUILD TIME) GENERATE MARKUP ON REQUEST IN THE SERVER AND TRANSMIT TO THE CLIENT GENERATE MARKUP AT BUILD TIME SO THAT IT IS READY TO TRANSMIT TO THE CLIENT WHEN NEEDED
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
WAS THAT JAMSTACK? A QUICK SENSE CHECK ! p ye
TIME a r o f RECAP
? e k a m e w d i d t a wh 1. 2. 3. 4. 5. 6. SIMPLY A STATIC SITE JAVASCRIPT TO RENDER CONTENT TEMPLATING AND ABSTRACTION WITH A STATIC SITE GENERATOR CONTENT SOURCED FROM AN API AT BUILD TIME LOCALISED CONTENT RENDERED AT BUILD TIME, ROUTED AT THE CDN CLIENT-SIDE RENDER OF TARGETED CONTENT WITH BROWSER AND CONTENT APIS
k c a t s m ja JAVASCRIPT / API / MARKUP
k c a t s m a j Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers.
EASIER TO REASON ABOUT
DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
s r e l b a n e AUTOMATION TOOLS & SERVICES THE API ECONOMY
THE GROWING ECOSYSTEM OF TOOLS AND SERVICES MOVES US BEYOND STATIC
https://medium.com/memory-leak/the-jamstack-its-pretty-sweet-e0834e4e6bb7
… t bu HOW DO WE GET THERE?
LET’S NOT TRY TO BOIL THE OCEAN https://unsplash.com/photos/0_UvKStn3iQ
THE FIRST STEP NEED NOT BE A GIANT LEAP https://unsplash.com/photos/wKlqqfNTLsI
DATA SOURCES BROWSER API CDN MARKUP JAVASCRIPT APIS REQUEST TIME BUILD TIME API BUILD
RESOURCES FINDTHAT.AT / JAMSTACK / EX1 FINDTHAT.AT / JAMSTACK / EX2 FINDTHAT.AT / JAMSTACK / EX3 FINDTHAT.AT / JAMSTACK / EX4 FINDTHAT.AT / JAMSTACK / EX5 FINDTHAT.AT / JAMSTACK / EX6 FINDTHAT.AT / JAMSTACK / FCC FINDTHAT.AT / JAMSTACK / BOOK FINDTHAT.AT / JAMSTACK / SLACK
FINDTHAT.AT / JAMSTACK / FCC THANKS @PHILHAWKSWORTH
The Jamstack allows people to create websites that are simpler, faster, and more secure than other methods of creating websites. Sites created with the JAMstack are delivered by pre-rendering files that are served directly from a CDN, removing the requirement to manage or run web servers.
This 3.5 hour online presentation explores concepts and walks through practical examples.
A full breakdown of timings for sections of the accompanying video is available.
