¿Quieres construir una aplicación de nivel empresarial? ¡Desmonta una!

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Construir aplicaciones de nivel empresarial es un desafío. Entonces, ¿cómo puedes aprender a construir una? ¡Comienza desmontando una! ¡Dale la bienvenida a Contoso Real Estate, una implementación de referencia de código abierto que presenta una arquitectura componible con micro-frontends y un backend nativo de la nube, que proporciona el entorno perfecto para la exploración y el aprendizaje prácticos.

En esta charla, daremos una vuelta a la implementación utilizando GitHub Codespaces como nuestro entorno de desarrollo local para explorar el código, construir y previsualizar la aplicación y desplegarla en la nube con un solo comando. Nos sumergiremos bajo el capó para entender la estructura del proyecto (monorepo), la experiencia del desarrollador (herramientas) y los insights de la aplicación (monitorización). ¿Quieres unirte a mí en esta aventura de desmontaje? ¡Solo trae tu navegador y una cuenta de GitHub!

This talk has been presented at React Summit US 2023, check out the latest edition of this React Conference.

FAQ

Nithya Narasimhan es un defensor de la Cloud en el equipo de defensa de la IA en Microsoft.

Una aplicación de calidad enterprise se refiere a aplicaciones que están diseñadas para ser utilizadas en grandes organizaciones, soportando múltiples escenarios y manteniendo altos estándares de rendimiento, seguridad y escalabilidad.

Para aprender a construir una aplicación de calidad enterprise, es recomendable desmontar una implementación de referencia de código abierto para entender su diseño y arquitectura, y luego aplicar esos conocimientos a los requisitos de tu propia aplicación.

Una implementación de referencia es un ejemplo práctico de cómo construir una aplicación siguiendo las mejores prácticas. Estudiar una implementación de referencia puede enseñarte patrones de diseño útiles y ayudarte a entender cómo aplicarlos en tus propios proyectos.

Un devcontainer es un contenedor Docker que se ejecuta en la nube y está configurado a través de un archivo devcontainer.json. Proporciona un entorno de desarrollo consistente y controlado, permitiendo a los desarrolladores construir, depurar y desplegar aplicaciones con facilidad.

GitHub Copilot Chat es un asistente de IA integrado en VS Code que puede responder preguntas, generar código, y ofrecer asistencia adaptada al contexto del proyecto que estás trabajando, mejorando así la eficiencia durante el desarrollo.

AZD (Azure Developer CLI) es una herramienta que simplifica el despliegue de aplicaciones en Azure utilizando un enfoque de infraestructura como código. Automatiza el proceso de despliegue leyendo la configuración desde un archivo YAML asociado al proyecto.

El uso de un monorepositorio facilita la gestión de múltiples proyectos o componentes de una aplicación bajo un mismo repositorio, mejorando la integración y colaboración entre equipos al mantener toda la base de código y sus dependencias en un único lugar.

Nitya Narasimhan
Nitya Narasimhan
13 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Nithya Narasimhan discute cómo construir una aplicación de nivel empresarial desmontando una implementación de referencia. El entorno de desarrollo incluye GitHub Codespaces, devcontainer y GitHub Copilot Chat. La aplicación Contoso Real Estate proporciona una experiencia completamente funcional en el navegador. El patrón Composable Enterprise y el diseño API-first son componentes clave. El despliegue se facilita a través de la infraestructura como código y un archivo azure.yml.

1. Construcción de Aplicaciones de Calidad Empresarial

Short description:

Hola, mi nombre es Nithya Narasimhan. Soy un defensor de la nube en el equipo de defensa de la IA en Microsoft. Hoy quiero hablarles sobre cómo pueden construir una aplicación de calidad empresarial desmontando una. Tenemos una brecha de conocimiento entre la construcción de aplicaciones funcionales y aplicaciones listas para producción. Para llenar esta brecha, recomiendo encontrar una implementación de referencia, desmontarla y transferir el conocimiento a su propio proyecto. Nos centraremos en Contoso Real Estate, una implementación de referencia de calidad empresarial de código abierto del equipo JavaScript DevOx en Microsoft.

