Empujando los Límites Hasta el Edge

Rate this content
Bookmark
Slides

Mientras la tecnología avanza cada vez más, el desarrollo web intenta acercarse al usuario. Las CDNs y los servidores web están evolucionando y ahora nos ofrecen la posibilidad de ejecutar lógica del lado del servidor sin depender de un único centro de datos ubicado en un lugar específico del mundo. Presentemos el concepto de The Edge. Veremos cómo funciona y hablaremos sobre las Edge Functions. Discutiremos por qué los principales proveedores de alojamiento están introduciendo esta tecnología y por qué diferentes frameworks de JavaScript están modelando sus enfoques basados en el Edge computing.

9 min
06 Jun, 2023

Video Summary and Transcription

La charla discute el concepto de Edge y su papel en las redes de entrega de contenido (CDNs). Las CDNs están diseñadas para mejorar la entrega de contenido estático pero no pueden distribuir contenido generado dinámicamente. El Edge computing es una arquitectura de red distribuida que procesa datos cerca de la fuente o los usuarios, permitiendo la personalización, contenido dinámico basado en geolocalización, pruebas AV y autenticación de contenido. Frameworks como NexGIS, Bercel, Netlify, AWS y Remix ofrecen capacidades de Edge computing a través de Edge Functions o middleware, permitiendo la ejecución de lógica del lado del servidor más cerca de los usuarios finales.

Available in English

1. Introducción a Edge y CDNs

Short description:

Hola a todos. Mi nombre es Facundo y hoy hablaremos sobre el Edge. Una red de distribución de contenido es un grupo de servidores distribuidos geográficamente que aceleran la entrega de contenido web acercándolo a los usuarios. Las CDNs están diseñadas para entregar contenido estático, pero no pueden distribuir contenido generado dinámicamente.

Hola a todos. Mi nombre es Facundo y hoy hablaremos sobre el Edge. En primer lugar, quiero hacer una breve introducción. Mi nombre es Facundo Giuliani. Soy de Buenos Aires, Argentina. Soy ingeniero de relaciones con desarrolladores en Storyblock. También soy uno de los organizadores de React Buenos Aires, que es la comunidad de React más grande de Argentina, y también organicé NodeConf Argentina, una gran conferencia que esperamos realizar este año. Así que antes de comenzar o antes de entrar en el concepto real de Edge, quería hacer un resumen de cómo navegamos por la web. Entonces, cuando tenemos un dispositivo, digamos un teléfono móvil o una computadora, solicitamos una página web a un servidor web y el servidor web devuelve el contenido que estamos solicitando. Este contenido puede generarse de diferentes formas según el método de renderizado que estemos utilizando, pero básicamente el servidor web generará esta página HTML y nos la entregará. Ese sería el enfoque original de la web para distribuir el contenido.

Pero este enfoque tiene un problema. El problema es que si estamos utilizando un solo servidor web, ese servidor web está ubicado en una ubicación particular en el mundo, y tenemos a todos los usuarios y visitantes enviando la solicitud a ese mismo servidor web al mismo tiempo en esa ubicación particular, lo que trae ciertos problemas. Un problema es que si estamos lejos de ese servidor web, esa solicitud llevará más tiempo en llegar al servidor y luego regresar con la página HTML o el contenido, y no solo eso, podemos sobrecargar ese servidor web si tenemos muchas personas visitando el sitio web al mismo tiempo. Entonces, para superar ese problema, apareció un nuevo concepto o una nueva idea con los años, que es la red de distribución de contenido. Una red de distribución de contenido es un grupo de servidores distribuidos geográficamente. La idea de este grupo es acelerar la entrega de contenido web acercando ese contenido a los usuarios. Entonces, básicamente, lo que tenemos en este caso es este servidor web central que mencionamos antes, pero tenemos el contenido replicado en diferentes nodos, como se llaman, que son servidores en diferentes ubicaciones en el mundo. Y luego esta red, los usuarios pueden acceder al contenido a través del edge que está más cerca de ellos. Entonces tendremos personas de diferentes países visitando el nodo más cercano de la red. Así recibirán el contenido de esos nodos en lugar de tener que enviar su solicitud al servidor único. Hay un servidor de origen que se llama en esta CDN, que es el servidor que va a generar realmente el contenido de forma dinámica, pero ese es el servidor fuente, y luego tenemos los nodos replicados dentro de la CDN. Genial. Eso es bueno. Ese enfoque se utilizaba para la generación de sitios estáticos, que es un método donde generamos contenido en tiempo de compilación y lo tenemos disponible como páginas estáticas para los usuarios que visitan nuestro sitio web. ¿Por qué? Porque las CDNs están diseñadas para entregar contenido estático. Entonces aquí podemos ver el problema. ¿Cuál es el problema? El problema es que el contenido que las CDNs pueden entregar es estático. Entonces, si queremos generar contenido sobre la marcha por el servidor, no podemos usar una CDN, porque solo podemos distribuir páginas HTML, imágenes, videos, todo tipo de activos estáticos o contenido estático. Podemos usar el renderizado del lado del cliente con React, por ejemplo, pero estaríamos generando el contenido en el

