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
   

   View Slide

2. WHAT WE'LL COVER?
   @lauragift_
   

   View Slide

3. WHAT WE'LL COVER?
   •What is the Edge?
   @lauragift_
   

   View Slide

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

   View Slide

5. WHAT WE'LL COVER?
   •What is the Edge?
   •How is it different from Serverless Functions?
   •Pros & Cons of Serverless & Edge functions.
   @lauragift_
   

   View Slide

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_
   

   View Slide

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_
   

   View Slide

8. GIFT EGWUENU
   DEVELOPER ADVOCATE @CLOUDFLARE
   EDUCATOR & YOUTUBER
   @LAURAGIFT_
   

   View Slide

9. WHAT IS THE Edge?
   @lauragift_
   

   View Slide

10. The edge is a server geographica y located
    close to your users.
    @lauragift_
    

    View Slide

11. View Slide

12. Where it a started...
    @lauragift_
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. LIMITATIONS OF TRADITIONAL SERVERS
    @lauragift_
    

    View Slide

17. LIMITATIONS OF TRADITIONAL SERVERS
    •Expensive to maintain.
    @lauragift_
    

    View Slide

18. LIMITATIONS OF TRADITIONAL SERVERS
    •Expensive to maintain.
    •High latency due to large amount of traffic.
    @lauragift_
    

    View Slide

19. LIMITATIONS OF TRADITIONAL SERVERS
    •Expensive to maintain.
    •High latency due to large amount of traffic.
    •Limited opportunity for scaling.
    @lauragift_
    

    View Slide

20. SERVERLESS FUNCTIONS
    @lauragift_
    

    View Slide

21. Serverless doesn't mean no servers!
    There's still a server, you just don't manage it.
    @lauragift_
    

    View Slide

22. SERVERLESS PROVIDERS
    @lauragift_
    

    View Slide

23. ADVANTAGES OF SERVERLESS FUNCTIONS
    @lauragift_
    

    View Slide

24. ADVANTAGES OF SERVERLESS FUNCTIONS
    •Hosted by a provider, no need to manage your servers.
    @lauragift_
    

    View Slide

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_
    

    View Slide

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_
    

    View Slide

27. LIMITATION OF SERVERLESS FUNCTIONS
    @lauragift_
    

    View Slide

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

    View Slide

29. LIMITATION OF SERVERLESS FUNCTIONS
    •All functions are stored in a centralized core location (us-east1).
    •Cold start after the function is idle.
    @lauragift_
    

    View Slide

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_
    

    View Slide

31. EDGE FUNCTIONS
    @lauragift_
    

    View Slide

32. EDGE FUNCTIONS
    =
    Serverle Functions at The Edge
    @lauragift_
    

    View Slide

33. REGION EARTH
    

    View Slide

34. EDGE PROVIDERS
    Cloudflare Workers,
    AWS Lambda@Edge,
    Deno Deploy,
    Netlify Edge Functions
    

    View Slide

35. ADVANTAGES OF EDGE FUNCTIONS
    @lauragift_
    

    View Slide

36. ADVANTAGES OF EDGE FUNCTIONS
    •Reduced Latency
    @lauragift_
    

    View Slide

37. ADVANTAGES OF EDGE FUNCTIONS
    •Reduced Latency
    •Zero Cold Start (0ms)
    @lauragift_
    

    View Slide

38. ADVANTAGES OF EDGE FUNCTIONS
    •Reduced Latency
    •Zero Cold Start (0ms)
    •Improved Application Performace
    @lauragift_
    

    View Slide

39. LIMITATIONS OF EDGE FUNCTIONS
    

    View Slide

40. @lauragift_
    

    View Slide

41. •Limited compute resources (~10 ms).
    @lauragift_
    

    View Slide

42. @lauragift_
    

    View Slide

43. •No support for browser or Node.js specific features(V8 Engine).
    @lauragift_
    

    View Slide

