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

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.

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.

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.

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