Construyendo aplicaciones full-stack en el Edge

Rate this content
Bookmark

Escalar y mantener aplicaciones puede ser un dolor, especialmente cuando se piensa en cómo construir para lograr una experiencia de usuario de la que estés orgulloso. Con todas estas partes en constante cambio para considerar, es importante abstraer partes de tus aplicaciones a servicios globales confiables. En esta charla, discutiremos algunos de los servicios que Cloudflare proporciona y el papel que desempeñan en la mejora de la experiencia general del desarrollador y del usuario.

9 min
21 Oct, 2022

Video Summary and Transcription

Esta charla explora la construcción de aplicaciones full stack en el edge y la línea borrosa entre el desarrollo front-end y back-end. Se discuten los beneficios de utilizar JAMstack y APIs para el desarrollo web escalable. La charla también destaca las mejoras en la tecnología edge, como las funciones sin servidor y el almacenamiento eficiente de datos, y la implementación de funciones y objetos duraderos en la red edge. En general, la charla enfatiza la importancia de ofrecer experiencias de alta calidad con baja latencia a través de la computación en el edge.

Available in English

1. Introducción a la construcción de aplicaciones Full Stack

Short description:

Voy a hablar sobre la construcción de aplicaciones Full Stack en el borde en cinco minutos. Retrocedamos y veamos cómo sería una aplicación básica o qué implicaría. La línea entre el front end y el back end se está volviendo borrosa. Los ingenieros de front end ahora están construyendo aplicaciones Full Stack sin tener que aprender cómo escalar una base de datos o aprender cosas nuevas.

Hola a todos. Wow, muchas gracias a todos. Así que sí, tengo cinco minutos. Así que vamos a empezar. Voy a hablar sobre la construcción de aplicaciones Full Stack en el borde en cinco minutos, ¿verdad? Ok, genial.

Lo primero, mi nombre es Obina. Soy cineasta de fin de semana. Así que si me ven con una cámara por aquí, solo pidan permiso, por supuesto. Últimamente estoy haciendo muchas cosas, y pueden encontrarme en Twitter como Obina Speaks. Esta es una foto mía antes de que mi cabello explotara.

Así que sí, quieres construir una aplicación, pero ¿cómo? ¿Verdad? Antes de empezar a hablar de todas las cosas increíbles que están sucediendo ahora mismo en la industria, retrocedamos y veamos cómo sería una aplicación básica o qué implicaría. Tendrías algunos clientes, algún servidor web que interactúa entre sí. Pasarías JSON de un lado a otro, o se complicaría más al agregar servicios. Oh, ahí va mi teléfono. Sí. Me gusta que todos se rían, porque sí, eso es bueno.

Así que sí, servicios. Tenemos servicios, y todos ellos se conectan entre sí. Y de alguna manera, cuanto más avanzas, más cosas tienes que aprender, y más cosas tienes que agregar. Y lo básico de todo esto es que tienes la vista del cliente, el front end, las APIs, una capa de acceso adata datos, una database, y manejo de errores y cosas así. Pero luego se vuelve un poco confuso. Porque si eres como yo, y solo escribes código de front end, y ahora hay un montón de cosas que necesito aprender, porque todos dicen que es genial, y no van a tener que aprender algo más, y hay un nuevo curso y hay una nueva pestaña, y hay una nueva pestaña, dices, oh, wow. ¿Cómo voy a construir esa startup? Pero lo que sucede actualmente en esta industria, es que la línea entre el front end y el back end se está volviendo borrosa. Tenía este tweet de alguien que perdí. Pero en realidad, estos son los tweets de alguien a las 3AM. Y me hizo preguntarme, ¿qué estaba haciendo despierto a las 3AM? ¿Por qué estaba pensando en esto? Tal vez está construyendo una startup. No lo sé. Pero así es como se ve la línea ahora. Los ingenieros de front end están construyendo aplicaciones Full Stack, y les mostraré una de mis aplicaciones más secretas. Y todo esto sin tener que aprender cómo escalar una database o aprender cosas nuevas que probablemente solo usarán en proyectos ocasionales.