Hola, mi nombre es Nithya Narasimhan. Soy un defensor de la Cloud en el equipo de defensa de la IA en Microsoft. Y hoy quiero hablarles sobre cómo pueden construir una aplicación de calidad enterprise desmontando una.

Entonces, podrías preguntarte, ¿por qué necesito esta habilidad? Todos hemos estado aquí. Podrías pensar en un escenario en el que te has unido a un nuevo equipo de desarrollo en una organización enterprise, y en el primer día, te enfrentas a una tarea donde te das cuenta de que tienes una brecha en tu aprendizaje porque a tu equipo se le ha encargado construir una aplicación de múltiples escenarios que es de calidad enterprise en conjunto con otros equipos. Y necesitas tomar una decisión sobre el entorno de desarrollo y la design architecture que quieres usar. ¿Qué haces?

El desafío es que tenemos una brecha de conocimiento. La mayoría de nosotros, y es muy parecido a este meme sobre cómo dibujar un caballo, muchos de nosotros conocemos conceptos básicos. Conocemos los bloques de construcción. Hemos construido aplicaciones funcionales que nos pueden ayudar a mostrar demostraciones a pequeñas audiencias. Pero una aplicación de producción es como ese diagrama terminado, la imagen terminada, y entre ese prototipo funcional y la versión lista para producción hay una brecha en el aprendizaje, y esos pequeños detalles faltan en todas las cosas que intentamos aprender.

Entonces, ¿cómo adquirimos habilidades? ¿Cómo llenamos esta brecha? Quiero recomendar que lo hagamos en tres pasos. Primero, encuentra una implementación de referencia que proporcione un ejemplo de lo que quieres construir. Desmóntala para aprender cómo lo hicieron y luego transfiere ese conocimiento a los requisitos de tu propia aplicación. Entonces, al final de esta charla, espero que sepas cómo puedes pasar de haber identificado tu brecha de conocimiento a haber transferido el conocimiento de desmontar una implementación de referencia de open-source a tu propio proyecto.

El primer paso es encontrar una buena muestra de referencia. Lo veo como un proceso de tres criterios. Primero, quieres buscar algo que sea de código abierto porque quieres desempaquetar y mirar debajo para ver cómo se implementaron las cosas. Segundo, una buena muestra de referencia debería enseñarte patterns. No solo quieres implementar cosas. Quieres que tenga algo que sea transferible. Buenas prácticas de design que tengan sentido para otras aplicaciones. Y tercero, quieres un caso de uso que proporcione cobertura para los tipos de requisitos que tienes. Entonces, por ejemplo, si tu aplicación va a tener un escenario de authentication, busca una muestra de referencia que también lo tenga.

Entonces, en esta charla, nos vamos a centrar en Contoso Real Estate. Es una implementación de referencia de calidad enterprise de código abierto del equipo JavaScript DevOx en Microsoft. Ahora, Contoso es una corporación global ficticia. Y la aplicación Contoso Real Estate construye una implementación de referencia de una aplicación de incorporación para nuevos empleados en esa organización. Y como puedes ver, es una implementación de múltiples escenarios. Tiene un escenario de gestión de contenido.

2. Entorno de Desarrollo y Construcción de la Aplicación

Short description:

Tiene un escenario con dos aplicaciones, una aplicación de blog para que los administradores rellenen artículos y una aplicación de portal para que los administradores llenen el sistema de gestión de contenido con alquileres. Los nuevos empleados pueden navegar por los alquileres, guardarlos y reservarlos. Abogamos por los espacios de código de GitHub y un entorno devcontainer para el entorno de desarrollo. GitHub Copilot Chat proporciona un asistente de IA en VS Code. Puedes hacer preguntas, obtener explicaciones, generar código y más. Construye y previsualiza la aplicación en el navegador para validar la implementación de referencia.

