Are you being servered? — Exploring a “serverless” web

A presentation at LeedsJS in August 2019 in Leeds, UK by Phil Hawksworth

netlify Are you being servered? @philhawksworth

netlify Are you being servered? @philhawksworth WIRELESS

netlify Are you being servered? @philhawksworth SERVERLESS

netlify Are you being servered? @philhawksworth FOCUSSING ON THE THINGS YOU CARE ABOUT

netlify Are you being servered? @philhawksworth FOCUSSING ON THE THINGS YOU o t e v ha CARE ABOUT

netlify Are you being servered? @philhawksworth d e t a r e b li TO FOCUS ON WHAT MATTERS

netlify Are you being servered? @philhawksworth h it w m e l b o r p e h t DOING BIG PROJECTS

netlify Are you being servered? @philhawksworth CONSTRAINTS AND COMPLEXITY AND INFRASTRUCTURE ! y m oh

netlify Are you being servered? @philhawksworth WHERE TO FOCUS OUR EFFORTS?

netlify Are you being servered? @philhawksworth http://full-stack.netlify.com

netlify Are you being servered? LINES AND BOXES @philhawksworth

netlify Are you being servered? @philhawksworth @ PHIL HAWKSWORTH HE / HIM DEVELOPER EXPERIENCE, NETLIFY

netlify Are you being servered? @philhawksworth FINDTHAT.AT/JAMSTACK-BOOK

netlify Are you being servered? @philhawksworth FINDTHAT.AT/SOMETHINGSOMETHING FINDTHAT.AT/SERVERED FINDTHAT.AT

netlify Are you being servered? @philhawksworth FUNCTIONS AS A SERVICE

netlify Are you being servered? @philhawksworth SERVING WEBSITES WITHOUT WEBSERVERS

netlify Are you being servered? @philhawksworth k c a t s m ja JAVASCRIPT / API / MARKUP

netlify Are you being servered? @philhawksworth STACKS FOR DAYZ AN / LAMP / MAMP / XAMP / ROR / WISA / MEA WISA / MEAN / LAMP / MAMP / XAMP / ROR /

netlify Are you being servered? @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? @philhawksworth BAKE, DON’T FRY – Aaron Swartz http://www.aaronsw.com/weblog/000404

netlify Are you being servered? @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? @philhawksworth TOOLS AND ECOSYSTEM

netlify Are you being servered? @philhawksworth SO… WHAT CAN A STATIC SITE EVEN BE?

netlify Are you being servered? @philhawksworth REACTJS.ORG REACTJS.ORG STATIC

netlify Are you being servered? @philhawksworth YARNPKG.COM REACTJS.ORG STATIC

netlify Are you being servered? @philhawksworth VUEJS.ORG REACTJS.ORG

netlify Are you being servered? @philhawksworth A LITTLE MORE “DYNAMIC”

netlify Are you being servered? @philhawksworth SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM

netlify Are you being servered? @philhawksworth PHILIP GOT COCKY

netlify Are you being servered? @philhawksworth SOME PEOPLE ON THE INTERNET NOTICED

netlify Are you being servered? @philhawksworth FINDTHAT.AT/TIME https://setyourwatchby.netlify.com

netlify Are you being servered? WEBSTASK.IO @philhawksworth

netlify Are you being servered? @philhawksworth ( DON’T DO THIS )

netlify Are you being servered? @philhawksworth a t a k o o l k c i u q TWO PRINCIPLES

netlify Are you being servered? @philhawksworth PRE-RENDERING

netlify Are you being servered? @philhawksworth PRE-RENDERING SERVERLESS ON-DEMAND

netlify Are you being servered? @philhawksworth r o f s e v i t o m PRE-RENDERING

netlify Are you being servered? @philhawksworth DOING THE WORK NOW, SO YOUR SERVERS DON’T HAVE TO LATER

netlify Are you being servered? @philhawksworth PUT 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 @philhawksworth CDN LOAD BALANCER WEB SERVERS DB SERVERS

netlify Are you being servered? @philhawksworth k c a t s m ja REQUEST TIME BULD TIME DEPLOYMENT BUILD

netlify Are you being servered? @philhawksworth JAMSTACK ADVANTAGES SECURITY PERFORMANCE SCALE

netlify Are you being servered? @philhawksworth SECURITY

netlify Are you being servered? @philhawksworth A GREATLY REDUCED SURFACE AREA

netlify Are you being servered? @philhawksworth FAR FEWER MOVING PARTS TO ATTACK

netlify Are you being servered? @philhawksworth PERFORMANCE

