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

QConSF 2019 choose your region: Earth; Cloudflare Workers

hi, i’m @ag_dubs

performance

accessibility

infrastructure

how the internet works?

how the internet could work?

javascript’s journey

JavaScript (1995) Wasm (2017) HTML (1993) CSS (1996) Netscape (1994) Chrome (2008) IE (1995) Firefox (2002) Safari (2003) Browser War I Browser War II (1995-2001) (2008-2017) First Website (1991) 1970 1980 1990 2000 2010 2020

JavaScript (1995) Wasm (2017) NodeJS (2009) HTML (1993) CSS (1996) TraceMonkey (2009) AJAX (2009) V8 (2008) JQuery (2006) React (2012) SPA (2003) Ember (2011) Angular (2010) First Website (1991) Google Maps (2004) 1970 1980 1990 2000 2010 2020

JavaScript (1995) Wasm (2017) NodeJS (2009) HTML (1993) CSS (1996) TraceMonkey (2009) AJAX (2009) Netscape (1994) Adobe Flash (1996) Chrome (2008) V8 (2008) SPEED OF IE (1995) Firefox (2002) NaCL (2011) Java Applets (1995) Safari (2003) COMPUTATION JQuery (2006) React (2012) IN THE BROWSER SPA (2003) Ember (2011) Angular (2010) First Website (1991) Google Maps (2004) 1970 1980 1990 2000 2010 2020

how much does it cost?

access ability

WE TRIED SO HARD AND GOT SO FAR BUT IN THE END… The web is bloated by user “experience”. Addy Osmani Source: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

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

~9 secs mobile loading time Source: https://beta.httparchive.org/reports/loading-speed#ttci

unacceptable

i’m a systems engineer for a big orange cloud

infrastructure

infrastructure

hardware

180+ datacenters

the edge

the edge?

client server

let’s talk about PIZZA

pizza delivery

pizza accessibility

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 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 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 side rendering

10 years ago at JSConfEU

JSConfEU Ryan Dahl announces 2009: Node.js

Node.js made the server accessible to JavaScript developers

 隸 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

client server

what is to be done?

🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 🧻 * 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?? * an incredibly simplified and not quite, but close to, accurate representation of Cloudflare’s 180+ data centers

client server

client the edge server

 🧻 隸 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?