A presentation at Nebraska JavaScript in in Nebraska, USA by Phil Hawksworth
ARE YOU BEING SERVERED? EXPLORING A SERVERLESS WEB PHIL HAWKSWORTH
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth WIRELESS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SERVERLESS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FOCUSSING ON THE THINGS YOU CARE ABOUT
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FOCUSSING ON THE THINGS YOU o t e v ha CARE ABOUT
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth h it w m e l b o r p e h t DOING BIG PROJECTS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth CONSTRAINTS AND COMPLEXITY AND INFRASTRUCTURE ! y m oh
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth UNDERSTANDING CONSTRAINTS IS CRITICAL TO WRITING GOOD SOFTWARE JEREMY WAGNER
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth A FORRRRRRRM, SHOULD ALWAYS USE A FORRRRRRRRM TAG!!!!!!1!! JEREMY WAGNER
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth WHERE TO FOCUS OUR EFFORTS?
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth http://full-stack.netlify.com
netlify Are you being servered? LINES AND BOXES Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth @ PHIL HAWKSWORTH DEVELOPER EXPERIENCE, NETLIFY
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FINDTHAT.AT/JAMSTACK-BOOK
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FINDTHAT.AT/SOMETHINGSOMETHING FINDTHAT.AT/NEJS
ARE YOU BEING SERVERED? EXPLORING A SERVERLESS WEB PHIL HAWKSWORTH
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth ON BEHALF OF THE PEOPLE OF BRITAIN, I APOLOGIZE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth ON BEHALF OF THE PEOPLE OF BRITAIN, I APOLOGISE
ARE YOU BEING SERVERED? EXPLORING A SERVERLESS WEB PHIL HAWKSWORTH
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FUNCTIONS AS A SERVICE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SERVING WEBSITES WITHOUT WEBSERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /
netlify Are you being servered? Nebraska JS, 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
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth BAKE, DON’T FRY – Aaron Swartz http://www.aaronsw.com/weblog/000404
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth I CARE ABOUT NOT HAVING TO MAINTAIN CRANKY AOLSERVER, POSTGRES AND ORACLE INSTALLS AARON SWARTZ, 2002 http://www.aaronsw.com/weblog/000404
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth TOOLS AND ECOSYSTEM
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SO… WHAT CAN A STATIC SITE EVEN BE?
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth REACTJS.ORG REACTJS.ORG STATIC
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth YARNPKG.COM REACTJS.ORG STATIC
netlify Are you being servered? Nebraska JS, 2019 VUEJS.ORG REACTJS.ORG @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth A LITTLE MORE “DYNAMIC”
netlify Are you being servered? Nebraska JS, 2019 SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PHILIP GOT COCKY
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SOME PEOPLE ON THE INTERNET NOTICED
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth !
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 FINDTHAT.AT/TIME https://setyourwatchby.netlify.com @philhawksworth
netlify Are you being servered? WEBSTASK.IO Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? WEBSTASK.IO Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth ( DON’T DO THIS )
netlify Are you being servered? Nebraska JS, 2019 a @philhawksworth t a k o o l k c i u q TWO PRINCIPLES
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-RENDERING
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-RENDERING SERVERLESS ON-DEMAND
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth r o f s e v i t o m PRE-RENDERING
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth DOING THE WORK NOW, SO YOUR SERVERS DON’T HAVE TO LATER
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PUTTING DISTANCE BETWEEN THE COMPLEXITY AND THE USER
netlify Are you being servered? l a n o i it d a r t k c a t s m ja Nebraska JS, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth JAMSTACK ADVANTAGES SECURITY PERFORMANCE SCALE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SECURITY
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth A GREATLY REDUCED SURFACE AREA
netlify Are you being servered? l a n o i it d a r t k c a t s m ja Nebraska JS, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FAR FEWER MOVING PARTS TO ATTACK
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PERFORMANCE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth CACHING GALORE
netlify Are you being servered? l a n o i it d a r t k c a t s m ja Nebraska JS, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SCALE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE
netlify Are you being servered? l a n o i it d a r t k c a t s m ja Nebraska JS, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth DECOUPLING
netlify Are you being servered? GET TO THE CHOPPER CDN Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-RENDERING SERVERLESS ON-DEMAND
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-RENDERING SERVERLESS ON-DEMAND
netlify Are you being servered? Nebraska JS, 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
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER MANY OF US, SOMETIMES
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SERVERLESS TO THE RESCUE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth LET’S JUST RECREATE EVERYTHING IN SERVERLESS FUNCTIONS THAT VOICE OF TEMPATION
netlify Are you being servered? Nebraska JS, 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
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth e e r f FROM INFRASTRUCTURE e e r f t o n t bu FROM DYNAMIC LOGIC
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AUGMENTATION
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth ENHANCEMENT
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth STATIC FIRST MARKUS SCHORK, UNILEVER
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth VLOLLY.NET/LOLLY/lcc7u_n6a AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth s t n e m e r i u q re
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-GENERATED PAGES WITH REAL URLS (EVEN FOR THE USER GENERATED CONTENT) DATA STORED IN A DATABASE (BUT DON’T MAKE ME A DBA) INSTANT ACCESS TO NEW CONTENT (WITHOUT WAITING FOR A REBUILD)
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth s l o to
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-GENERATED PAGES WITH REAL URLS ELEVENTY (EVEN FOR THE USER GENERATED CONTENT) DATA STORED IN A DATABASE FAUNADB (BUT DON’T MAKE ME A DBA) INSTANT ACCESS TO NEW CONTENT NETLIFY FUNCTIONS (WITHOUT WAITING FOR A REBUILD)
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth const faunadb = require(‘faunadb’); const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); module.exports = () !=> { return new Promise((resolve, reject) !=> { client.query( q.Paginate(q.Match(q.Ref(“indexes/all_lollies”))) ).then((response) !=> { const lollies = response.data; const getAllDataQuery = lollies.map((ref) !=> { return q.Get(ref); }); return client.query(getAllDataQuery).then((ret) !=> { resolve(ret); }); }).catch((error) !=> { reject(error); }); }) } Authenticate with the DB query for all d n a . .. s ie l l o l e h t their data resolve the s ie l l o l f o e is prom s r o r r e y n a h c cat
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth 404
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth TRIGGERS AND AUTOMATION
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth AN EXAMPLE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify
Are you being servered?
Nebraska JS, 2019
@philhawksworth
const faunadb = require(‘faunadb’); const shortid = require(‘shortid’); const querystring = require(‘querystring’); const axios = require(‘axios’); const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }) exports.handler = (event, context, callback) !=> { const data = querystring.parse(event.body); const uniquePath = shortid.generate(); data.lollyPath = uniquePath; const lolly = { data: data }; client.query(q.Create(q.Ref(‘classes/lollies’), lolly)) .then((response) !=> { axios.post(‘https:!//api.netlify.com/build_hooks/5d46fa20da4a1b70047f2f04’) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); return callback(null, { body: JSON.stringify(response), statusCode: 302, headers: { Location: /lolly/${uniquePath}, } }); }).catch((error) !=> { return callback(null, { statusCode: 400, body: JSON.stringify(error) }); }); }
Authenticate with the DB a t a d e h t t s o P rebuild r e s u e h t d n e S To check the freezer FOR A LOLLY
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth WHAT THE DICKENS DOES “CHECK THE FREEZER FOR A LOLLY” MEAN? ALL OF YOU, POSSIBLY
netlify Are you being servered? CHECK FOR A PRE-GENERATED LOLLY PAGE Nebraska JS, 2019 200 @philhawksworth SERVE THE STATIC PAGE 404 RENDER A DYNAMIC VIEW
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? a Nebraska JS, 2019 @philhawksworth ? o m e d k c i qu
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth s r e l b a en
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth CUSTOM 404 ROUTING
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth [[redirects]] from = “/lolly!/*” to = “/.netlify/functions/showLolly?id=:splat” status = 302 force = “false”
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth EVENTS, TRIGGERS AND AUTOMATION
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth FUNCTIONS AS A SERVICE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth DATABASE AS A SERVICE
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth PRE-RENDERING SERVERLESS ON-DEMAND
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth A SHIFT
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth m o r f SEEKING TO OPTIMIZE BY ADDING STATIC LAYERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth to STATIC FIRST ENHANCING IF REQUIRED
netlify Are you being servered? l a n o i it d a r t k c a t s m ja Nebraska JS, 2019 CDN @philhawksworth LOAD BALANCER WEB SERVERS DB SERVERS
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SIMPLIFYING IS NOT DUMBING DOWN
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SIMPLIFYING IS NOT DUMBING DOWN IT LETS US FOCUS ON WHAT REALLY IS IMPORTANT
netlify Are you being servered? Nebraska JS, 2019 EASIER TO REASON ABOUT @philhawksworth
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth WHAT SHALL WE MAKE?
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth
netlify Are you being servered? Nebraska JS, 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
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth JAMSTACK CONFERENCE jamstackconf.com HEADLESS / DECOUPLED CMS STATIC ABOUT THE JAMSTACK / COMMUNITY headlesscms.org jamstack.org BUILDING A URL SHORTENER WITH NETLIFY REDIRECTS findthat.at
netlify Are you being servered? Nebraska JS, 2019 @philhawksworth SO I GUESS WE’RE FULL STACK NOW? full-stack.netlify.com MODERN WEB DEVELOPMENT ON THE JAMSTACK netlify.com/oreilly-jamstack/ JAMSTACK SLACK jamstack.org/slack JAMSTACK COMMENTS EXAMPLE jamstack-comments.netlify.com STATIC
FINDTHAT.AT / NEJS THANKS @PHILHAWKSWORTH
“JAMstack” is an emerging term which some may like and others might not. It describes an approach to architecting and delivering sites as pre-rendered assets, and where necessary, enhancing them with JavaScript and services via APIs… an approach which some may like and others might not.
Personally I love this approach. And I want to explain why.
There has never been a better time for a fresh look at how we approach building and delivering web sites and applications. From the careful selection of JavaScript libraries and frameworks, to the use of emerging tools, services, and platforms.
