¿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!

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.

Available in English

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.

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

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
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.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
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.
Understanding React’s Fiber Architecture
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
The Eternal Sunshine of the Zero Build Pipeline
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!
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
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.
Remix Architecture Patterns
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
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.