Tiene un escenario que tiene dos aplicaciones, una aplicación de blog donde los administradores pueden llenar artículos de blog y hacer que esos blogs sean leídos tanto por invitados como por nuevos empleados, y una aplicación de portal donde los administradores llenan el sistema de gestión de contenido con alquileres en el área. Y los nuevos empleados pueden entonces usar el portal para navegar por los alquileres disponibles, guardarlos en su perfil, y reservarlos para el pago. Pero lo más importante, sabíamos que teníamos que design una architecture que pudiera ser extendida a nuevos escenarios.

Así que al empezar, lo que necesitas hacer si quieres seguir el ritmo es ir adelante y crear una copia de esto, bifurcar el repositorio y usar la URL que he dado en el texto de abajo. Eso es porque esta implementación de referencia está activamente en desarrollo, así que quiero asegurarme de que tienes una rama estable, así que busca aka.ms slash Contoso hyphen real estate, hyphen react, hyphen summit, hyphen 2023. Desmarca la casilla de la rama principal para que esté copiando todas las ramas, y luego busca la rama del react summit en tu bifurcación. En este punto, estamos listos para empezar a deconstruir.

Lo primero que quieres hacer es entender o responder a la pregunta del entorno de desarrollo, ¿cómo deberíamos configurar nuestro entorno de desarrollo? En nuestra implementación de referencia, abogamos por los espacios de código de GitHub o más bien por un entorno devcontainer. Así que déjame mostrarte rápidamente cómo se ve eso. Así que cuando bifurcas el repositorio y cambias a esa rama en particular, quieres ir a ver el menú desplegable de código y empezar un nuevo espacio de código. En mi caso, ya tengo uno en funcionamiento, así que lo dejé caer, y puedes ver que tengo uno en funcionamiento, y cuando lo lanzas, tarda un poco de tiempo, pero cuando terminas, en realidad vas a ver algo como esto.

Así que como puedes ver, tienes lo que parece ser una experiencia de Visual Studio Code justo en tu navegador, pero está conectado a un entorno de runtime que puede ejecutar esta aplicación para ti. Así que echemos un vistazo a lo que es un devcontainer. Así que en este caso en particular, vas a aprender dos cosas. Primero, un devcontainer es un contenedor Docker que se ejecuta en la cloud en el caso de los espacios de código de GitHub, pero el patrón que vas a entender es que utiliza la configuración como código. Ese entorno está definido por un archivo devcontainer.json que puedes registrar junto con tu base de código. Puedes controlar su versión, puedes modificarlo, puedes compartirlo con otros. Y lo que hace es asegurar que cualquiera que use este proyecto esté configurado con el mismo entorno exacto en el que pueden construir, debug, y desplegar.

Una vez que has hecho eso, esto es opcional, pero te animo a que instales GitHub Copilot Chat, y estoy seguro de que te voy a mostrar muy rápidamente por qué es útil. Así que lo que hace GitHub Copilot Chat es que proporciona un asistente de IA, pero ese asistente de IA está sentado justo en VS Code. Así que en mi caso, ya lo he instalado, y cuando hago clic en esto, obtengo un asistente de chat justo en mi experiencia de VS Code. Y lo que eso significa es que cuando estoy atascado con una pregunta en particular, por ejemplo, puedo preguntarle, ¿qué son los espacios de código de GitHub? Y en lugar de salir de esto a Google y luego volver y cambiar de contexto, le pregunto aquí mismo y me da una respuesta en contexto, pero puede hacer más. Puedo preguntarle, así que puedo usar cosas como comandos, como explicar y decir explicar qué hace esto, ¿verdad? Pero ahora lo que está haciendo es que está tomando esto y mirando el archivo que tienes abierto aquí, que es devcontainer.json y diciendo, oh, déjame explicar qué hace esto, que es un devcontainer. Y ahora puedes, y combina los dos y sigue el software, pero quieres entender los beneficios de los espacios de código. Así que lo que tienes es un asistente de IA que se mantiene en línea con tu flujo, pero también tiene el contexto de lo que estás trabajando en tu entorno de desarrollo y puede personalizar sus respuestas para ayudarte. Y como puedes ver aquí, no sólo puedes hacer que explique cosas, puedes hacer que genere código, que lo corrija, que lo simplifique, que cree cuadernos, que cree espacios de trabajo, y también simplemente consultas o instrucciones de forma libre. Así que ahora tienes tu entorno de desarrollo. Sabes que tu código ya está ahí. ¿Qué puedes hacer? A continuación, queremos construir y previsualizar la aplicación justo ahí en el navegador para validar el hecho de que esa implementación de referencia realmente funciona para nuestras necesidades. En mi caso, ya lo tengo en funcionamiento y notarás que en las instrucciones, nos dice cómo empezar a construirlo y previsualizarlo.

