Building full-stack applications on the Edge

Rate this content
Bookmark

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.

Obinna Ekwuno
Obinna Ekwuno
9 min
21 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

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, Fly.io, 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.

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

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
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
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
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 Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
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
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
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 Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
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.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
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 🤐)
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.