¡Hola, desarrolladores(as)! ¿Cómo están? ¡Cuánto tiempo ha pasado, ¿verdad? Hoy me gustaría hablarles sobre un proyecto totalmente de código abierto que tiene como objetivo ayudar a toda la comunidad de desarrolladores de JavaScript a aplicar un proyecto E2E (de extremo a extremo) siguiendo los mejores estándares de desarrollo, buenas prácticas, pruebas e integración con los servicios en la nube de Azure: ¡la Aplicación de Referencia en JavaScript - Contoso Real Estate!

El proyecto fue lanzado durante el Microsoft Build 2023 y hoy me gustaría compartir un poco más sobre este proyecto y cómo pueden contribuir a él.

¡Aquí vamos!

¿Qué es la Aplicación de Referencia Empresarial en JavaScript - Contoso Real Estate?

La Aplicación de Referencia en JavaScript: Contoso Real Estate tiene como objetivo ser un proyecto con una arquitectura de referencia que contiene los componentes para crear front-ends modernos de nivel empresarial y aplicaciones nativas en la nube.

Aquí tienen un video teaser que uno de los colaboradores de este increíble proyecto, Wassim Chegham, hizo para mostrar un poco más sobre el proyecto:

El proyecto sigue las mejores prácticas de estándares de desarrollo, arquitectura y componentes funcionales para aquellos que deseen implementar una aplicación de extremo a extremo con JavaScript e integrada con los Servicios en la Nube de Azure. ¡Y lo mejor de todo, es completamente de código abierto! ¿Código abierto? ¿Cómo es eso?

¿Código abierto? ¡Sí, señores(as)!

¡Sí, señores! El proyecto es completamente de código abierto y ¡ustedes pueden contribuir a él!

flowchart TD
    %%
    subgraph Internet
    Portal[https://portal.contoso.com]
    Blog[https://blog.contoso.com]
    CMS[https://cms.contoso.com]
    Stripe[https://stripe.contoso.com]
    API[https://api.contoso.com]
    end
    subgraph Azure API Management
    APIM(API Gateway)
    end
    
    subgraph Azure Static Web Apps
    SWA_Angular([Angular])
    end 

    subgraph Azure Functions
    Functions([Node.js])
    end 

    subgraph Azure Container Apps
    ACA_Next([Next.js])
    ACA_Strapi([Strapi])
    ACA_Stripe([Stripe])
    end 

    subgraph Database/Storage
    DB_PostresSQL[(PostgreSQL

Además, hay numerosos good first issues para aquellos que deseen contribuir al proyecto.

• ✅ Contribuye al proyecto - Good First Issues

El proyecto cuenta con 7 escenarios principales (5 ya completos y otros 2 por venir), que son:

• ✅ API: camada de API criada com Azure API Management: capa de API creada con Azure API Management que se utiliza para gestionar la autorización, el control de velocidad y el almacenamiento en caché. Las tecnologías utilizadas en esta capa son:

  • Azure Identity
  • Azure Key Vault
  • Azure Application Insights
  • MongoDb for Azure Cosmos DB
  • Azure Database for PostgreSQL
  • Azure Functions
  • TypeScript

• ✅ Blog CMS: en esta capa, tenemos una aplicación de CMS (Sistema de Gestión de Contenido) que se utiliza para gestionar el contenido del blog en el lado del backend. Las tecnologías utilizadas en esta capa son:

  • Strapi
  • Azure Storage
  • Azure Database for PostgreSQL
  • TypeScript
  • Azure Application Insights

• ✅ Blog: parte del frontend del blog realizado con Next.js. Las tecnologías utilizadas en esta capa son:

  • Next.js
  • TypeScript
  • Azure Container Apps
  • Azure Application Insights

• ✅ Portal: es una aplicación de portal inmobiliario realizada con Angular y utiliza Azure Static Web Apps para alojar el frontend. Las tecnologías utilizadas en esta capa son:

  • Angular
  • Azure Static Web Apps
  • TypeScript
  • Azure Application Insights

• ✅ Stripe: esta capa es responsable de la integración con Stripe para pagos. Las tecnologías utilizadas en esta capa son:

  • Stripe
  • Fastify
  • TypeScript
  • Azure Container Apps
  • Azure Application Insights

• ✅ Testing: por último, pero no menos importante, ¡la capa de pruebas! Las tecnologías utilizadas en esta capa son:

  • Playwright
  • TypeScript

Sin olvidar las Herramientas de Desarrollo como:

• ✅ Visual Studio Code
• ✅ Azure Static Web Apps CLI
• ✅ GitHub Codespaces
• ✅ GitHub Actions CI/CD
• ✅ GitHub Copilot
• ✅ Azure Developer CLI

Pueden tener una idea de toda la arquitectura del proyecto en la siguiente imagen:

¡Un proyecto que ayudará a toda la comunidad de desarrolladores(as)!

La intención de desarrollar un proyecto de esta escala surgió a partir de numerosos comentarios que recibimos de ustedes, desarrolladores, que desean aprender a crear aplicaciones de extremo a extremo con las tecnologías más modernas del mercado. Por lo general, cuando encontramos ejemplos de proyectos de código abierto, son muy simples y no nos ayudan a comprender cómo desarrollar aplicaciones de extremo a extremo. Nuestro equipo de JavaScript, compuesto por: (en orden alfabético)

• ✅ Aaron Powell ex-integrante do JavaScript Team
• ✅ Dina Berry
• ✅ Glaucia Lemos
• ✅ Natalia Venditto
• ✅ Nitya Narasimhan
• ✅ Wassim Chegham
• ✅ Yohan Lasorsa

¡Esperamos que puedan aprender mucho con este proyecto y que también puedan contribuir con nosotros!

Recursos Importantes

A continuación se presentan algunos recursos importantes para que puedan aprender más sobre el proyecto:

• ✅ GitHub Repository: Contoso Real Estate
• Official Documentation: Enterprise-grade reference for composable architecture
• ✅ Official Blog Launch - Tech Community
• Azure Developer CLI (azd) templates

Y, por supuesto, tenemos una Colección Oficial que les permite realizar un Laboratorio de Aprendizaje sobre las tecnologías utilizadas en el proyecto:

Palabras Finales

Espero que el proyecto Contoso Real Estate les sea de gran ayuda y que puedan aprender mucho de él. Y, por supuesto, no dejen de contribuir al proyecto, ya que es de código abierto y pueden colaborar a través de Issues o Pull Requests.

Realizaremos una transmisión en vivo con el equipo de Reactor Brasil, donde explicaré en detalle el proyecto y realizaremos un laboratorio práctico juntos. Así que no olviden inscribirse en el siguiente enlace:

Próximamente anunciaremos la fecha y hora de la transmisión en vivo en el Canal do YouTube do Microsoft Reactor.

• Página do Meetup: Microsof Reactor Brasil

¡Ah! ¡Casi me olvido de mencionarlo aquí! ¡No olviden suscribirse a mi Canal do Youtube! Y aún durante el año 2023 vendrán muchas cosas geniales en el canal.

Algunas novedades:

• 😃 Microsoft Learn Live Sessions
• 😃 Tutoriales semanales sobre Node.js, TypeScript y JavaScript
• 😃 ¡Y mucho más!

Si les gusta ese tipo de contenido, ¡no se olviden de suscribirse y activar la campanita para enterarse cuando haya nuevos videos! Esta semana ya tendremos una nueva y emocionante serie en el Canal de YouTube.

¡Y para estar al tanto de muchas otras novedades, no dejen de seguirme en Twitter!

¡Nos vemos! ❤️❤️