ARE YOU BEING SERVERED? EXPLORING A SERVERLESS WEB PHIL HAWKSWORTH
A presentation at Nebraska JavaScript in August 2019 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
