choose your region: earth; cloudflare workers · * an incredibly simplified and not quite, but...
TRANSCRIPT
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