choose your region: earth; cloudflare workers · * an incredibly simplified and not quite, but...

choose your region: Earth; Cloudflare Workers

QConSF 2019

@ag_dubshi, i’m

performance

accessibility

infrastructure

how the internetworks?

how the internetcould work?

javascript’sjourney

1970 1980 1990 2000 2010 2020

JavaScript (1995)

IE (1995)

Browser War I (1995-2001)

Netscape (1994)

HTML (1993)Wasm (2017)

Chrome (2008)Firefox (2002)

Safari (2003)Browser War II (2008-2017)

CSS (1996)

First Website (1991)

JavaScript (1995)HTML (1993)

Wasm (2017)NodeJS (2009)

V8 (2008)

JQuery (2006)

React (2012)

1970 1980 1990 2000 2010 2020

Angular (2010)

Ember (2011)

Google Maps (2004)

CSS (1996)AJAX (2009)

SPA (2003)

TraceMonkey (2009)

First Website (1991)

IE (1995)Netscape (1994) Chrome (2008)

Firefox (2002)Safari (2003)

JavaScript (1995)HTML (1993)

CSS (1996)

Wasm (2017)NodeJS (2009)

V8 (2008)

React (2012)

1970 1980 1990 2000 2010 2020

Angular (2010)

Ember (2011)

Google Maps (2004)

Adobe Flash (1996)NaCL (2011)Java Applets (1995)

JQuery (2006)

SPEED OF COMPUTATION IN THE BROWSER

AJAX (2009) TraceMonkey (2009)

SPA (2003)

First Website (1991)

how much does itcost?

accessability

The web is bloated by user “experience”.

Addy Osmani

WE TRIED SO HARD AND GOT SO FAR BUT IN THE END…

Source: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

Source: https://beta.httparchive.org/reports/state-of-javascript#bytesJs

~9 secsmobile loading time

Source: https://beta.httparchive.org/reports/loading-speed#ttci

unacceptable

a big orange cloudi’m a systems engineer for

infrastructure

infrastructure

hardware

180+ datacenters

theedge

theedge?

clientserver

let’s talkabout PIZZA

pizzadelivery

pizzaaccessibility

pizzaccessibility

! your javascript program

💥 your javascript program executing

🍕 your javascript program’s generated output

$ your end user

🧺 a POP (point of presence), a cache node

client siderendering

client-side rendering

!

$

client-side rendering!$

client-side rendering!$💥

client-side rendering!$🍕

client-side rendering

!

$

client-side rendering!$

client-side rendering!$💥

client-side rendering!$🍕

client side+ cache

client-side + cache

!

$

🧺

client-side + cache

!

$

🧺

!

$

🧺!!!

client-side + cache

!

$

🧺!!

!

client-side + cache

!

$

🧺!!

!

client-side + cache💥

!

$

🧺!!

!🍕

client-side + cache

!

$

🧺!!

client-side + cache

!

$

🧺!

!!

client-side + cache

!

$

🧺!!

!

client-side + cache💥

!

$

🧺!

!!🍕

client-side + cache

server siderendering

10 years agoat JSConfEU

Ryan Dahl announces

Node.jsJSConfEU

2009:

accessibleto JavaScript developers

Node.js made the server

server-side rendering

!

$

server-side rendering

!

$

💥

server-side rendering

!

$

🍕

server-side rendering

!

$🍕

server-side rendering

!

$

server-side rendering

!

$

💥

server-side rendering

!

$

🍕

server-side rendering

!

$🍕

server-side rendering

!

$

server side+ cache

server-side + cache

!

$

🧺

server-side + cache

!

$

🧺

💥

server-side + cache

!

$

🧺

🍕

server-side + cache

!

$

🧺🍕

server-side + cache

!

$

🧺🍕🍕🍕🍕

server-side + cache

!

$

🧺🍕🍕🍕

🍕

server-side + cache

!

$

🧺🍕🍕

🍕🍕

server-side + cache

!

$

🧺🍕

🍕🍕🍕

clientserver

what is to be done?

* an incredibly simplified and not quite, but close to, accurate representation of Cloudflare’s 180+ data centers

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺 🧺🧺

