Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Edge at your fingertips, Literally!

Gift Egwuenu
October 18, 2022
24

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.

Gift Egwuenu

October 18, 2022
Tweet

Transcript

  1. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? @lauragift_
  2. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
  3. 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_
  4. 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_
  5. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. •High latency due

    to large amount of traffic. •Limited opportunity for scaling. @lauragift_
  6. 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_
  7. 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_
  8. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a

    centralized core location (us-east1). @lauragift_
  9. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a

    centralized core location (us-east1). •Cold start after the function is idle. @lauragift_
  10. 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_
  11. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency •Zero Cold Start (0ms)

    •Improved Application Performance @lauragift_
  12. Cloudflare Workers is a serverless execution environment that allows you

    to create new applications or augment existing ones without configuring or maintaining infrastructure.
  13. 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.
  14. HELLO WORKER EXAMPLE export default { fetch() { return new

    Response('Hello Worker!'); }, }; @lauragift_
  15. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B

    Testing •Custom HTTP Headers & Cookie Management @lauragift_
  16. COMMON USE CASES OF EDGE FUNCTIONS •Geolocation Based Redirects •A/B

    Testing •Custom HTTP Headers & Cookie Management •User Authentication and Authourization @lauragift_
  17. 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_
  18. 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_
  19. R2 BINDINGS # wrangler.toml [[r2_buckets]] binding = 'MY_BUCKET' # <~

    valid JavaScript variable name bucket_name = '<YOUR_BUCKET_NAME>' @lauragift_
  20. 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_
  21. 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_
  22. 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_
  23. 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_
  24. 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_
  25. 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_
  26. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://cloudflare.com") } }, };
  27. 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_
  28. 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_
  29. 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_
  30. 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 } } }
  31. 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_
  32. 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_
  33. 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_
  34. 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_
  35. 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_
  36. 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); } }, };
  37. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? @lauragift_
  38. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
  39. 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_
  40. 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_
  41. 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_
  42. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation

    • Cloudflare Blog - blog.cloudflare.com • Cloudflare Devs Discord