Olá, Developers! Como vocês estão?! Quanto tempo não é mesmo? Hoje eu gostaria de falar sobre um projeto totalmente Open Source e que tem como objetivo ajudar a toda a Comunidade de Pessoas Desenvolvedoras em JavaScript em como podem aplicar um projeto E2E (ponta a ponta) seguindo com os melhores padrões de desenvolvimento, boas práticas, testes e integrado com Serviços de Nuvem do Azure: a Aplicação de Referência em JavaScript - Contoso Real Estate!
O projeto foi lançado durante o Microsoft Build 2023 e hoje eu gostaria de compartilhar com vocês um pouco mais sobre esse projeto e como vocês podem contribuir com ele!
Aqui vamos nós!
O que é a Aplicação de Referência Empresarial em JavaScript - Contoso Real Estate?
A Aplicação de Referência em JavaScript: Contoso Real Estate tem como objetivo ser um projeto com uma arquitetura referência que contém os componentes para criar Front-Ends modernos de nível empresarial e aplicações nativas em nuvem.
Vejam um vídeo teaser que um dos contribuidores desse incrível projeto Wassim Chegham, fez para mostrar um pouco mais sobre o projeto:
O projeto segue com as melhores práticas de padrões de desenvolvimento, arquitetura e componentes funcionais para quem deseja implementar uma aplicação de ponta a ponta com JavaScript e integrada com os Serviços de Nuvem do Azure. E, melhor totalmente Open Source! Open Source? Como assim?!
Open Source?! Sim, Senhores(as)!
Sim, Senhores(as)! O projeto é totalmente Open Source e vocês podem contribuir com ele!
Azure-Samples
/
contoso-real-estate
Enterprise-grade Reference Architecture for JavaScript
Enterprise-grade Reference Architecture for JavaScript
This repository contains the reference architecture and components for building enterprise-grade modern composable frontends (or micro-frontends) and cloud-native applications. It is a collection of best practices, architecture patterns, and functional components that can be used to build and deploy modern JavaScript applications to Azure.
Table of Contents
You can navigate through the documentation using the table of contents below:
Architecture Diagram
Simplified Flow Diagram
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…Inclusive, há inúmeros good first issues para quem deseja contribuir com o projeto!
Entendendo a Arquitetura do Projeto
O projeto dispõe de 7 cenários principais (5 já prontos e outros 2 para vir) que são:
-
✅ API: camada de API criada com Azure API Management que serve para gerenciar autorização, limitação de taxa e armazenamento em cache. As tecnologias usadas nessa camada são:
-
✅ Blog CMS: nessa camada temos uma aplicação de CMS (Sistema de Gerenciamento de Conteúdo) que é usada para gerenciar, no lado do Back-End, o conteúdo do blog. As tecnologias usadas nessa camada são:
-
✅ Blog: parte do Front-End do blog e feito em Next.js e
-
✅ Portal: é uma aplicação de portal de imóveis que é feita em Angular e que usa o Azure Static Web Apps para hospedar o Front-End. As tecnologias usadas nessa camada são:
-
✅ Stripe: essa camada é responsável pela integração com o Stripe para pagamentos. As tecnologias usadas nessa camada são:
-
✅ Testing: e por fim, não poderia faltar a camada de testes! As tecnologias usadas nessa camada são:
Sem contar as Ferramentas de Desenvolvimento tais como:
- ✅ Visual Studio Code
- ✅ Azure Static Web Apps CLI
- ✅ GitHub Codespaces
- ✅ GitHub Actions CI/CD
- ✅ GitHub Copilot
- ✅ Azure Developer CLI
Vocês podem ter uma noção de toda a arquitetura do projeto na imagem abaixo:
Um Projeto que Ajudará à toda Comunidade de Desenvolvedores(as)!
O intuito de desenvolvermos um projeto dessa escala, veio justamente através de inúmeros feedbacks que recebemos de vocês, desenvolvedores(as), que desejam aprender a desenvolver aplicações de ponta a ponta com as tecnologias mais modernas do mercado. Geralmente sempre quando encontramos exemplos de projetos Open Source, eles são muito simples e não nos ajudam a entender como podemos desenvolver aplicações de ponta a ponta. O nosso time de JavaScript, composta por: (ordem alfabética)
- ✅ Aaron Powell ex-integrante do JavaScript Team
- ✅ Dina Berry
- ✅ Glaucia Lemos
- ✅ Natalia Venditto
- ✅ Nitya Narasimhan
- ✅ Wassim Chegham
- ✅ Yohan Lasorsa
Esperamos que vocês possam aprender muito com esse projeto e que possam contribuir com a gente também!
Recursos Importantes
Abaixo segue alguns recursos importantes para vocês poderem aprender mais sobre o projeto:
- ✅ Repositório Oficial do Projeto: Contoso Real Estate
- Documentação Oficial: Enterprise-grade reference for composable architecture
- ✅ Blog do Anúncio Oficial - Tech Community
- Azure Developer CLI (azd) templates
E, claro temos uma Coleção Oficial a qual dispõe de você poder realizar um Laboratório de Aprendizagem em relação as tecnoogias usadas no projeto:
Palavras Finais
Espero que esse o projeto Contoso Real Estate seja de grande ajuda para vocês e que possam aprender muito com ele. E, claro, não deixem de contribuir com o projeto, pois ele é Open Source e vocês podem contribuir com ele, seja através de Issues ou Pull Requests.
Será realizada uma Live com o Time do Reactor Brasil a qual estarei explicando detalhadamente sobre o projeto e fazendo um hands-on lab com vocês. Então, não deixem de se inscrever no link abaixo:
estaremos incluindo ainda a data e horário da live no Canal do YouTube do Microsoft Reactor
Ah! Já ia esquecer de falar aqui! Não deixem de se inscrever no meu Canal do Youtube! E, ainda durante o ano de 2023 virão muitas outras coisas bem legais no canal!
Algumas das novidades:
- 😃 Microsoft Learn Live Sessions
- 😃 Tutoriais semanais de Node.js, TypeScript & JavaScript
- 😃 E, muito mais!
Se são conteúdos que você curte, então não deixa de se inscreverem e ative o sininho para ficarem sabendo quando teremos vídeo novo! Essa semana já teremos uma série nova incrível lá no Canal do Youtube.
E para ficarem por dentro de várias outras novidades, não deixem de me seguirem lá no Twitter!
E, nos vemos! ❤️❤️
Top comments (3)
Meus Parabéns Glaucia, quando teremos um video passo a passo, para criar o projeto bem simples para explorar todos os recursos?! Fico no aguardo desse material importante e rico de conhecimentos.
O Time do Microsoft Reactor estará agendando uma live para que eu possa realizar uma live explicando com mais detalhes o projeto. Acredito que na segunda semana de Junho.
Show! Obrigado!