🧺

🧺

* an incredibly simplified and not quite, but close to, accurate representation of Cloudflare’s 180+ data centers

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺 🧺🧺

🧺

🧺

what should we do with all these baskets???!!

* an incredibly simplified and not quite, but close to, accurate representation of Cloudflare’s 180+ data centers

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺 🧺🧺

🧺

🧺

what should we do with all these baskets???!!

- Cloudflare**

** not really but sort of, yknow??

clientserver

clientserver

the edge

edge-side rendering

!

$

🧺

edge-side rendering

!

$

🧺💥

edge-side rendering

!

$

🧺🍕

edge-side rendering

!

$

🧺

🍕

edge-side rendering

!

$

🧺

edge-side rendering

!

$

🧺💥

edge-side rendering

!

$

🧺🍕

edge-side rendering

!

$

🧺

🍕

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

!🧺

!🧺

$

$

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

💥

💥

💥!🧺

!🧺

$

$💥

💥

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

🍕🍕

🍕

!🧺

!🧺

$

$🍕

🍕

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

🍕

🍕

🍕 !🧺

!🧺

$

$

🍕

🍕

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

!🧺

!🧺

$

$

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

💥

💥

💥!🧺

!🧺

$

$💥

💥

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

🍕🍕

🍕

!🧺

!🧺

$

$🍕

🍕

edge-side rendering

!

$

🧺

!🧺

!🧺 $

$

🍕

🍕

🍕 !🧺

!🧺

$

$

🍕

🍕

how fast?

worker: 143.47msgh-pages: 591.07ms

capetown, ZA

worker: 44.33msgh-pages: 497.93ms

doha, Qatar

worker: 208.08msgh-pages: 624.87ms

melbourne, AU

worker: 34.70msgh-pages: 170.20ms

reykjavik, IS

how does iteven?

* an incredibly simplified and not quite, but close to, accurate representation of Cloudflare’s 180+ data centers

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺

🧺 🧺🧺

🧺

🧺

Traffic (requests): easy!

Tenants (apps): Hard

Scalability can mean…

Our network is huge and continues to grow

Every app needs to be in every location. And some places are very small.

100x efficiency?

Code Footprint

VM: 10GB Container: 100MB Needed: <1MB

Memory Usage

VM: 1GB Container: 100MB Needed: <5MB

the edge is nota large place

Context Switching

VM: low Container: medium Needed: high

each server only has to run the requests local to it!

we need to be able to switch back and forth

between apps quickly!

Startup Time

VM: 10s Container: 500ms Needed: <5ms

we need to be able to kick people out!

we need to be able to start them back up quickly!

Other Use Cases… APIs Run client code directly on the server.

Big Data Processing Run code where data lives.

Web Browsers Run code from visited sites.

WEB BROWSERS ARE

AWESOME

Server technology is too slow for our use case…

… we have been overlooking the power of client side

tech!

Browsers are optimized for: Small Downloads Fast startup Many tabs and frames Secure Isolation

Web browsers have been the most hostile security environment… for quite some time.

Kenton Varda

PLEASE UPDATE YOUR VERSION OF ADOBE FLASH

* this talk is not sponsored or affiliated with V8 beverages or the Campbell’s Soup Company

class v8::isolate

Application Application Application

Libraries LibrariesUncommon Libraries

Web Platform APIs

Language Runtime Language Runtime JS Runtime

Operating System Operating System Operating System

Hardware (virtualized) Hardware Hardware

Provided by Host Provided by Guest

VMs Containers Isolates

fetch API +ServiceWorker API

webassembly!heck yeah

this is a lot like anoperating system

but is this agood idea?

👻👻👻

no (local) timersat all.

no (local)concurrency

freedom toreschedule

how can iuse this?

accessability

developerexperience

> npm i @cloudflare/wrangler -g

yeeeeeehaww

> wrangler generate hello > wrangler subdomain world

> cd world > wrangler publish

Successfully published https://hello.world.workers.dev

demotime

workers.cloudflare.com

go forth and build awesome, accessible things…

for the whole world!

hold upi’m not done

thanks!@ag_dubs

workers.cloudflare.com