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

A presentation at DotJS in December 2019 in Paris, France by Phil Hawksworth

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 3 5 : 7 1

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 WIRELESS

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SERVERLESS

netlify Are you being servered? @philhawksworth s s e l r e v r se dotJS, Paris, December 2019 ⚡ ⚡ k c a t s jam

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 CAN WE REALLY TAKE SERVERS OUT OF THE EQUATION?

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 FOCUSSING ON THE THINGS YOU CARE ABOUT

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

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 r p e h t h it w m e l ob DOING BIG PROJECTS

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 CONSTRAINTS AND COMPLEXITY AND INFRASTRUCTURE ! y m oh

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 WHERE TO FOCUS OUR EFFORTS?

netlify Are you being servered? LINES AND BOXES @philhawksworth dotJS, Paris, December 2019

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

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 FUNCTIONS AS A SERVICE

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SERVING WEBSITES WITHOUT WEBSERVERS

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 k c a t s m ja JAVASCRIPT / API / MARKUP

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

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

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 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 dotJS, Paris, December 2019 TOOLS & ECOSYSTEM

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SO… WHAT CAN A STATIC SITE EVEN BE?

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 REACTJS.ORG REACTJS.ORG STATIC

netlify Are you being servered? @philhawksworth VUEJS.ORG REACTJS.ORG dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth SMASHINGMAGAZINE.COM SMASHINGMAGAZINE.COM dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth JUSTDOIT.NIKE.COM REACTJS.ORG dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth SQUOOSH.APP REACTJS.ORG dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth REDUCING DEPLOYMENT FRICTION dotJS, Paris, December 2019 INCREASES PERCEIVED DYNAMISM

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 PHILIP GOT COCKY

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SOME PEOPLE ON THE INTERNET NOTICED

netlify Are you being servered? @philhawksworth FINDTHAT.AT/TIME https://setyourwatchby.netlify.com dotJS, Paris, December 2019

netlify Are you being servered? WEBTASK.IO @philhawksworth dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 ( DON’T DO THIS )

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 a r t s u l il … t n i o p a g tin VERY LOW DEPLOYMENT FRICTION

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 a r t s u l il … t n i o p a g tin EVENTS AND AUTOMATION

netlify Are you being servered? @philhawksworth a dotJS, Paris, December 2019 t a k o o l k c i u q TWO PRINCIPLES

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 PRE-RENDERING

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 PRE-RENDERING SERVERLESS RENDERING

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

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

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 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 dotJS, Paris, December 2019 LOAD BALANCER WEB SERVERS DB SERVERS

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 JAMSTACK ADVANTAGES SECURITY PERFORMANCE SCALE

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 DECOUPLING

netlify Are you being servered? @philhawksworth k c a t s m ja REQUEST TIME BULD TIME BUILD dotJS, Paris, December 2019

netlify Are you being servered? GET TO THE CHOPPER CDN @philhawksworth dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 I ABSOLUTELY POSITIVELY NEED A LITTLE LOGIC ON A SERVER SOME OF US, SOMETIMES

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SERVERLESS TO THE RESCUE

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 AUGMENTATION

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 ENHANCEMENT

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 STATIC FIRST MARKUS SCHORK, UNILEVER

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 AN EXAMPLE

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 USER GENERATED CONTENT

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 VLOLLY.NET/LOLLY/3hmtt2r3b AN EXAMPLE

netlify Are you being servered? @philhawksworth m e r i u q re dotJS, Paris, December 2019 s l o o t & s t n e

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 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 dotJS, Paris, December 2019 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 dotJS, Paris, December 2019 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 dotJS, Paris, December 2019 404

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 TRIGGERS AND AUTOMATION

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 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? CHECK FOR A PRE-GENERATED LOLLY PAGE @philhawksworth 200 dotJS, Paris, December 2019 SERVE THE STATIC PAGE 404 RENDER A DYNAMIC VIEW

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 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? @philhawksworth FINDTHAT.AT/LOLLYTRICKS dotJS, Paris, December 2019 https://css-tricks.com/static-first-pre-generated-jamstack-sites-with-serverless-rendering-as-a-fallback/

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 WHY SAY JAMSTACK, AND NOT STATIC?

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 A SHIFT

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 m o r f SEEKING TO OPTIMIZE BY ADDING STATIC LAYERS

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 to STATIC FIRST ENHANCING IF REQUIRED

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SIMPLIFYING IS NOT DUMBING DOWN

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

netlify Are you being servered? @philhawksworth EASIER TO REASON ABOUT dotJS, Paris, December 2019

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 STATIC SITE GENERATORS staticgen.com NETLIFY www.netlify.com STATIC VARIOUS RELATED RESOURCES FROM CHRIS COYIER https://serverless.css-tricks.com/ CITRIX PRESENTATION FROM JAMSTACKCONF NYC youtube.com/watch?v=kvS5h5domf0

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 JAMSTACK CONFERENCE jamstackconf.com HEADLESS / DECOUPLED CMS headlesscms.org STATIC ABOUT THE JAMSTACK / COMMUNITY jamstack.org BUILDING A URL SHORTENER WITH NETLIFY REDIRECTS findthat.at

