choose your region: Earth; Cloudflare Workers hi, im @ag_dubs - - PowerPoint PPT Presentation

▶
choose your region earth cloudflare workers
SMART_READER_LITE
LIVE PREVIEW

choose your region: Earth; Cloudflare Workers hi, im @ag_dubs - - PowerPoint PPT Presentation

Dec 29, 2023 403 likes •1.97k views

QConSF 2019 choose your region: Earth; Cloudflare Workers hi, im @ag_dubs performance accessibility infrastructure how the internet works? how the internet could work? javascripts journey JavaScript (1995) Wasm (2017) HTML

slide-1
SLIDE 1

choose your region: Earth; Cloudflare Workers

QConSF 2019

slide-2
SLIDE 2

@ag_dubs

hi, i’m

slide-3
SLIDE 3
slide-4
SLIDE 4

performance

slide-5
SLIDE 5

accessibility

slide-6
SLIDE 6

infrastructure

slide-7
SLIDE 7

how the internet

works?

slide-8
SLIDE 8

how the internet

could work?

slide-9
SLIDE 9

javascript’s journey

slide-10
SLIDE 10

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)

slide-11
SLIDE 11

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)

slide-12
SLIDE 12

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)

slide-13
SLIDE 13

how much does it

cost?

slide-14
SLIDE 14

access ability

slide-15
SLIDE 15

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
slide-16
SLIDE 16 Source: https://beta.httparchive.org/reports/state-of-javascript#bytesJs
slide-17
SLIDE 17

~9 secs

mobile loading time

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

unacceptable

slide-19
SLIDE 19

a big orange cloud

i’m a systems engineer for

slide-20
SLIDE 20

infrastructure

slide-21
SLIDE 21
slide-22
SLIDE 22

infrastructure

slide-23
SLIDE 23

hardware

slide-24
SLIDE 24
slide-25
SLIDE 25

180+ datacenters

slide-26
SLIDE 26

the edge

slide-27
SLIDE 27

the edge?

slide-28
SLIDE 28

client server

slide-29
SLIDE 29

let’s talk about PIZZA

slide-30
SLIDE 30

pizza delivery

slide-31
SLIDE 31

pizza

accessibility

slide-32
SLIDE 32

pizzaccessibility

slide-33
SLIDE 33

 your javascript program 💦 your javascript program executing 🍖 your javascript program’s generated output 隸 your end user 🧻 a POP (point of presence), a cache node

slide-34
SLIDE 34

client side rendering

slide-35
SLIDE 35

client-side rendering

 隸

slide-36
SLIDE 36

client-side rendering

 隸

slide-37
SLIDE 37

client-side rendering

 隸 💦

slide-38
SLIDE 38

client-side rendering

 隸🍖

slide-39
SLIDE 39

client-side rendering

 隸

slide-40
SLIDE 40

client-side rendering

 隸

slide-41
SLIDE 41

client-side rendering

 隸 💦

slide-42
SLIDE 42

client-side rendering

 隸🍖

slide-43
SLIDE 43

client side + cache

slide-44
SLIDE 44

client-side + cache

 隸 🧻

slide-45
SLIDE 45

client-side + cache

 隸 🧻

slide-46
SLIDE 46

 隸 🧻

client-side + cache

slide-47
SLIDE 47

 隸 🧻 

client-side + cache

slide-48
SLIDE 48

 隸 🧻 

client-side + cache

💦

slide-49
SLIDE 49

 隸 🧻  🍖

client-side + cache

slide-50
SLIDE 50

 隸 🧻

client-side + cache

slide-51
SLIDE 51

 隸 🧻 

client-side + cache

slide-52
SLIDE 52

 隸 🧻 

client-side + cache

💦

slide-53
SLIDE 53

 隸 🧻  🍖

client-side + cache

slide-54
SLIDE 54

server side rendering

slide-55
SLIDE 55

10 years ago at JSConfEU

slide-56
SLIDE 56

Ryan Dahl announces Node.js

JSConfEU 2009:

slide-57
SLIDE 57

accessible

to JavaScript developers

Node.js made the server

slide-58
SLIDE 58

server-side rendering

 隸

slide-59
SLIDE 59

server-side rendering

 隸 💦

slide-60
SLIDE 60

server-side rendering

 隸 🍖

slide-61
SLIDE 61

server-side rendering

 隸🍖

slide-62
SLIDE 62

server-side rendering

 隸

slide-63
SLIDE 63

server-side rendering

 隸 💦

slide-64
SLIDE 64

server-side rendering

 隸 🍖

slide-65
SLIDE 65

server-side rendering

 隸🍖

slide-66
SLIDE 66

server-side rendering

 隸

slide-67
SLIDE 67

server side + cache

slide-68
SLIDE 68

server-side + cache

 隸 🧻

slide-69
SLIDE 69

server-side + cache

 隸 🧻 💦

slide-70
SLIDE 70

server-side + cache

 隸 🧻 🍖

slide-71
SLIDE 71

server-side + cache

 隸 🧻 🍖

slide-72
SLIDE 72

server-side + cache

 隸 🧻 🍖

slide-73
SLIDE 73

server-side + cache

 隸 🧻 🍖 🍖

slide-74
SLIDE 74

server-side + cache

 隸 🧻 🍖 🍖

slide-75
SLIDE 75

