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.

This talk has been presented at JSNation Live 2021, check out the latest edition of this JavaScript Conference.

FAQ

Un nano satélite es un tipo de satélite muy pequeño y de bajo coste que orbita alrededor de la Tierra. Su función principal es realizar tareas específicas como la observación y transmisión de datos. Si uno de ellos se daña, se puede reemplazar fácilmente.

Webpack es una herramienta que permite agrupar módulos de JavaScript y sus dependencias en un solo archivo. Se utiliza para optimizar el manejo de dependencias y mejorar la carga de aplicaciones web.

En Webpack, la división de código permite separar el código en diferentes archivos o 'fragmentos' que pueden ser cargados dinámicamente cuando se necesiten. Esto mejora la velocidad de carga y la eficiencia de la aplicación.

Utilizar múltiples puntos de entrada en Webpack permite dividir una aplicación en varios archivos independientes, lo que facilita la gestión y actualización de partes específicas de la aplicación sin necesidad de reconstruir todo el proyecto.

La federación de módulos es una función de Webpack que permite a diferentes aplicaciones compartir dinámicamente dependencias y módulos sin duplicar código. Esto se logra configurando aplicaciones 'anfitrionas' y 'remotas' que pueden consumir módulos expuestos por otras aplicaciones.

Los micro-frontends son una técnica de desarrollo que permite construir una aplicación como un conjunto de partes independientes, cada una desarrollada y desplegada por equipos distintos. Webpack puede facilitar este proceso mediante la federación de módulos, permitiendo que distintos micro-frontends compartan componentes y dependencias de manera eficiente.

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
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
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
Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.
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
This Talk discusses the benefits of microservices and containers for building CI-CD pipelines. It explains how container technology enables portability and scalability. The challenges of microservices include network communication and testing in isolation. The Talk introduces Tacton, a cloud-native CICD pipeline for Kubernetes, and highlights the use of GitOps and Argo CD. It also discusses the importance of maintaining referential integrity between microservices and the evolving role of operators in the DevOps world.

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.