El Auge del Borde Dinámico

Rate this content
Bookmark

En los últimos años, la comunidad de aplicaciones web de JS ha visto un creciente enfoque y conciencia en cuanto a rendimiento y escalabilidad. Los días en que los sitios de producción prominentes servían páginas completamente en blanco esperando paquetes monolíticos de megabytes de JavaScript están (¡en su mayoría!) detrás de nosotros.

Una gran parte de esto ha sido una integración más profunda con las CDNs, después de todo, la latencia de ida y vuelta es uno de los principales determinantes del rendimiento para una audiencia global. Pero los frameworks, y las compañías que los respaldan, tienen enfoques diferentes en cómo pueden ser utilizados, y las complejidades operativas que sus estrategias introducen tienen consecuencias reales.

Pero ¿qué pasaría si, en lugar de un origen dinámico que envía instrucciones a una CDN estática, pudieras ejecutar tu aplicación directamente en el borde? Resulta que eso no solo mejora el rendimiento, sino que también simplifica enormemente nuestras vidas en cuanto a implementación y mantenimiento.

FAQ

El borde dinámico se refiere a la implementación de tecnologías de red de entrega de contenido (CDN) y otras soluciones para mejorar el rendimiento de las aplicaciones frontend al reducir la latencia y acelerar la carga de contenido al estar más cerca geográficamente de los usuarios.

Las CDNs mejoran considerablemente la velocidad de carga de las páginas al almacenar copias del contenido en múltiples ubicaciones geográficas, lo que permite servir el contenido desde el punto más cercano al usuario, reduciendo así la latencia y mejorando la experiencia del usuario.

Jamstack es una arquitectura de desarrollo web que utiliza tecnologías de frontend y backend pre-renderizadas y desacopladas, alojadas directamente en una CDN. Esto mejora la estabilidad ya que reduce la dependencia de servidores de origen dinámicos, permitiendo que el contenido estático sea servido rápidamente desde la CDN.

La latencia tiene un impacto significativo en el rendimiento, especialmente en las transferencias de datos a larga distancia. A medida que aumenta la latencia, también lo hace el tiempo necesario para cargar los datos, lo que puede ralentizar significativamente las aplicaciones frontend si no se gestionan adecuadamente.

Los FABs, o paquetes de aplicaciones frontend, son un tipo de tecnología diseñada para optimizar la entrega de aplicaciones frontend. Permiten una fácil implementación en múltiples ubicaciones del edge, mejorando el rendimiento y la escalabilidad al servir la aplicación más cerca del usuario final.

Glen menciona dos estrategias clave: 's-maxage', que permite cachear contenido en la CDN durante un tiempo definido sin requerir revalidación frecuente, y 'stale while revalidate', que ofrece contenido antiguo mientras se verifica y actualiza la versión en caché.

La adquisición permitió a Glen abordar problemas de rendimiento desde la perspectiva de una plataforma global completa, lo cual es emocionante porque permite implementar soluciones en una infraestructura más amplia y robusta, aumentando la eficiencia y el alcance de las optimizaciones de rendimiento.

Moverse a Jamstack puede mejorar significativamente el rendimiento al reducir la carga en el servidor de origen y aumentar la velocidad de entrega del contenido. Sin embargo, también puede presentar nuevos desafíos, como la dependencia del JavaScript del lado del cliente, que podría afectar negativamente el rendimiento en ciertos escenarios.

Los FABs buscan facilitar la implementación y el rendimiento óptimo de las aplicaciones frontend en una variedad de entornos, incluyendo plataformas de edge computing, al permitir que cualquier aplicación, independientemente del framework, se compile en un FAB y se implemente globalmente.

Glen observó que la latencia puede tener un impacto dramático en los tiempos de descarga, especialmente con archivos más grandes y conexiones más lentas, donde la distancia física y los tiempos de respuesta del servidor pueden aumentar considerablemente los tiempos de carga.

