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

The Edge at your fingertips, Literally!

Gift Egwuenu
October 18, 2022
14

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. 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_
  11. None
  12. Where it a started... @lauragift_

  13. None
  14. None
  15. None
  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 [email protected] 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.

  45. None
  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_

  57. None
  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_

  82. None
  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_