server-side + cache

 隸 🧻 🍖 🍖

slide-76
SLIDE 76

client server

slide-77
SLIDE 77

what is to be done?

slide-78
SLIDE 78

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

🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻

slide-79
SLIDE 79

* 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???!!

slide-80
SLIDE 80

* 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??

slide-81
SLIDE 81

client server

slide-82
SLIDE 82

client server

the edge

slide-83
SLIDE 83

edge-side rendering

 隸 🧻

slide-84
SLIDE 84

edge-side rendering

 隸 🧻 💦

slide-85
SLIDE 85

edge-side rendering

 隸 🧻 🍖

slide-86
SLIDE 86

edge-side rendering

 隸 🧻 🍖

slide-87
SLIDE 87

edge-side rendering

 隸 🧻

slide-88
SLIDE 88

edge-side rendering

 隸 🧻 💦

slide-89
SLIDE 89

edge-side rendering

 隸 🧻 🍖

slide-90
SLIDE 90

edge-side rendering

 隸 🧻 🍖

slide-91
SLIDE 91

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸  🧻  🧻 隸 隸

slide-92
SLIDE 92

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 💦 💦 💦  🧻  🧻 隸 隸 💦 💦

slide-93
SLIDE 93

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 🍖 🍖 🍖  🧻  🧻 隸 隸 🍖 🍖

slide-94
SLIDE 94

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 🍖 🍖 🍖  🧻  🧻 隸 隸 🍖 🍖

slide-95
SLIDE 95

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸  🧻  🧻 隸 隸

slide-96
SLIDE 96

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 💦 💦 💦  🧻  🧻 隸 隸 💦 💦

slide-97
SLIDE 97

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 🍖 🍖 🍖  🧻  🧻 隸 隸 🍖 🍖

slide-98
SLIDE 98

edge-side rendering

 隸 🧻  🧻  🧻 隸 隸 🍖 🍖 🍖  🧻  🧻 隸 隸 🍖 🍖

slide-99
SLIDE 99

how fast?

slide-100
SLIDE 100
slide-101
SLIDE 101

worker: 143.47ms

gh-pages: 591.07ms

capetown, ZA

slide-102
SLIDE 102

worker: 44.33ms

gh-pages: 497.93ms

doha, Qatar

slide-103
SLIDE 103

worker: 208.08ms

gh-pages: 624.87ms

melbourne, AU

slide-104
SLIDE 104

worker: 34.70ms

gh-pages: 170.20ms

reykjavik, IS

slide-105
SLIDE 105

how does it even?

slide-106
SLIDE 106

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

🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻

slide-107
SLIDE 107

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.

slide-108
SLIDE 108

100x efficiency

?

slide-109
SLIDE 109

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

slide-110
SLIDE 110

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

slide-111
SLIDE 111

the edge is not

a large place

slide-112
SLIDE 112

Context Switching VM: low Container: medium Needed: high

slide-113
SLIDE 113

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

we need to be able to switch back and forth between apps quickly!

slide-114
SLIDE 114

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

slide-115
SLIDE 115

we need to be able to kick people out!

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

slide-116
SLIDE 116

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.

slide-117
SLIDE 117

WEB BROWSERS ARE

AWESOME

slide-118
SLIDE 118

Server technology is too slow for our use case…

… we have been overlooking the power of client side tech!

slide-119
SLIDE 119

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

slide-120
SLIDE 120

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

Kenton Varda

PLEASE UPDATE YOUR VERSION OF ADOBE FLASH

slide-121
SLIDE 121

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

slide-122
SLIDE 122
slide-123
SLIDE 123

class v8::isolate

slide-124
SLIDE 124

Application Application Application Libraries Libraries Uncommon 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

slide-125
SLIDE 125
slide-126
SLIDE 126

fetch API +

ServiceWorker API

slide-127
SLIDE 127
slide-128
SLIDE 128

webassembly!

heck yeah

slide-129
SLIDE 129

this is a lot like an

  • perating system
slide-130
SLIDE 130
slide-131
SLIDE 131

but is this a good idea?

slide-132
SLIDE 132

👼👼👼

slide-133
SLIDE 133
slide-134
SLIDE 134

no (local) timers

at all.

slide-135
SLIDE 135

no (local)

concurrency

slide-136
SLIDE 136

freedom to reschedule

slide-137
SLIDE 137

how can i use this?

slide-138
SLIDE 138

access ability

slide-139
SLIDE 139

developer experience

slide-140
SLIDE 140
slide-141
SLIDE 141

> npm i @cloudflare/wrangler -g

yeeeeeehaww

slide-142
SLIDE 142

> wrangler generate hello > wrangler subdomain world > cd world > wrangler publish Successfully published https://hello.world.workers.dev

slide-143
SLIDE 143

demo time

slide-144
SLIDE 144
slide-145
SLIDE 145
slide-146
SLIDE 146
slide-147
SLIDE 147
slide-148
SLIDE 148
slide-149
SLIDE 149
slide-150
SLIDE 150
slide-151
SLIDE 151
slide-152
SLIDE 152

workers.cloudflare.com

go forth and build awesome, accessible things… for the whole world!

slide-153
SLIDE 153

hold up i’m not done

slide-154
SLIDE 154
slide-155
SLIDE 155

thanks!

@ag_dubs workers.cloudflare.com