Microscopios: Cómo construir una aplicación moderna modular en un mundo de paquetes

Rate this content
Bookmark

En esta charla exploraremos los grandes beneficios de descomponer una gran aplicación moderna en piezas significativas e independientes, cada una de las cuales puede ser construida, desplegada y cargada por separado. Discutiremos las mejores prácticas y los problemas comunes al intentar aplicar este patrón similar a los microservicios en el caótico mundo del navegador, y veremos cómo construir las piezas adecuadas garantiza un futuro más brillante para tus aplicaciones. Sumergámonos en la historia interminable de la arquitectura moderna del front-end.

Liad Yosef
Liad Yosef
21 min
11 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute la importancia de empaquetar código en el mundo moderno de JavaScript e introduce Webpack como el estándar de facto para empaquetar módulos. Explora técnicas como la división de código, múltiples puntos de entrada y el control del proceso de construcción para optimizar la organización del código y mejorar el rendimiento. La charla también profundiza en conceptos como Universal Model Definition (UMD) y el uso de externals en Webpack para evitar la duplicación de código. Destaca los beneficios de separar y mantener el código en una aplicación, así como el uso de micro-frontends y monorepos para la escalabilidad y colaboración. En general, la charla enfatiza la importancia de la separación de código, la gestión de dependencias y las estrategias eficientes de empaquetado para desarrollar aplicaciones robustas y modulares.

1. Introducción a la Agrupación de Código

Short description:

Bienvenidos a mi charla sobre la agrupación de código en el mundo moderno de JavaScript. Permítanme comenzar con una pequeña historia. El telescopio espacial Hubble, lanzado en 1990, tuvo un problema con su cámara rota. Los astronautas tuvieron que ser entrenados durante tres años para arreglarlo. Hoy en día, tenemos una solución mucho más simple con nano satélites que son pequeños, baratos y fáciles de reemplazar. Esto ilustra la autenticidad de una arquitectura modular.

Hola a todos, bienvenidos a mi charla, microscopios, sobre la agrupación de código en el mundo moderno de JavaScript. Pero antes de comenzar la charla, un poco, una pequeña historia. Así que esta increíble imagen que ven ahora mismo, el Pilar de la Creación, fue tomada por un telescopio espacial. Y este telescopio espacial se llama Hubble. Y Hubble fue lanzado en 1990, costando 4.7 mil millones de dólares para lanzarlo. Y fue un proyecto enorme, tal vez uno de los más grandes que la humanidad haya emprendido. Y fue lanzado, y fue asombroso, y no funcionó, porque algo estaba roto. La cámara estaba rota. Así que no pudieron arreglarlo. No pudieron traerlo de vuelta a la Tierra y arreglarlo. Así que tuvieron que entrenar a los astronautas durante tres años para ir allí arriba y arreglar la cámara. Y hoy en día, tenemos una solución mucho más simple. Así que hoy en día, estamos utilizando nano satélites, nano satélites, cientos de miles de satélites que están orbitando la Tierra. Y son realmente pequeños. Son realmente baratos. Es muy fácil lanzar cada uno de ellos. Y si uno de ellos se rompe, simplemente lo reemplazamos. Simplemente lo desactivamos y lo reemplazamos. Y eso es la autenticidad de una arquitectura modular. En lugar de enviar una cosa grande, un monolito si quieres, envías muchas cosas pequeñas. Y si algo se rompe, simplemente lo arreglas.

2. Gestión del Código JavaScript Agrupado con Webpack

Short description:

Hoy hablaremos sobre el código JavaScript agrupado y cómo manejarlo. En el pasado, las bases de código no se mantenían y los archivos eran grandes y difíciles de entender. Ahora queremos escribir código modular, pero el sistema de módulos del navegador no está completamente listo. Por eso usamos Webpack, el estándar de facto para agrupar módulos. Webpack crea un solo archivo de agrupación que contiene todo el código. Analiza las dependencias y construye un árbol de dependencias, agrupándolas en un paquete ordenado. Sin embargo, Webpack agrupa todo en un solo archivo de forma predeterminada, lo que resulta en paquetes grandes. Para solucionar esto, podemos usar divisiones de código para agrupar el código solo cuando sea necesario.

Soy Riyad Youssef. Soy el arquitecto de cliente en Dooda. Hoy hablaremos un poco sobre el mundo agrupado por encima y más allá. Entonces, ¿cómo gestionamos, cómo manejamos el código JavaScript agrupado? La primera pregunta que probablemente te hagas es ¿por qué? ¿Por qué necesitamos agrupar en absoluto? Tengo mi código, lo tengo en los archivos, ¿por qué necesito agruparlo? Para responder a eso, tenemos que retroceder un poco en la historia, un poco hacia la era de los dinosaurios, donde nuestras bases de código no se mantenían. Nuestros archivos se veían así. Teníamos archivos enormes, muchas líneas. Y si queríamos dividirlos en archivos más pequeños, teníamos que poner muchas etiquetas de script dentro de un documento, y era realmente difícil de mantener. Era realmente difícil de entender qué estaba sucediendo allí.