3. Entorno de Desarrollo y Funcionalidad de la Aplicación

Short description:

Y lo que necesitas hacer es bifurcar el repositorio, iniciar GitHub Codespaces, luego ejecutar NPM install y NPM start. Así es como se ve la experiencia de Contos. Así que soy un usuario invitado. Puedo navegar por los listados. Ahora para reservarlo, puedo iniciar sesión. Tengo un token de autenticación que se ha utilizado. Puedo intentar reservar esto. La reserva está completa. Puedo ir a mis reservas. Mi historial de pagos muestra que acabo de pagar por ello. También puedo entrar en los listados y navegar por ellos y guardar algo. Tenemos una experiencia completamente funcional aquí mismo en el navegador. ¿Qué podemos hacer a continuación? Ahora vamos a hablar sobre la arquitectura de diseño. La Empresa Componible es un patrón que está impulsado por un diseño orientado a la API.

Y lo que necesitas hacer es bifurcar el repositorio, iniciar GitHub Codespaces, luego ejecutar NPM install y NPM start. Ya lo hice aquí. Y lo que eso me da es este conjunto de puertos que te muestran todos estos diferentes servicios iniciados. Y podemos ver, tenemos una aplicación de portal y puedo lanzar esta aplicación de portal y previsualizar cómo se ve. Nota que eso está corriendo en un contenedor de desarrollo, pero cuando hago clic en él, reenvía ese puerto y puedo verlo en el navegador en mi dispositivo de desarrollo, en mi dispositivo local.

Así es como se ve la experiencia de Contos. Así que soy un usuario invitado. Puedo navegar por los listados. Así que puedo entrar y ver un listado en particular. Y digamos que voy a entrar y ver un amplio apartamento familiar, ¿verdad? Ahora para reservarlo, puedo iniciar sesión. En esta etapa, en realidad está utilizando un emulador porque podemos permitir testing en nuestro entorno local. Pero puedes ver que ahora tengo un token de authentication que se ha utilizado. Y aquí, puedo entrar ahora e intentar reservar uno de estos apartamentos. Así que digamos que elijo algún tipo de período de alquiler. Digamos que planeo ir para el año nuevo, ¿verdad? Y puedo intentar reservar esto. Y cuando hago eso, puedes ver que la reserva está completa. Puedo ir a mis reservas. Y ahora mi historial de reservas muestra que acabo de hacer una nueva reserva para el 15 al 30 de enero. Y puedo ver que mi historial de pagos muestra que acabo de pagar por ello. Espera, hay una cosa más. También puedo entrar en los listados y puedo navegar por ellos y guardar algo. Así que tal vez un encantador apartamento cerca de la estación de tren. Y cuando hago eso y vuelvo a mi perfil, está guardado. Así que puedes ver que tenemos una experiencia completamente funcional aquí mismo en el navegador, lanzada desde el entorno de desarrollo que hemos configurado en Codespaces. Así que ya estamos más de la mitad del camino.

¿Qué podemos hacer a continuación? Ahora vamos a hablar sobre la design architecture. Te diste cuenta en nuestro caso de uso que teníamos múltiples escenarios. Así es como esa architecture nos permite priorizar los escenarios, construir un blog primero, luego añadir el portal, luego añadir authentication, luego añadir pagos, luego añadir búsqueda y así sucesivamente. Y la Empresa Componible es un patrón que está impulsado por un diseño orientado a la API. Empiezas construyendo tu especificación de API primero y usas OpenAPI, y luego puedes permitir que los equipos se vayan y construyan sus componentes contra esta API sin tener dependencias entre ellos.