44. The best packages and libraries supported by Cloudflare Workers.
    

    View Slide

45. View Slide

46. @lauragift_
    

    View Slide

47. •High latency due to data storage limitations.
    @lauragift_
    

    View Slide

48. CLOUDFLARE DEVELOPER PLATFORM
    @lauragift_
    

    View Slide

49. CLOUDFLARE WORKERS
    @lauragift_
    

    View Slide

50. Cloudflare Workers is a serverless execution environment
    that allows you to create new applications
    or augment existing ones
    without configuring or maintaining infrastructure.
    

    View Slide

51. @lauragift_
    

    View Slide

52. ▸ Goodbye to cold starts—support for 0ms worldwide.
    @lauragift_
    

    View Slide

53. How is a zero cold start possible?
    

    View Slide

54. How is a zero cold start possible?
    

    View Slide

55. @lauragift_
    

    View Slide

56. ▸ Cost Savings - 100,000 request/daily free & affordable plans to
    scale.
    @lauragift_
    

    View Slide

57. @lauragift_
    

    View Slide

58. ▸ Edge Storage with KV, Durable Object, R2 & D1.
    @lauragift_
    

    View Slide

59. CLOUDFLARE WORKERS
    HOW IT WORKS?
    @lauragift_
    

    View Slide

60. @lauragift_
    

    View Slide

61. ▸ V8 Isolates Engine
    @lauragift_
    

    View Slide

62. View Slide

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.
    

    View Slide

64. HELLO WORKER EXAMPLE
    export default {
    fetch() {
    return new Response('Hello Worker!');
    },
    };
    @lauragift_
    

    View Slide

65. PAGES FUNCTIONS
    @lauragift_
    

    View Slide

66. Pages enable you build full-stack applications by executing code on the
    Cloudflare network with help from Cloudflare Workers.
    @lauragift_
    

    View Slide

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_
    

    View Slide

68. DATA STORAGE ON THE EDGE
    @lauragift_
    

    View Slide

69. @lauragift_
    

    View Slide

70. WORKERS KV
    @lauragift_
    

    View Slide

71. Workers KV is a global, low-latency, key-value data store.
    

    View Slide

72. await NAMESPACE.put(key, value);
    @lauragift_
    

    View Slide

73. await NAMESPACE.get(key);
    @lauragift_
    

    View Slide

74. await NAMESPACE.delete(key);
    @lauragift_
    

    View Slide

75. await NAMESPACE.list();
    @lauragift_
    

    View Slide

76. DURABLE OBJECTS
    @lauragift_
    

    View Slide

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_
    

    View Slide

78. export class DurableObject {
    constructor(state, env) {}
    async fetch(request) {
    return Response("Hello World")
    }
    }
    @lauragift_
    

    View Slide

79. R2
    @lauragift_
    

    View Slide

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_
    

    View Slide

81. R2 BINDINGS
    # wrangler.toml
    [[r2_buckets]]
    binding = 'MY_BUCKET' # <~ valid JavaScript variable name
    bucket_name = ''
    @lauragift_
    

    View Slide

82. View Slide

83. COMMON USE CASES
    @lauragift_
    

    View Slide

84. COMMON USE CASES
    •Geolocation Based Redirects
    @lauragift_
    

    View Slide

85. COMMON USE CASES
    •Geolocation Based Redirects
    •A/B Testing
    @lauragift_
    

    View Slide

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

    View Slide

87. COMMON USE CASES
    •Geolocation Based Redirects
    •A/B Testing
    •Custom HTTP Headers & Cookie Management
    •User Authentication and Authourization
    @lauragift_
    

    View Slide

88. COMMON USE CASES
    •Geolocation Based Redirects
    •A/B Testing
    •Custom HTTP Headers & Cookie Management
    •User Authentication and Authourization
    •Localization and Personalization
    @lauragift_
    

    View Slide

