Microfrontends en Sistemas Críticos de Aviación

Rate this content
Bookmark

¿Te están pidiendo que crees lanzamientos más frecuentes con mayor calidad, pero el equipo en la otra oficina está constantemente rompiendo tus características? ¡Los microfrontends podrían ser la respuesta para ti! Durante este vuelo, sobrevolaremos los pros y los contras de las microservicios y las arquitecturas frontend, navegaremos por los aires turbulentos de migrar productos a una nueva arquitectura y finalmente aterrizaremos en nuestro destino de software escalable.

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

Jarred Utt
Jarred Utt
9 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
AWS SafeKit es líder en el mercado de software de control de aeropuertos, gestionando toda la operación de un aeropuerto. Los microfrontends extienden la arquitectura de microservicios al frontend, permitiendo combinar componentes en tiempo de ejecución. La federación de módulos de Webpack es un enfoque popular para cargar módulos remotos. Los microfrontends ofrecen beneficios como actualizaciones incrementales e independencia de implementación, pero también tienen desventajas como un rendimiento deficiente y complejidad. Se recomiendan los microfrontends para aplicaciones empresariales a gran escala con requisitos distintos y la necesidad de experimentación.

1. Introducción a AWS SafeKit y Sistemas de Aviación

Short description:

Hoy vamos a hablar sobre microfunciones y sistemas de aviación críticos para la seguridad. AWS SafeKit es líder en el mercado de software de control de aeropuertos, gestionando toda la operación de un aeropuerto desde la llegada hasta la salida. El tráfico aéreo se duplica cada 15 años y se espera una escasez de capacidad del 50% para 2035. AWS SafeKit trabaja con más de 2,700 aeropuertos y tiene más de 1,200 empleados en 38 oficinas en todo el mundo.

Mi nombre es Jared, y soy líder técnico en AWS SafeKit. Hoy vamos a hablar un poco sobre microfunciones y sistemas de aviación críticos para la seguridad. AWS SafeKit es líder mundial en software de control de aeropuertos y sistemas de guía visual de atraque, y el software del que hablaremos hoy gestiona toda la operación de un aeropuerto desde la llegada hasta la salida, incluyendo el seguimiento en tiempo real de la posición de las aeronaves, la planificación de puertas y posiciones y la integración con todos los sistemas principales para proporcionar una única fuente de verdad. Los aeropuertos están conectados entre sí, al igual que los nodos de una red, y si un nodo es lento o falla, hay un efecto dominó para cada nodo siguiente. Además, el tráfico aéreo se duplica cada 15 años, creciendo a una tasa anual del 4.4%. Se espera una escasez de capacidad del 50% para 2035 en la mitad de los aeropuertos del mundo si no tomamos ninguna medida. Esto significa en última instancia que 237 millones de pasajeros no podrán volar para 2035. Así que abróchense los cinturones, siéntense y disfruten del vuelo. Un poco sobre AWS SafeKit. Somos más de 1,200 empleados en 38 oficinas repartidas por todo el mundo, y trabajamos con más de 2,700 aeropuertos. Yo mismo, he estado divirtiéndome con code durante 13 años. Empecé con mucha robótica, luego pasé a aplicaciones web y móviles, luego obtuve un título en ingeniería informática, y he estado con AWS SafeKit durante los últimos cinco años en diversos roles técnicos. Un dato curioso, en realidad me mudé de Estados Unidos a Suecia hace tres años. Así que ahora que hemos terminado algunos de los controles previos al vuelo, es hora de despegar.

2. Historia e Introducción a las Microfunciones

Short description:

Comenzamos con un poco de historia, comenzando con un simple monolito y eventualmente pasando a la web e introduciendo microservicios. Sin embargo, nos enfrentamos a una pregunta compleja de combinar 60 productos diferentes en una sola aplicación web. Las microfunciones son una extensión de la arquitectura de microservicios al frontend, lo que permite combinar componentes en tiempo de ejecución. La federación de módulos de Webpack es un enfoque popular para lograr esto, facilitando la carga de módulos remotos y la gestión de dependencias.

Comenzamos nuestro viaje con un poco de historia. Nuestra pila de aplicaciones actual ha pasado por algunas reestructuraciones importantes. Comenzamos con un monolito muy simple, un backend en C++ y un frontend en Qt. Comenzamos a tener más demanda de aplicaciones con más funciones y soluciones integradas. Así que, en última instancia, nos mudamos a la web, introdujimos Angular y otros equipos comenzaron a construir nuevos productos en la misma tecnología, y encontramos muchas sinergias en esos productos. Pero con cada vuelo, siempre hay posibilidad de turbulencias. Así que si volvemos a ese monolito tradicional, todos conocemos esta imagen, equipos contribuyendo código en una única base de código. Y llegará un punto en el que es una buena idea separar estas cosas. Tienes un frontend y un backend, tienes una mejor separación de preocupaciones y aceleras tu desarrollo. Y es posible que llegues a un punto en el que el backend crezca tanto que introduzcas microservicios, un concepto muy popular. Y para nosotros, así es como hemos desarrollado productos durante años. Tenemos muchos microservicios separados de las cosas. Pero un día llegas al trabajo y te hacen una pregunta realmente interesante, una pregunta realmente compleja. ¿Podemos tomar 60 de estos diferentes productos y combinarlos en una sola aplicación web? Y para nosotros, los desarrolladores, eso significaba que teníamos 46 aplicaciones y 22 bibliotecas distribuidas en 20 repositorios. Aún peor, estamos repartidos por toda Europa. Tenemos desarrolladores en Suecia, Austria, Alemania, Polonia y el Reino Unido. Y cuando miras por primera vez el problema, es posible que te imagines algo como esto, donde tienes muchos servicios backend y un frontend gigante. Parece realmente aterrador. Afortunadamente, al igual que una aeronave, hay instrumentos y controles que podemos utilizar para facilitarnos la vida. Entonces, la gran pregunta, ¿qué son las microfunciones? Por supuesto, naturalmente es solo una extensión de la arquitectura de microservicios al frontend. Y lo que eso significa es que tomamos nuestros componentes o grupo de componentes y los colocamos en paquetes independientes y luego los combinamos durante la ejecución para crear una sola aplicación en el navegador. Es importante tener en cuenta que esto es independiente del framework. Puedes tener una aplicación React, Vue o Angular ejecutándose en el mismo navegador al mismo tiempo. Es difícil hablar de microfunciones sin mencionar la federación de módulos de Webpack. Y este es el modelo mental original que realmente popularizó la idea de las microfunciones. Te permite tomar compilaciones separadas de Webpack y formar una sola aplicación. Y facilita la carga de estos módulos remotos de forma asíncrona durante la ejecución. Para ti, puede parecer una carga diferida. Y también proporciona mecanismos para gestionar diferentes dependencias entre diferentes compilaciones y tener un tamaño de paquete optimizado.

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.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

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.
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Micro Frontends con Module Federation y React
JSNation Live 2021JSNation Live 2021
113 min
Micro Frontends con Module Federation y React
Workshop
Alex Lobera
Alex Lobera
¿Alguna vez has trabajado en una aplicación monolítica de Next.js? Yo sí, y escalar una gran aplicación de React para que muchos equipos puedan trabajar simultáneamente no es fácil. Con micro frontends, puedes dividir un monolito frontend en piezas más pequeñas para que cada equipo pueda construir e implementar de forma independiente. En este masterclass aprenderás cómo construir aplicaciones de React grandes que escalen utilizando micro frontends.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.