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! COMMS API Meetup Lagos, Oct 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 Performance @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. ▸ Say 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. ▸ V8 Isolates Engine @lauragift_
58. 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.
59. @lauragift_
60. ▸ Cost Savings - 100,000 request/daily free & affordable plans to scale. @lauragift_
61. @lauragift_
62. ▸ Edge Storage with KV, Durable Object, R2 & D1. @lauragift_
63. HELLO WORKER EXAMPLE export default { fetch() { return new Response('Hello Worker!'); }, }; @lauragift_
64. COMMON USE CASES OF EDGE FUNCTIONS @lauragift_
65. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects @lauragift_
66. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B Testing @lauragift_
67. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management @lauragift_
68. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management •User Authentication and Authourization @lauragift_
69. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B Testing •Custom HTTP Headers & Cookie Management •User Authentication and Authourization •Localization and Personalization @lauragift_
70. @lauragift_
71. DATA STORAGE ON THE EDGE @lauragift_
72. WORKERS KV @lauragift_
73. Workers KV is a global, low-latency, key-value data store.
74. await NAMESPACE.put(key, value); @lauragift_
75. await NAMESPACE.get(key); @lauragift_
76. await NAMESPACE.delete(key); @lauragift_
77. await NAMESPACE.list(); @lauragift_
78. R2 @lauragift_
79. 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_
80. R2 BINDINGS # wrangler.toml [[r2_buckets]] binding = 'MY_BUCKET' # <~ valid JavaScript variable name bucket_name = '<YOUR_BUCKET_NAME>' @lauragift_
81. D1 @lauragift_
83. export default { async fetch(request, env, ctx) { const { pathname } = new URL(request.url) if (pathname === '/num-products') { const { result } = await env.DB.get(`SELECT count(*) AS num_products FROM Product;`) return new Response(`There are ${result.num_products} products in the D1 database!`) } } } @lauragift_
84. export default { async fetch(request, env, ctx) { const { pathname } = new URL(request.url) if (pathname === '/num-products') { const { result } = await env.DB.get(`SELECT count(*) AS num_products FROM Product;`) return new Response(`There are ${result.num_products} products in the D1 database!`) } } } @lauragift_
85. WHEN not TO USE CLOUDFLARE WORKERS
86. @lauragift_
87. USE CASES WONT RECOMMEND Data Latency - Database is not hosted on the Edge! @lauragift_
88. USE CASES WONT RECOMMEND Requires large amount of compute resources to run. @lauragift_
89. Workers Examples @lauragift_
90. 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_
91. 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_
92. 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_
93. 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_
94. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response> { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://cloudflare.com") } }, };
95. 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_
96. 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_
97. 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_
98. 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 } } }
99. 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_
100. 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_
101. 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_
102. 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_
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); } }, };
105. WHAT WE'VE LEARNED TODAY? @lauragift_
106. WHAT WE'VE LEARNED TODAY? •What is the Edge? @lauragift_
107. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? @lauragift_
108. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
109. 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_
110. 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_
111. 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_
112. FURTHER RESOURCES
113. FURTHER RESOURCES • Cloudflare Workers Documentation
114. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation
115. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation • Cloudflare Blog - blog.cloudflare.com
116. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation • Cloudflare Blog - blog.cloudflare.com • Cloudflare Devs Discord
117. THANK YOU! @lauragift_