netlify Are you being servered? @philhawksworth dotJS, Paris, December 2019 SO I GUESS WE’RE FULL STACK NOW? https://www.youtube.com/watch?v=lFOfQsi5ye0 MODERN WEB DEVELOPMENT ON THE JAMSTACK netlify.com/oreilly-jamstack/ JAMSTACK WHITEPAPER findthat.at/jamstack-whitepaper JAMSTACK COMMENTS EXAMPLE jamstack-comments.netlify.com STATIC

FINDTHAT.AT / SERVERED THANKS @PHILHAWKSWORTH

Phil Hawksworth
@philhawksworth

1 / 115

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.

Buzz and feedback

Here’s what was said about this presentation on social media.

There are so many people talking about JAMstack nowadays but it takes @philhawksworth from @netlify to actually rock the topic. @dotJS

Wish I had a half of his stage talent. :) We'll see at @vuejsamsterdam if I got any better. ;) pic.twitter.com/Pg5K5ey93z
— Gusto @ dotJS (@gustojs) December 5, 2019
Awesome presentation about #serverless and #jamstack by @philhawksworth from @Netlify at @dotJS. I use this tool everyday, it's such a game changer! #dotjs pic.twitter.com/tcUV6vTGnv
— Johnathan MEUNIER (@j7n__) December 5, 2019
LOVE the analogy @philhawksworth made at #dotJS today

We don't have a problem with the term "wireless", even though there's clearly a wire, so we shouldn't have a problem with the term "serverless" just because the server technically exists too! pic.twitter.com/FRQ9h6WoF3
— Ire Aderinokun (@ireaderinokun) December 5, 2019
Phenomenal talk on building static first sites by @philhawksworth at #dotJS

I’m constantly in awe of what can be done on the #JamStack

💛 @Netlify pic.twitter.com/MJKQdAFjvt
— Christmas Carol 🎄✨ at #dotJS 🇫🇷 (@CarolSaysThings) December 5, 2019
Ok - that got my attention.
Never used it but keeping an open mind.
Going to read https://t.co/sgz4fK8yS4 now.
— Charles Greenaway (@cciechaz) December 5, 2019
pretty interesting! Let's go serverless and reduce friction on deployment by @philhawksworth at @dotjs.#js #javascript #frontend #serverless pic.twitter.com/Xq2Zy4zV5g
— Yngrid Coello (@yngrdyn) December 5, 2019
@philhawksworth made me want to play around with Netlify functions and Faunadb 🤩 Thanks for this great talk ! (and for the lollipop 😄) #dotjs
— Laïla Atrmouh (@leiluspocus) December 5, 2019
What a cute website 😍
Love it, I'll definitely check it, will be interesting to see how you use FaunaDB 🤓
— Brecht De Rooms (@databrecht) December 5, 2019
If the wireless charger is really wire-less, The serverless architecture is server-less :) @philhawksworth #dotjs
— Ceyhun KEKLİK (@ceyhunkeklik) December 5, 2019
Phil Hawksworth (@philhawksworth) flying through the slides and serving lollipops at @dotJS 2019, #dotjs pic.twitter.com/cQR27j3DSU
— Matthew Cawley at @dotJS 🇲🇫 (@mjcwly) December 5, 2019
Just been blown away by @philhawksworth and his adventures into serverless infrastructure @dotJS . I now also have a small craving for lollies! pic.twitter.com/IzNNfSfUay
— Mod Allstar (@JagexAllstar) December 5, 2019
Jamstack! @philhawksworth closing @dotJS solid - as usual. 👍 pic.twitter.com/zMRY2hEYKk
— Stefan Judis (@stefanjudis) December 5, 2019
Time for the final session of the day. We start now with Phil Hawksworth @philhawksworth, Principal Developer Advocate at @Netlify pic.twitter.com/VsRWLkbyEL
— dotJS (@dotJS) December 5, 2019
For the begining of the end of the day, @philhawksworth will answer the question "Are you being servered ?" #Serverless #dotjs pic.twitter.com/JlNvJUF99D
— Adrien LASSΞLLΞ (@AdrienLASSELLE) December 5, 2019
What a delightful surprise to see @philhawksworth again on the other side of the ocean only a month after @VueToronto 😊 @dotJS #dotjs pic.twitter.com/0VPeBQkP1S
— Sarah Dayan @dotJS (@frontstuff_io) December 5, 2019

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

Link for this presentation:

HTML code for embedding:

Share on social media:

Buzz and feedback