89. WHEN not TO USE CLOUDFLARE WORKERS
    

    View Slide

90. @lauragift_
    

    View Slide

91. USE CASES WONT RECOMMEND
    Data Latency - Database is not hosted on the Edge!
    @lauragift_
    

    View Slide

92. USE CASES WONT RECOMMEND
    Requires large amount of compute resources to run.
    @lauragift_
    

    View Slide

93. Workers Examples
    @lauragift_
    

    View Slide

94. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://asos.com/nl")
    }
    },
    };
    @lauragift_
    

    View Slide

95. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://asos.com/nl")
    }
    },
    };
    @lauragift_
    

    View Slide

96. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://asos.com/nl")
    }
    },
    };
    @lauragift_
    

    View Slide

97. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://asos.com/nl")
    }
    },
    };
    @lauragift_
    

    View Slide

98. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://cloudflare.com")
    }
    },
    };
    

    View Slide

99. RETRY/LOG FAILED REQUESTS
    export default {
    async fetch(request: Request): Promise {
    const res = await fetch("https://httpstat.us/503?sleep=2000")
    if (!res.ok) {
    return await fetch("https://httpstat.us/200")
    } else {
    return res
    }
    }
    }
    @lauragift_
    

    View Slide

100. RETRY/LOG FAILED REQUESTS
     export default {
     async fetch(request: Request): Promise {
     const res = await fetch("https://httpstat.us/503?sleep=2000")
     if (!res.ok) {
     return await fetch("https://httpstat.us/200")
     } else {
     return res
     }
     }
     }
     @lauragift_
     

     View Slide

101. RETRY/LOG FAILED REQUESTS
     export default {
     async fetch(request: Request): Promise {
     const res = await fetch("https://httpstat.us/503?sleep=2000")
     if (!res.ok) {
     return await fetch("https://httpstat.us/200")
     } else {
     return res
     }
     }
     }
     @lauragift_
     

     View Slide

102. RETRY/LOG FAILED REQUESTS
     export default {
     async fetch(request: Request): Promise {
     const res = await fetch("https://httpstat.us/503?sleep=2000")
     if (!res.ok) {
     return await fetch("https://httpstat.us/200")
     } else {
     return res
     }
     }
     }
     

     View Slide

103. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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_
     

     View Slide

104. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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_
     

     View Slide

105. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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_
     

     View Slide

106. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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_
     

     View Slide

107. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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_
     

     View Slide

108. A/B TESTING REMOTE ORIGINS
     export default {
     async fetch(request: Request): Promise {
     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);
     }
     },
     };
     

     View Slide

109. WHAT WE'VE LEARNED TODAY?
     @lauragift_
     

     View Slide

110. WHAT WE'VE LEARNED TODAY?
     •What is the Edge?
     @lauragift_
     

     View Slide

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

     View Slide

112. WHAT WE'VE LEARNED TODAY?
     •What is the Edge?
     •How is it different from Serverless Functions?
     •Pros & Cons of Serverless & Edge functions.
     @lauragift_
     

     View Slide

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_
     

     View Slide

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_
     

     View Slide

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_
     

     View Slide

116. FURTHER RESOURCES
     

     View Slide

117. FURTHER RESOURCES
     • Cloudflare Workers Documentation
     

     View Slide

118. FURTHER RESOURCES
     • Cloudflare Workers Documentation
     • Cloudflare Pages Documentation
     

     View Slide

119. FURTHER RESOURCES
     • Cloudflare Workers Documentation
     • Cloudflare Pages Documentation
     • Cloudflare Blog - blog.cloudflare.com
     

     View Slide

120. FURTHER RESOURCES
     • Cloudflare Workers Documentation
     • Cloudflare Pages Documentation
     • Cloudflare Blog - blog.cloudflare.com
     • Cloudflare Devs Discord
     

     View Slide

121. THANK YOU!
     @lauragift_
     

     View Slide