The Edge at your fingertips, Literally!

In the not very distant past, we had to spin up our own server and manage a whole infrastructure just to get our application deployed and available to our users. Today's world is moving from on-premises to cloud deployments, and that has completely changed the picture.

In this talk, we will explore the capabilities that the Cloudflare Edge network offers and how you can benefit from it to build and ship faster websites and applications.

Transcript

1. THE EDGE AT YOUR FINGERTIPS, LITERALLY! JSWorld Conference - Amsterdam, June 2022
2. WHAT WE'LL COVER? @lauragift_
3. WHAT WE'LL COVER? •What is the Edge? @lauragift_
4. WHAT WE'LL COVER? •What is the Edge? •How is it different from Serverless Functions? @lauragift_
5. WHAT WE'LL COVER? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
6. WHAT WE'LL COVER? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem. @lauragift_
7. WHAT WE'LL COVER? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem. •Use Cases and Examples. @lauragift_
8. GIFT EGWUENU DEVELOPER ADVOCATE @CLOUDFLARE EDUCATOR & YOUTUBER @LAURAGIFT_
9. WHAT IS THE Edge? @lauragift_
10. The edge is a server geographica y located close to your users. @lauragift_
12. Where it a started... @lauragift_
16. LIMITATIONS OF TRADITIONAL SERVERS @lauragift_
17. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. @lauragift_
18. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. •High latency due to large amount of traffic. @lauragift_
19. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. •High latency due to large amount of traffic. •Limited opportunity for scaling. @lauragift_
20. SERVERLESS FUNCTIONS @lauragift_
21. Serverless doesn't mean no servers! There's still a server, you just don't manage it. @lauragift_
22. SERVERLESS PROVIDERS @lauragift_
23. ADVANTAGES OF SERVERLESS FUNCTIONS @lauragift_
24. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need to manage your servers. @lauragift_
25. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need to manage your servers. •Low costs of bandwidth (pay for only what you use). @lauragift_
26. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need to manage your servers. •Low costs of bandwidth (pay for only what you use). •Scalibility On Demand. @lauragift_
27. LIMITATION OF SERVERLESS FUNCTIONS @lauragift_
28. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a centralized core location (us-east1). @lauragift_
29. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a centralized core location (us-east1). •Cold start after the function is idle. @lauragift_
30. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a centralized core location (us-east1). •Cold start after the function is idle. •Limited execution time(10ms). @lauragift_
31. EDGE FUNCTIONS @lauragift_
32. EDGE FUNCTIONS = Serverle Functions at The Edge @lauragift_
33. REGION EARTH
34. EDGE PROVIDERS Cloudflare Workers, AWS Lambda@Edge, Deno Deploy, Netlify Edge Functions
35. ADVANTAGES OF EDGE FUNCTIONS @lauragift_
36. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency @lauragift_
37. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency •Zero Cold Start (0ms) @lauragift_
38. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency •Zero Cold Start (0ms) •Improved Application Performace @lauragift_
39. LIMITATIONS OF EDGE FUNCTIONS
40. @lauragift_
41. •Limited compute resources (~10 ms). @lauragift_
42. @lauragift_
43. •No support for browser or Node.js specific features(V8 Engine). @lauragift_
44. The best packages and libraries supported by Cloudflare Workers.
46. @lauragift_
47. •High latency due to data storage limitations. @lauragift_
48. CLOUDFLARE DEVELOPER PLATFORM @lauragift_
49. CLOUDFLARE WORKERS @lauragift_
50. Cloudflare Workers is a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure.
51. @lauragift_
52. ▸ Goodbye to cold starts—support for 0ms worldwide. @lauragift_
53. How is a zero cold start possible?
54. How is a zero cold start possible?
55. @lauragift_
56. ▸ Cost Savings - 100,000 request/daily free & affordable plans to scale. @lauragift_
57. @lauragift_
58. ▸ Edge Storage with KV, Durable Object, R2 & D1. @lauragift_
59. CLOUDFLARE WORKERS HOW IT WORKS? @lauragift_
60. @lauragift_
61. ▸ V8 Isolates Engine @lauragift_
63. VIRTUAL MACHINES V8 ISOLATES A virtual machine (VM) is a software-based computer that exists within another computer’s operating system. Isolates are lightweight contexts that group variables with the code allowed to mutate them. Consumes more memory. Consumes less memory. Start-up time 500ms- 10secs. Start-up time under 5ms.
64. HELLO WORKER EXAMPLE export default { fetch() { return new Response('Hello Worker!'); }, }; @lauragift_
65. PAGES FUNCTIONS @lauragift_
66. Pages enable you build full-stack applications by executing code on the Cloudflare network with help from Cloudflare Workers. @lauragift_
67. FUNCTIONS (BETA) export async function onRequest(context) { // Contents of context object const { request, // same as existing Worker API env, // same as existing Worker API params, // if filename includes [id] or [[path]] waitUntil, // same as ctx.waitUntil in existing Worker API next, // used for middleware or to fetch assets data, // arbitrary space for passing data between middlewares } = context; return new Response("Hello, world!"); } @lauragift_
68. DATA STORAGE ON THE EDGE @lauragift_
69. @lauragift_
70. WORKERS KV @lauragift_
71. Workers KV is a global, low-latency, key-value data store.
72. await NAMESPACE.put(key, value); @lauragift_
73. await NAMESPACE.get(key); @lauragift_
74. await NAMESPACE.delete(key); @lauragift_
75. await NAMESPACE.list(); @lauragift_
76. DURABLE OBJECTS @lauragift_
77. Durable Objects provide low-latency coordination and consistent storage for the Workers platform through two features - global uniquene and a transactional storage API. @lauragift_
78. export class DurableObject { constructor(state, env) {} async fetch(request) { return Response("Hello World") } } @lauragift_
79. R2 @lauragift_
80. R2 storage allows developers to store large amounts of unstructured data without the costly egre bandwidth f s associated with typical cloud storage services. @lauragift_
81. R2 BINDINGS # wrangler.toml [[r2_buckets]] binding = 'MY_BUCKET' # <~ valid JavaScript variable name bucket_name = '<YOUR_BUCKET_NAME>' @lauragift_
83. COMMON USE CASES @lauragift_
84. COMMON USE CASES •Geolocation Based Redirects @lauragift_
85. COMMON USE CASES •Geolocation Based Redirects •A/B Testing @lauragift_
86. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management @lauragift_
87. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management •User Authentication and Authourization @lauragift_
88. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management •User Authentication and Authourization •Localization and Personalization @lauragift_
89. WHEN not TO USE CLOUDFLARE WORKERS
90. @lauragift_
91. USE CASES WONT RECOMMEND Data Latency - Database is not hosted on the Edge! @lauragift_
92. USE CASES WONT RECOMMEND Requires large amount of compute resources to run. @lauragift_
93. Workers Examples @lauragift_
94. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
95. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
96. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
97. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
98. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://cloudflare.com") } }, };
99. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response> { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
100. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response> { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
101. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response> { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
102. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response> { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } }
103. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
104. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
105. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
106. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
107. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
108. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request): Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, };
109. WHAT WE'VE LEARNED TODAY? @lauragift_
110. WHAT WE'VE LEARNED TODAY? •What is the Edge? @lauragift_
111. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? @lauragift_
112. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
113. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem (Workers, KV, R2, DO, D1). @lauragift_
114. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem (Workers, KV, R2, DO, D1). •Use Cases & Examples of Edge Functions. @lauragift_
115. Building applications on the Edge helps bring us close to our end-users, improving their experience and making the web more acce ible to everyone. @lauragift_
116. FURTHER RESOURCES
117. FURTHER RESOURCES • Cloudflare Workers Documentation
118. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation
119. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation • Cloudflare Blog - blog.cloudflare.com
120. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation • Cloudflare Blog - blog.cloudflare.com • Cloudflare Devs Discord
121. THANK YOU! @lauragift_