netlify Are you being servered? @philhawksworth TRADITIONAL STACKS ADD STATIC LAYERS IN ORDER TO IMPROVE PERFORMANCE

netlify Are you being servered? @philhawksworth CACHING GALORE

netlify Are you being servered? @philhawksworth SCALE

netlify Are you being servered? @philhawksworth TRADITIONAL STACKS ADD INFRASTRUCTURE IN ORDER TO SCALE

netlify Are you being servered? @philhawksworth DECOUPLING

netlify Are you being servered? GET TO THE CHOPPER CDN @philhawksworth

netlify Are you being servered? @philhawksworth I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER MANY OF US, SOMETIMES

netlify Are you being servered? @philhawksworth SERVERLESS TO THE RESCUE

netlify Are you being servered? @philhawksworth LET’S JUST RECREATE EVERYTHING IN SERVERLESS FUNCTIONS THAT VOICE OF TEMPATION

netlify Are you being servered? @philhawksworth e e r f FROM INFRASTRUCTURE e e r f t o n t bu FROM DYNAMIC LOGIC

netlify Are you being servered? @philhawksworth AUGMENTATION

netlify Are you being servered? @philhawksworth ENHANCEMENT

netlify Are you being servered? @philhawksworth STATIC FIRST MARKUS SCHORK, UNILEVER

netlify Are you being servered? @philhawksworth AN EXAMPLE

netlify Are you being servered? @philhawksworth VLOLLY.NET/LOLLY/3hmtt2r3b AN EXAMPLE

netlify Are you being servered? @philhawksworth s t n e m e r i u q re

netlify Are you being servered? @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? @philhawksworth s l o to

netlify Are you being servered? @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? @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? @philhawksworth 404

netlify Are you being servered? @philhawksworth TRIGGERS AND AUTOMATION

netlify Are you being servered? @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? @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 @philhawksworth 200 SERVE THE STATIC PAGE 404 RENDER A DYNAMIC VIEW

netlify Are you being servered? @philhawksworth const faunadb = require(‘faunadb’); const pageTemplate = require(‘./lollyTemplate.js’); const q = faunadb.query; const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET }); exports.handler = (event, context, callback) !=> { const path = event.queryStringParameters.id.replace(“/”, “”); client.query( q.Get(q.Match(q.Index(“lolly_by_path”), path)) ).then((response) !=> { return callback(null, { statusCode: 200, body: pageTemplate(response.data) }); }).catch((error) !=> { return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); } Get page as a javascript l a r e it l e t a l p tem Authenticate with the DB Get the lolly data w ie v y l l o l e v r e S k a e r B . y l l o L o N the bad news

netlify Are you being servered? a @philhawksworth ? o m e d k c i qu

netlify Are you being servered? @philhawksworth s r e l b a en

netlify Are you being servered? @philhawksworth CUSTOM 404 ROUTING

netlify Are you being servered? @philhawksworth [[redirects]] from = “/lolly!/*” to = “/.netlify/functions/showLolly?id=:splat” status = 302 force = “false”

netlify Are you being servered? @philhawksworth EVENTS, TRIGGERS AND AUTOMATION

netlify Are you being servered? @philhawksworth DATABASE AS A SERVICE

netlify Are you being servered? @philhawksworth A SHIFT

netlify Are you being servered? @philhawksworth m o r f SEEKING TO OPTIMIZE BY ADDING STATIC LAYERS

netlify Are you being servered? @philhawksworth to STATIC FIRST ENHANCING IF REQUIRED

netlify Are you being servered? @philhawksworth SIMPLIFYING IS NOT DUMBING DOWN

netlify Are you being servered? @philhawksworth SIMPLIFYING IS NOT DUMBING DOWN IT LETS US FOCUS ON WHAT REALLY IS IMPORTANT

netlify Are you being servered? @philhawksworth EASIER TO REASON ABOUT

netlify Are you being servered? @philhawksworth WHAT SHALL WE MAKE?

netlify Are you being servered? @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? @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? @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 / SERVERED THANKS @PHILHAWKSWORTH

Phil Hawksworth
@philhawksworth

1 / 136

JAMstack is an emerging term which describes an approach to architecting and delivering sites as pre-rendered assets, and where necessary, enhancing them with JavaScript and services via APIs

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.

In this talk we’ll explore how an application can be built to include pre-rendered user interface elements and dynamic APIs backed with data services. All without needing to manage or maintain a server.

Are you being servered? — Exploring a “serverless” web

Link for this presentation:

HTML code for embedding:

Share on social media:

Video