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

Rate this content
Bookmark

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!

13 min
15 Nov, 2023

AI Generated Video Summary

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

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
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!
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.