Building full-stack applications on the Edge


Scaling and maintaining applications can be a pain, especially when thinking of how to build to get the user experience to a level that you are proud of. With all these shifting parts to consider, it is important to abstract parts of your applications to global reliable services. In this talk, we will discuss some of the services that Cloudflare provides, and the role they play in improving the overall developer and user experience.

9 min
21 Oct, 2022


Sign in or register to post your comment.

AI Generated Video Summary

This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.

1. Introduction to Building Full Stack Applications

Short description:

I'm going to be talking about building full stack applications on the edge in five minutes. Let's take a step back and look at what the most basic application would look like or would entail. The line between front end and back end keeps getting blurry. Front end engineers are now building full stack applications without having to learn how to scale a database or learn some new stuff.

Hi, everyone. Wow, thank you all so much. So yeah, I have five minutes. So we're going to get right into it. I'm going to be talking about building full stack applications on the edge in five minutes, right? OK, cool.

First thing, my name is Obina. I'm a weekend filmmaker. So if you see me with a camera around here, just ask for permission of course. I'm up to a lot of things recently, and you can find me on Twitter at Obina Speaks. This is a picture of me before my hair blew up.

So yeah, you want to build an application, but like how? Right? Before we start to talk about all the awesome things that are happening right now in the industry, let's take a step back and look at what the most basic application would look like or would entail. You would have some clients, some web server that interacts with each other. You had like some passing JSON around, or it got more complicated as you would go to adding services. Oh, there goes my phone. Yeah. I like that you all laugh, because, yeah, that's good.

So yeah, services. We have services, and all of these connect to each other. And somehow the more you keep going, the more stuff you have to learn, and the more stuff you have to add. And the basics of it all is that you have the client view, the front end, the APIs, some data access layer, some database, and some error handling and stuff. But then it gets a bit confusing. Because if you're like me, and you're just writing front end code, and now there's a bunch of stuff that I need to learn, because everyone says it's cool, and they're not going to have to learn something else, and there's a new course and there's a new tab, and there's a new tab, you're like, oh, wow. How am I going to build that startup? But the thing is, currently in this industry right now, the line between front end and back end keeps getting blurry. I had this tweet by someone that I lost. But this is actually someone's 3AM tweets. And it made me wonder, what was he doing up at 3AM? Why was he thinking about this thing? Maybe he's building a startup. I don't know. But this is what the line kind of looks like now. You have front end engineers building full stack applications, which I will show you one of my top secret applications. And then without having to learn how to scale a database or learn some new stuff that they probably will use only on a one-off projects.

2. Exploring JAMstack and the Edge

Short description:

We're entering into a new era of web development where people build both front end and back end applications using APIs and services. The JAMstack, which involves using JavaScript and APIs, allows developers to focus on writing code and deploying it while relying on services to handle scaling. Another exciting development is the Edge, which brings data storage closer to where it is generated, enabling faster global access. With these improvements, engineers are constantly striving to deliver high-quality experiences with low latency.

And I like that this line now is some sort of a jump rope. Because we're entering into a new era of web development. And we've gone from having clearly defined roles to having people that build both front end and back end applications using APIs and services, which brings me to the point of the JAMstack.

Has anyone heard of the JAMstack? A show of hands. Yes. My people are here. That's good. If you haven't heard of it, it's about using JavaScript and APIs and relying on services to scale. So write your code. Write what you can. Deploy it. Let someone else that has a bigger server and more employees care about the scaling and all of that.

And since we've started using this new paradigm, we are moving into something else that's really exciting, the Edge. Dun-nuh-nuh-nuh. Yeah, I needed to play sound for that. But, yeah, we have the Edge, right? Which is this really cool thing that everyone keeps asking, OK, cool, I've heard about this, but what is the Edge? So Neil had to talk about it. I will also just try to explain it from the concept of Edge computing, which exactly means that data structure, I said structure, storage, is now being brought to the place where it is also generated so that you have something cool that looks like this.

So if you want to talk about the Edge or try to understand it, think of these little dots being data centers where I can deploy a serverless function or an Edge function now. And then you would have, when I deploy this, it doesn't go to a US East 1 or some region and obviously have someone in Singapore or Lagos reaching for data from a place in the US. Now, it's going to be on a global network. This is just an example. Different companies have all of these services, like Fastly,, Deno. It's also doing the same thing. This is just Cloudflare's data. I mean, the representation of what they have as data centers.

And with these improvements comes the simple facts. Everything we do as engineers, in some way or the other, ties into delivering high-quality experiences to the customers around the world with low latency. I forgot to add this. My website is faster than yours, so yeah. And the thing I love about this industry is that we're never really doing anything new, per se.