2. Explorando JAMstack y el Edge

Short description:

Estamos entrando en una nueva era de desarrollo web donde las personas construyen aplicaciones tanto de front end como de back end utilizando APIs y servicios. JAMstack, que implica el uso de JavaScript y APIs, permite a los desarrolladores centrarse en escribir código y desplegarlo mientras confían en los servicios para manejar la escalabilidad. Otro desarrollo emocionante es el Edge, que acerca el almacenamiento de datos al lugar donde se genera, permitiendo un acceso global más rápido. Con estas mejoras, los ingenieros se esfuerzan constantemente por ofrecer experiencias de alta calidad con baja latencia.

Y me gusta que esta línea ahora sea una especie de cuerda de saltar. Porque estamos entrando en una nueva era de desarrollo web. Y hemos pasado de tener roles claramente definidos a tener personas que construyen tanto aplicaciones de front end como de back end utilizando APIs y servicios, lo que me lleva al punto de la JAMstack.

¿Alguien ha oído hablar de la JAMstack? Una muestra de manos. Sí. Mi gente está aquí. Eso es bueno. Si no has oído hablar de ello, se trata de usar JavaScript y APIs y confiar en los servicios para escalar. Así que escribe tu código. Escribe lo que puedas. Despliégalo. Deja que alguien más que tenga un servidor más grande y más empleados se preocupe por la escalabilidad y todo eso.

Y desde que comenzamos a usar este nuevo paradigma, nos estamos adentrando en algo más realmente emocionante, el Edge. Dun-nuh-nuh-nuh. Sí, necesitaba poner sonido para eso. Pero sí, tenemos el Edge, ¿verdad? Que es esta cosa realmente genial que todos siguen preguntando, bueno, he oído hablar de esto, pero ¿qué es el Edge? Así que Neil tuvo que hablar de ello. También intentaré explicarlo desde el concepto de la informática en el Edge, que exactamente significa que la estructura de datos , dije estructura, almacenamiento, ahora se está llevando al lugar donde también se genera para que tengas algo genial que se vea así.

Así que si quieres hablar del Edge o tratar de entenderlo, piensa en estos pequeños puntos como centros de datos donde puedo desplegar una función sin servidor o una función en el Edge ahora. Y luego tendrías, cuando despliego esto, no va a ir a un US East 1 o alguna región y obviamente tener a alguien en Singapur o Lagos accediendo a datos desde un lugar en los Estados Unidos. Ahora, estará en una red global. Este es solo un ejemplo. Diferentes empresas tienen todos estos servicios, como Fastly, Fly.io, Deno. También está haciendo lo mismo. Esto es solo datos de Cloudflare. Quiero decir, la representación de lo que tienen como centros de datos.

Y con estas mejoras vienen los hechos simples. Todo lo que hacemos como ingenieros, de alguna manera u otra, se relaciona con ofrecer experiencias de alta calidad a los clientes de todo el mundo con baja latencia. Olvidé agregar esto. Mi sitio web es más rápido que el tuyo, así que sí. Y lo que me encanta de esta industria es que nunca estamos haciendo realmente algo nuevo, en sí mismo.

3. Mejoras y Tecnología Edge

Short description:

Estamos mejorando al pasar de sin servidor a sin origen, desplegando funciones en el edge, mejorando el almacenamiento en caché del edge y siendo más conscientes de las ubicaciones de la base de datos y la entrega de contenido. Te mostraré una aplicación de chat simple impulsada por la tecnología Edge. Utiliza funciones sin servidor desplegadas globalmente, proporcionando baja latencia y almacenamiento eficiente de datos. La aplicación almacena comentarios en una tienda de clave-valor. Estas luces están muy calientes.