Glen Maddern
Glen Maddern
32 min
01 Jul, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La Charla discute el auge del borde dinámico y el pasado, presente y futuro del alojamiento frontend. Se enfatiza el impacto de la latencia en el uso de las CDNs y la relevancia de las CDNs en el desarrollo de aplicaciones JavaScript. Se exploran el uso de CDNs para contenido que cambia rápidamente y los beneficios del enfoque Jamstack. El futuro del borde dinámico se encuentra en plataformas como Cloudflare Workers. La Charla también destaca los beneficios de rendimiento de ejecutar paquetes de aplicaciones frontend (FABs) en el borde y los desafíos que se enfrentan para lograr un rendimiento óptimo.

Available in English: The Rise of the Dynamic Edge

1. Introducción al auge del borde dinámico

Short description:

Hola. Mi nombre es Glen. Mi charla de hoy es sobre el auge del borde dinámico, o otra forma de hablar de ello sería el pasado, presente y futuro del alojamiento frontend. He realizado algunos proyectos de código abierto en el espacio de React. Más recientemente, comencé un proyecto llamado paquetes de aplicaciones frontend, o FABs, que se encuentra en FAB.dev, así como un producto relacionado con implementaciones llamado link.sh. El año pasado, Link fue adquirido por Cloudflare workers. Ahora puedo abordar el mismo problema, pero desde el punto de vista de una plataforma completa, una plataforma global completa, lo cual es bastante emocionante.

De acuerdo. Hola. Mi nombre es Glen. Mi charla de hoy es sobre el auge del borde dinámico, o otra forma de hablar de ello sería el pasado, presente y futuro del alojamiento frontend. Si no me conocen, mi nombre es Glen Madden, ese soy yo en Twitter, esa es probablemente la forma más fácil de ponerse en contacto. He realizado algunos proyectos de código abierto en el espacio de React. Algunos sobre estilos, CSS modules y styled components. Más recientemente, hace un par de años cambié de rumbo y comencé a pensar en el rendimiento en producción y la implementación y comencé un proyecto llamado paquetes de aplicaciones frontend, o FABs, que se encuentra en FAB.dev, así como un producto relacionado con implementaciones llamado link.sh. Emocionantemente, el año pasado Link fue adquirido por Cloudflare workers. Solo llevo un par de meses allí, pero ahora puedo abordar el mismo problema, pero desde el punto de vista de una plataforma completa, una plataforma global completa, lo cual es bastante emocionante.

2. El impacto de la latencia en el uso de CDN

Short description:

Hoy, discutiré cómo las CDNs se han convertido en una parte integral de nuestros flujos de trabajo de aplicaciones frontend. Las CDNs se utilizan ampliamente debido a su distribución geográfica, que desempeña un papel crucial en la reducción de la latencia. Realicé un experimento comparando las velocidades de descarga desde diferentes ubicaciones y descubrí que incluso un pequeño aumento en la latencia puede afectar significativamente los tiempos de descarga. Esto se debe a la forma en que funciona TCP, donde la transferencia de datos inicial es más lenta y aumenta gradualmente. Por lo tanto, es esencial estar cerca del servidor para un rendimiento óptimo.

plataforma global completa, lo cual es bastante emocionante. Así que hoy quería profundizar en algo que encontré realmente interesante en los últimos años al adentrarme en este tema, que es cómo hemos llegado a depender y cómo las CDNs se han convertido en parte de nuestros flujos de trabajo de aplicaciones frontend. Así que para recapitular, una arquitectura de CDN tradicional tiene la CDN entre tus usuarios y tu servidor de origen, tu host real. Y las solicitudes fluyen y las respuestas vuelven. La CDN tomará copias de esas solicitudes, respuestas, dependiendo de algunos algoritmos, algunas directivas. Tu servidor de origen es la verdad absoluta.