3. Improvements and Edge Technology

Short description:

We're improving by moving from serverless to originless, deploying functions on the edge, better edge cashing, and being more conscious about database locations and content delivery. I'll show you a simple chat application powered by Edge technology. It uses serverless functions deployed globally, providing low latency and efficient data storage. The application stores comments in a key value store. These lights are very hot.

We're just switching out some old ties for faster ones, rims that spin, and that's good. So some of the things that we've improved on is moving from serverless to originless, which is why I've explained that's deploying functions on the edge, better edge cashing, and all of those things, and getting database locations, being more conscious about where you're storing stuff, where it's being used, how you're delivering it to users, and all of those things.

I have a very quick demo, and I'm going to show you something. If you want to see what the application looks like, scan this. This is my very, very, very secret project that I'm showing you. Because I mean, you all have been amazing. So if the demo gods will allow me, I'm going to show you something very simple. So I have this application that really looks like this, if you're looking at it from your phones or laptops. This is what it looks like. It's just a simple chat. Add some comment. Leave a comment. Like for a friend. All of those things. I had some of my friends test it out already. And this application is powered with Edge technology.

So I have some serverless functions, which if you've ever written serverless, has anyone deployed serverless functions? Show of hands, please. Yes. OK. Thank you. Thank you so much. So yeah, you have serverless functions, basically just like JavaScript deployed on someone else's server. But in this case, this is deployed over data layers and data centers around the world. So if you're in London now and maybe you deployed to Cloudflare's network, for example, there's this really cool thing on where you can see the ping seconds that it would take for your functions to fire. So this function, last time I checked, it was like 9 milliseconds away from where we are. So that's pretty fast. And if I sent the same application to someone in Lagos, for example, they wouldn't have to fetch from a data center here in London. So that's why they're just cool. And then I have a very simple thing I'm doing here, which is where I store comments in some kvstore, which is like a key value store. And you know what they don't tell you is that these lights are very hot.

4. Edge Network Deployment and Durable Object

Short description:

I store comments and information in a kvstore. Using Cloudflare as a point of reference, the data is cached closer to where it is created. I also have functions deployed on the edge network and a durable object for real-time collaboration. The final slide is the most important one. Thank you for listening.

So I'm sweating. But yeah. So I put in like the, oh, thank you. Oh, that was so sweet. So yeah. You put in like the information, like the comments and stuff. I store that in a kvstore.

And the way I'm using Cloudflare as a point of reference, this doesn't mean that only people that do it. However, you have this key value store like stored over different data centers. So I'm caching where the data is created so that it can be retrieved closer to that. But it still replicates itself.

And then I also have like these functions that are deployed on the edge network as well. And if you scanned the QR code, you should be able to see the code is on GitHub. It's open source. Feel free to leave me a comment. My TypeScript is not very good. Don't judge me. But I also have this thing here called a durable object, which is literally, if you listen to Senio's talk, the real-time like collaboration bits of what he did, you would see some use of this bit of code here. And yeah, that's like a bit of the demo I wanted to show. But wait, the final slide is the most important one. Thank you so much for listening.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
24 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance
user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

React Summit 2023React Summit 2023
171 min
React Performance Debugging Masterclass
Workshop Free
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Workshop Free
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Workshop Free
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Workshop Free
- Introduction
- Prerequisites for the workshop
- Fetching strategies: fundamentals
- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)
- Test your build and serve it on Vercel
- Future: Server components VS Client components
- Workshop easter egg (unrelated to the topic, calling out accessibility)
- Wrapping up
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
Workshop Free
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:
What’s CLS and how it’s calculated?
How fonts can cause CLS?
Font loading strategies for minimizing CLS
Recap and conclusion
GraphQL Galaxy 2021GraphQL Galaxy 2021
162 min
Full Stack GraphQL In The Cloud With Neo4j Aura, Next.js, & Vercel
Workshop Free
In this workshop we will build and deploy a full stack GraphQL application using Next.js, Neo4j, and Vercel. Using a knowledge graph of news articles we will first build a GraphQL API using Next.js API routes and the Neo4j GraphQL Library. Next, we focus on the front-end, exploring how to use GraphQL for data fetching with a Next.js application. Lastly, we explore how to add personalization and content recommendation in our GraphQL API to serve relevant articles to our users, then deploy our application to the cloud using Vercel and Neo4j Aura.
Table of contents:
- Next.js overview and getting started with Next.js
- API Routes with Next.js
building a GraphQL API
- Using the Neo4j GraphQL Library
- Working with Apollo Client and GraphQL data fetching in Next.js
- Deploying with Vercel and Neo4j Aura