Simplemente estamos reemplazando algunas conexiones antiguas por otras más rápidas, llantas que giran, y eso es bueno. Entonces, algunas de las cosas en las que hemos mejorado es pasar de serverless a sin origen, por eso expliqué eso, desplegar funciones en el edge, mejorar el almacenamiento en caché del edge, y todas esas cosas, y obtener ubicaciones de database, ser más conscientes de dónde estás almacenando cosas, dónde se está utilizando, cómo lo estás entregando a los usuarios, y todas esas cosas.

Tengo una demostración muy rápida, y voy a mostrarte algo. Si quieres ver cómo se ve la aplicación, escanea esto. Este es mi proyecto muy, muy, muy secreto que te estoy mostrando. Porque quiero decir, todos ustedes han sido increíbles. Así que si los dioses de la demostración me lo permiten, voy a mostrarte algo muy simple. Así que tengo esta aplicación que realmente se ve así, si la estás viendo desde tu teléfono o computadora portátil. Así es como se ve. Es solo un chat simple. Agrega un comentario. Deja un comentario. Dale me gusta a un amigo. Todas esas cosas. Algunos de mis amigos ya lo probaron. Y esta aplicación está impulsada con tecnología Edge.

Así que tengo algunas funciones sin servidor, si alguna vez has escrito funciones sin servidor, ¿alguien ha desplegado funciones sin servidor? Por favor, levanten la mano. Sí. OK. Gracias. Muchas gracias. Sí, tienes funciones sin servidor, básicamente como JavaScript desplegado en el servidor de otra persona. Pero en este caso, esto se despliega en capas de datos y centros de datos en todo el mundo. Así que si estás en Londres ahora y tal vez desplegaste en la red de Cloudflare, por ejemplo, hay esta cosa realmente genial en workers.cloudflare.com donde puedes ver los segundos de ping que tomaría para que tus funciones se activen. Así que esta función, la última vez que la revisé, estaba a 9 milisegundos de distancia de donde estamos. Así que eso es bastante rápido. Y si envío la misma aplicación a alguien en Lagos, por ejemplo, no tendrían que obtenerla de un centro de datos aquí en Londres. Así que eso es por qué son geniales. Y luego tengo algo muy simple que estoy haciendo aquí, que es donde almaceno comentarios en una tienda de clave-valor. Y sabes lo que no te dicen es que estas luces están muy calientes.

4. Despliegue en la Red Edge y Objeto Duradero

Short description:

Almaceno comentarios e información en una kvstore. Utilizando Cloudflare como punto de referencia, los datos se almacenan en caché más cerca de donde se crean. También tengo funciones desplegadas en la red edge y un objeto duradero para colaboración en tiempo real. La diapositiva final es la más importante. Gracias por escuchar.

Así que estoy sudando. Pero sí. Entonces, puse, oh, gracias. Oh, eso fue muy amable. Así que sí. Pones, como, la información, como los comentarios y cosas así. Almaceno eso en una kvstore.

Y la forma en que estoy utilizando Cloudflare como punto de referencia, esto no significa que solo las personas lo hagan. Sin embargo, tienes esta tienda de clave-valor almacenada en diferentes centros de datos. Así que estoy almacenando en caché donde se crea el data para que pueda ser recuperado más cerca de eso. Pero aún se replica a sí mismo.

Y luego también tengo estas funciones que están desplegadas en la red edge también. Y si escaneaste el código QR, deberías poder ver que el código está en GitHub. Es de código abierto. Siéntete libre de dejarme un comentario. Mi TypeScript no es muy bueno. No me juzgues. Pero también tengo esta cosa aquí llamada un objeto duradero, que es literalmente, si escuchas la charla de Senio, las partes de colaboración en tiempo real de lo que hizo, verías algún uso de este fragmento de código aquí. Y sí, eso es un poco de la demostración que quería mostrar. Pero espera, la diapositiva final es la más importante. Muchas gracias por escuchar. Y que la fuerza te acompañe.

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
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
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
23 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
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.
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.
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 Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
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
Featured WorkshopFree
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
Featured WorkshopFree
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
Top Content
WorkshopFree
- 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 Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
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
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
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.