2. Edge Computing and Frameworks

Short description:

El edge es una arquitectura de red distribuida que procesa datos cerca de la fuente o los usuarios, minimizando el ancho de banda. Permite la personalización, el contenido dinámico basado en la geolocalización, las pruebas AV y la autenticación de contenido. Frameworks como NexGIS, Bercel, Netlify, AWS y Remix ofrecen capacidades de edge computing a través de funciones o middleware de edge, lo que permite la ejecución de lógica del lado del servidor más cerca de los usuarios finales.

del lado del cliente. Y eso es algo que si queremos que el servidor genere ese contenido para tener un mejor rendimiento, no podemos hacerlo. Entonces, para superar esos dos escenarios o hacer una mezcla de esos dos escenarios, tenemos el edge, que es un nuevo concepto y la idea del edge es tener una arquitectura de red distribuida que procesa los datos lo más cerca posible de la fuente o los usuarios para minimizar el ancho de banda que mencionamos antes. Entonces, la idea es replicar el renderizado del lado del servidor en este enfoque original que tenemos, pero más cerca de los usuarios utilizando el mismo enfoque que usamos para las CDNs y también la misma distribución de los edges y los diferentes servidores en todo el mundo. Entonces, en este caso, esta es una imagen de ejemplo de uno de los ejemplos de estas redes de edge. Esto es de AWS, pero tendremos CDNs con estos servidores que alojan el contenido estático, pero en las mismas redes, en las mismas redes regionales, también tendremos servidores de edge computing que ejecutarán lógica del lado del servidor más cerca de los usuarios. Entonces, en este caso, podemos usar el edge para diferentes escenarios como la personalización en el caso de que queramos enviar contenido personalizado a los diferentes usuarios. Podemos usar la geolocalización para identificar desde dónde visitan nuestro sitio web los usuarios y crear contenido dinámico basado en eso. Podemos implementar enfoques de pruebas AV en el caso de que queramos probar diferentes enfoques en nuestros proyectos, podemos hacerlo basado en este contenido dinámico que podemos generar con el edge computing. Y luego podemos agregar autenticación o seguridad al contenido de nuestros sitios web. Entonces podemos manejar contenido estático pero también contenido dinámico utilizando la misma red de edge que generamos. Mencionaré algunos de los frameworks que permiten trabajar con edge computing y como estamos en una conferencia de React, mencionaré los frameworks de React. El primer ejemplo que quería mencionar es NexGIS. NexGIS ofrece funciones de edge que básicamente son scripts y funciones que pueden ejecutar código de renderizado del lado del servidor, por lo que son pequeños fragmentos de código que pueden ejecutar estas funciones en el edge con renderizado del lado del servidor, pero utilizando el mismo enfoque que usamos para las CDNs. Para ejecutar estas funciones, necesitarás que tu proveedor de alojamiento te lo permita. Los principales proveedores de alojamiento ofrecen diferentes enfoques, pero ofrecen edge computing como Bercel, Netlify, AWS, etc. También podemos usar lo que se llama el middleware. El middleware es una capa o nivel intermedio que puede ejecutar lógica personalizada antes de que se procese una solicitud. En el caso de que estés utilizando Next.js para la generación de sitios estáticos y contenido estático, puedes capturar todas las diferentes solicitudes antes de entregar el contenido estático a los usuarios, y luego puedes ejecutar lógica personalizada del lado del servidor antes de devolver el contenido. Entonces puedes agregar contenido personalizado o agregar contenido dinámico a lo que estás devolviendo al usuario basado en eso.

Y otro framework, otro framework de React que podemos mencionar es Remix. El enfoque de Remix es básicamente centrarse en el renderizado del lado del servidor, y utilizan lo que llaman el edge de generación de Next.js. Entonces, la idea con Remix es que puedes elegir entre un runtime de Node.js o un runtime orientado al edge según la ruta que vayas a gestionar en tu sitio web, puedes ejecutar lógica del lado del servidor utilizando un runtime de Node.js o un función de edge, o un worker, o, bueno, nuevamente, los diferentes nombres que los diferentes proveedores de alojamiento te ofrecen para esta lógica de edge computing. Entonces, la idea es que puedas ejecutar lógica del lado del servidor lo más cerca posible de los usuarios finales que visitan tu sitio web.

Así que muchas gracias. Mantengámonos en contacto y podemos seguir hablando sobre el edge u cualquier otro tema. Puedes contactarme en Twitter y disfruta de la conferencia.

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 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Day Berlin 2022React Day Berlin 2022
29 min
Fighting Technical Debt With Continuous Refactoring
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.
React Summit Remote Edition 2020React Summit Remote Edition 2020
32 min
AHA Programming
Top Content
Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Modern web development is fantastic. There are so many great tools available! Modern web development is exhausting. There are so many great tools available! Each of these sentiments is true. What's great is that most of the time, it's hard to make a choice that is wrong. Seriously. The trade-offs of most of the frameworks and tools you could use to build your application fit within the constraints of the vast majority of apps. Despite this, engineers consistently struggle with analysis paralysis.Let's talk about this, and a solution I am working on for it.

Workshops on related topic

React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
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.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)