4. Mapeo de la Arquitectura y Despliegue

Short description:

Y lo interesante en esto que queremos ver es cómo se mapea esta arquitectura. ¿Puedes realmente deconstruirla para averiguar cómo se mapea al contenido en nuestra base de código? Luego vamos al último paso en el proceso. Hemos hecho todo el desarrollo, ahora queremos desplegarlo. Desplegar una aplicación compleja de múltiples escenarios no es fácil. Necesitas aprovisionar el backend. Y está impulsado por otro patrón, infraestructura como código. En tu base de código, encontrarás un archivo azure.yml que describe los recursos y la configuración para tu despliegue en Azure. Con eso, llegamos al final de esta charla.

Y lo interesante en esto que queremos ver es cómo esta architecture se mapea. ¿Puedes realmente deconstruirla para averiguar cómo se mapea al contenido en nuestra base de código? Y puedes ver eso bastante claramente como la documentation te dice, porque estamos usando un mono repositorio ya que tenemos múltiples equipos, y ahora cada uno de esos escenarios se mapea claramente a un paquete en nuestra base de código.

Luego vamos al último paso en el proceso. Hemos hecho todo el desarrollo, ahora queremos desplegarlo. Así que aquí, en realidad solo voy a reproducir este video porque realmente no queremos desplegar en Azure, pero esto es lo último que vas a llevar de la deconstrucción. Desplegar una aplicación compleja de múltiples escenarios no es fácil. Necesitas aprovisionar el backend. Y puedes ver aquí, estamos usando un comando llamado azdprovision. Necesitas aprovisionar el backend o tu cloud con todos los recursos que necesitas, y luego necesitas desplegar tu aplicación y configurar un flujo de trabajo CI-CD para que cada push a producción esté actualizando ese despliegue. Voy a acelerar esto en el punto de interés, pero puedes ver que hay un azddeploy, y al final de esto, ahora tenemos una aplicación en ejecución en la cloud.

Pero, ¿por qué menciono esto? Porque AZD es Azure Developer CLI. Es una herramienta unificada que simplifica tu despliegue desde el espacio de código hasta la cloud con una sola herramienta. Y está impulsado por otro patrón, infraestructura como código. En tu base de código, encontrarás un archivo azure.yml que describe los recursos y la configuración para tu despliegue en Azure. AZD mira este archivo YAML y es capaz de automatizar ese proceso para ti. Con eso, llegamos al final de esta charla. Si hice bien mi trabajo, deberías ser capaz de ver cómo puedes transferir este conocimiento a tus propios escenarios de usuario. Configura un monorepositorio, utiliza Devcontainers para un entorno de desarrollo consistente, design para la composabilidad con un enfoque primero en la API, activa GitHub copilot para que tengas ayuda para entender cómo funcionan las cosas. Despliega con AZD si estás desplegando en Azure. Puedes obtener más información sobre los otros elementos de esa lista. Esto es lo que aprendimos hoy, pero te dejo con tres recursos para consultar. Tuve que comprimir lo que es esencialmente una serie de videos de seis horas en 10 minutos. Te animo a que mires el enlace Learn Live donde deconstruimos esta aplicación paso a paso en cuatro episodios desde nuestro diseño inicial hasta el despliegue. Y espero que te diviertas deconstruyendo tu próxima aplicación de código abierto. Gracias. ♪♪♪

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.
Thinking Like an Architect
Node Congress 2025Node Congress 2025
31 min
Thinking Like an Architect
Top Content
In modern software development, architecture is more than just selecting the right tech stack; it involves decision-making, trade-offs, and considering the context of the business and organization. Understanding the problem space and focusing on users' needs are essential. Architectural flexibility is key, adapting the level of granularity and choosing between different approaches. Holistic thinking, long-term vision, and domain understanding are crucial for making better decisions. Effective communication, inclusion, and documentation are core skills for architects. Democratizing communication, prioritizing value, and embracing adaptive architectures are key to success.
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.

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.
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.