Entonces, hoy en día, queremos escribir algún tipo de código modular. Tenemos módulos en el navegador, pero aún no está completamente listo, así que simplemente escribimos módulos en nuestro código fuente, ¿verdad? Tenemos un código, un archivo, digamos app.jsx, y tiene dependencias. Tiene la dependencia app-reference, top, bottom y button. Tal vez tengan interdependencias entre sí, y tal vez esas dependencias tengan sus propias dependencias y se conecten entre sí. ¿Cómo manejamos eso? Tenemos Webpack. Webpack es hoy en día la forma estándar, y con un asterisco, porque hay muchas herramientas similares que lo mejoran un poco, pero Webpack es el estándar de facto para agrupar módulos. Así que hoy hablaremos un poco sobre Webpack y cómo usarlo. Así que solo un poco, una introducción a Webpack. Webpack crea un solo archivo, un solo paquete, que contiene todo el código, y lo hace, si no le decimos lo contrario, simplemente le decimos, está bien, le señalamos la entrada principal, el índice, el archivo principal, y le decimos dónde generar la salida.

Webpack funciona de esta manera. Va a la entrada, intenta entender a partir de la entrada cuáles son las dependencias, y las analiza, y de forma recursiva construye todo el árbol de dependencias y tal vez Lodash tenga su propia dependencia, y luego simplemente recopila todas las dependencias, entiende las dependencias y las agrupa. Las agrupa en un paquete ordenado Bundle.js. Básicamente serializa la dependencia con un poco de magia desde arriba, por lo que las serializa en un solo archivo, Bundle.js, y luego podemos tomar este archivo Bundle.js y usarlo en nuestro HTML. Podemos ponerlo en una etiqueta de script, porque eso es algo que los navegadores saben cómo manejar. Pero tenemos un problema, porque Webpack, a menos que se indique lo contrario, agrupará todo en un solo archivo. Aquí puedes ver un gráfico de dependencias. Es un gráfico de dependencias real de una aplicación de tamaño mediano, y si agrupas todo esto juntos, obtienes 15 megabytes de Bundle. Eso es suficiente para desesperar a cualquiera. Pero en Webpack, podemos hacer divisiones de código. Así que podemos definir para Webpack. Tenemos puntos de división en el código, por lo que no queremos agrupar todo en un solo archivo, sino que queremos, desde estos puntos, agrupar en este archivo y luego tener un fragmento dinámico. Así que divide mi código e inclúyelo solo cuando lo necesite. Esta es la forma más fácil de hacerlo.

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

Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
Entendiendo la Arquitectura Fiber de React
React Advanced Conference 2022React Advanced Conference 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
Hemos escuchado mucho sobre la Arquitectura Fiber de React, pero parece que pocos de nosotros la entendemos en profundidad (o tenemos el tiempo para hacerlo). En esta charla, Tejas repasará su mejor intento de entender Fiber (revisado por otros expertos), y lo presentará de una manera 'explicar-como-si-tuviera-cinco años'.
The Eternal Sunshine of the Zero Build Pipeline
React Finland 2021React Finland 2021
36 min
The Eternal Sunshine of the Zero Build Pipeline
For many years, we have migrated all our devtools to Node.js for the sake of simplicity: a common language (JS/TS), a large ecosystem (NPM), and a powerful engine. In the meantime, we moved a lot of computation tasks to the client-side thanks to PWA and JavaScript Hegemony.
So we made Webapps for years, developing with awesome reactive frameworks and bundling a lot of dependencies. We progressively moved from our simplicity to complex apps toolchains. We've become the new Java-like ecosystem. It sucks.
It's 2021, we've got a lot of new technologies to sustain our Users eXperience. It's time to have a break and rethink our tools rather than going faster and faster in the same direction. It's time to redesign the Developer eXperience. It's time for a bundle-free dev environment. It's time to embrace a new frontend building philosophy, still with our lovely JavaScript.
Introducing Snowpack, Vite, Astro, and other Bare Modules tools concepts!
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
React Summit 2022React Summit 2022
17 min
Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro
Top Content
Existen muchas formas de autorizar componentes en React, y hacerlo correctamente puede no ser tan fácil, especialmente cuando los componentes se vuelven más complejos. En esta charla, aprenderás cómo construir componentes React a prueba de futuro. Cubriremos dos enfoques diferentes para construir componentes - Composición y Configuración, para construir el mismo componente utilizando ambos enfoques y explorar sus ventajas y desventajas.
Cómo construir tuberías de CI/CD para una aplicación de microservicios
DevOps.js Conf 2021DevOps.js Conf 2021
33 min
Cómo construir tuberías de CI/CD para una aplicación de microservicios
Top Content
Los microservicios presentan muchas ventajas para ejecutar software moderno, pero también traen nuevos desafíos tanto para las tareas de despliegue como operativas. Esta sesión discutirá las ventajas y desafíos de los microservicios y revisará las mejores prácticas para desarrollar una arquitectura basada en microservicios.Discutiremos cómo la orquestación de contenedores usando Kubernetes o Red Hat OpenShift puede ayudarnos y lo uniremos todo con un ejemplo de tuberías de Integración Continua y Entrega Continua (CI/CD) en OpenShift.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
Descomponiendo Monolito NestJS API en Microservicios GRPC
Node Congress 2023Node Congress 2023
119 min
Descomponiendo Monolito NestJS API en Microservicios GRPC
Workshop
Alex Korzhikov
Alex Korzhikov
El masterclass se centra en conceptos, algoritmos y prácticas para descomponer una aplicación monolítica en microservicios GRPC. Presenta una visión general de los principios de arquitectura, patrones de diseño y tecnologías utilizadas para construir microservicios. Cubre la teoría del marco de trabajo GRPC y el mecanismo de protocol buffers, así como técnicas y especificidades de la construcción de servicios TypeScript aislados en el stack de Node.js. El masterclass incluye una demostración en vivo de un caso de uso de descomposición de una aplicación API en un conjunto de microservicios. Es adecuado para arquitectos, líderes técnicos y desarrolladores que deseen aprender patrones de microservicios.
Nivel: AvanzadoPatrones: DDD, MicroserviciosTecnologías: GRPC, Protocol Buffers, Node.js, TypeScript, NestJS, Express.js, PostgreSQL, TurborepoEstructura de ejemplo: configuración de monorepo, configuración de paquetes, utilidades comunes, servicio de demostraciónEjercicio práctico: refactorizar la aplicación monolítica
Desacoplamiento en Práctica
Node Congress 2023Node Congress 2023
102 min
Desacoplamiento en Práctica
WorkshopFree
Chad Carlson
Chad Carlson
Desplegar aplicaciones desacopladas y de microservicios no es solo un problema que se resuelve el día de la migración. Avanzar con estas arquitecturas depende completamente de cómo será la experiencia del flujo de trabajo de su equipo día a día después de la migración.
La parte más difícil de esto a menudo es la cantidad de proveedores involucrados. Algunos objetivos son más adecuados para frameworks frontend específicos, mientras que otros son más adecuados para CMS y APIs personalizadas. Desafortunadamente, sus suposiciones, flujos de trabajo, APIs y conceptos de seguridad pueden ser bastante diferentes. Si bien hay ciertas ventajas en confiar en un contrato estricto entre aplicaciones, donde el trabajo del equipo backend y frontend se limita a un solo proveedor, esto no siempre es realista. Esto podría ser porque aún están experimentando, o simplemente porque el tamaño de su organización aún no permite este tipo de especialización.
En este masterclass, tendrás la oportunidad de explorar un enfoque diferente y de un solo proveedor para microservicios utilizando Strapi y Next.js como ejemplo. Desplegarás cada aplicación individualmente, estableciendo un flujo de trabajo desde el principio que simplifica la personalización, introduce nuevas características, investiga problemas de rendimiento e incluso permite la intercambiabilidad de frameworks desde el principio.
Estructura:- Comenzando- Descripción general de Strapi- Descripción general del flujo de trabajo de Platform.sh- Desplegar el proyecto- Cambiar servicios- Agregar el frontend
Requisitos previos:- Crear una cuenta de prueba en Platform.sh- Instalar la CLI de Platform.sh
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
Cómo desarrollar, construir e implementar microservicios Node.js con Pulumi y Azure DevOps
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
El masterclass ofrece una perspectiva práctica de los principios clave necesarios para desarrollar, construir y mantener un conjunto de microservicios en el stack Node.js. Cubre los detalles específicos de la creación de servicios TypeScript aislados utilizando el enfoque de monorepo con lerna y yarn workspaces. El masterclass incluye una descripción general y un ejercicio en vivo para crear un entorno en la nube con el framework Pulumi y los servicios de Azure. Las sesiones están dirigidas a los mejores desarrolladores que deseen aprender y practicar técnicas de construcción e implementación utilizando el stack Azure y Pulumi para Node.js.
Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js
JSNation 2023JSNation 2023
117 min
Cómo Convertir Criptomonedas con Microservicios GRPC en Node.js
Workshop
Alex Korzhikov
Andrew Reddikh
2 authors
El masterclass presenta los principios de arquitectura clave, patrones de diseño y tecnologías utilizadas para construir microservicios en el stack de Node.js. Cubre la teoría del marco de trabajo GRPC y el mecanismo de protocol buffers, así como técnicas y especificaciones para construir servicios aislados utilizando el enfoque de monorepo con lerna y yarn workspaces, TypeScript. El masterclass incluye una tarea práctica en vivo para crear una aplicación de conversión de moneda que sigue los paradigmas de microservicios. Es adecuado para desarrolladores que deseen aprender y practicar el patrón de microservicios GRPC con la plataforma Node.js.
Requisitos previos:- Buen entendimiento de JavaScript o TypeScript- Experiencia con Node.js y escribir aplicaciones de backend- Preinstalar Node.js, npm- Preinstalar el Compilador de Protocol Buffer- Preferimos usar VSCode para una mejor experiencia con JavaScript y TypeScript (otros IDE también son aceptables)