Entonces, ¿por qué la gente usa CDNs? Bueno, están en todas partes, ¿verdad? Esta es la red de CloudFlare. Son más de 200 ubicaciones. Pero puede ser un poco sorprendente ver cuán importante es esa distribución geográfica. ¿Por qué necesitan estar en tantas ubicaciones? Así que quería comenzar la charla de hoy analizando algo que había visto hace un par de años, que es el impacto de la latencia. Esto fue un experimento que realicé para una serie web llamada Frontend Center, donde realicé una prueba de ancho de banda o una prueba de velocidad de descarga desde Melbourne, donde vivía en ese momento, contra tres ubicaciones diferentes. Sidney, San José y Londres. Sidney está a solo 15 milisegundos de distancia. San José está al otro lado del Pacífico. Y Londres está a 280 milisegundos por la velocidad de la luz, o como ahora vivo allí, es mucho más largo en avión, déjame decirte.

Entonces, cuando tienes un archivo pequeño, obtienes velocidades de descarga, o tiempos de descarga totales, prácticamente lo que esperarías. Es solo una sola ida y vuelta al servidor. Entonces, cuanto más lejos esté el servidor, más tiempo llevará descargar el archivo. Pero lo que podría ser sorprendente es cuando tienes una conexión rápida a una caja local, y esto es entre dos centros de datos , por lo que no hay restricciones de ancho de banda aquí en absoluto, realmente. Para un archivo de 250 kilobytes, todavía estamos en fracciones de segundo. Pero cuando agregas algo de latencia a esta imagen, las cosas comienzan a ser bastante diferentes. Con 200 kilobytes, ahora estás mirando 2 segundos en el mejor escenario para descargar ese archivo. Y si duplicas la latencia, el mismo efecto se duplica. Ahora esto puede ser sorprendente, porque esos servidores están solo, ya sabes, a 100 o 200 milisegundos más lejos, y sin embargo, los tiempos de descarga tardan 10 veces más, o 30 veces más en algunos casos. Y estos pasos son en realidad la latencia entre esos saltos. Entonces cada salto en el gráfico son 160 milisegundos. Cada salto en la línea roja son 280. Esto es debido a la forma en que TCP, el protocolo, funciona debajo de todo lo demás, donde comienza lento y se acelera a medida que detecta que las condiciones de la red son lo suficientemente buenas. Esto significa que los primeros 100 kilobytes cuestan mucho, ya sabes, que cada 100 kilobytes a partir de entonces, pueden costar cada vez más tu rendimiento. Y mucho más de lo que puedas pensar. Así que

QnA

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

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar
Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Nuestra comprensión del rendimiento y la experiencia del usuario ha evolucionado mucho a lo largo de los años. Las herramientas de desarrollo web necesitan evolucionar de manera similar para asegurarse de que sean centradas en el usuario, accionables y contextuales donde se refiere a las experiencias modernas. En esta charla, Addy te guiará a través de cómo Chrome y otros han estado pensando en este problema y qué actualizaciones han estado haciendo a las herramientas de rendimiento para reducir la fricción para construir grandes experiencias en la web.
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
El motor de juegos de código abierto PlayCanvas está construido específicamente para el navegador, incorporando 10 años de aprendizaje sobre optimización. En esta charla, descubrirás la salsa secreta que permite a PlayCanvas generar juegos con tiempos de carga increíblemente rápidos y tasas de fotogramas sólidas como una roca.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Master Patrones de JavaScript
JSNation 2024JSNation 2024
145 min
Master Patrones de JavaScript
Workshop
Adrian Hajdin
Adrian Hajdin
Durante este masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debe conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final del masterclass, los participantes ganarán confianza en su capacidad para escribir código JavaScript de alta calidad que perdure en el tiempo.
Puntos Cubiertos:
1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
Cómo Ayudará a los Desarrolladores:
- Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento profesional y las oportunidades de avance en la industria del software
Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.