Arquitetura de aplicações frontend enterprise

• Um codebase crescer = ficar mais difícil de entender e de modificar.
• A solução? Manter o codebase pequeno.
• Separação do codebase por domínio & micro frontends to rescue!
• Necessidades como definir relações de dependência entre bibliotecas dentro de um monorepo & verificar dependências foram resolvidas com a adoção do Nx
• Separar o código entre aplicações e bibliotecas
• As aplicações têm o papel de injetar dependências e configurações
• Implementar a maior parte das funcionalidades nas bibliotecas
  • Nas bibliotecas, são escritos não só design system, internacionalização e módulos de terceiros que podem ser usados de forma genérica, mas também até códigos não reutilizáveis, como o hero banner da página inicial, a página de detalhes do produto e o histórico de pedidos.

Bibliotecas Feature

• Basicamente, todos os componentes usados em uma página são escritos na biblioteca Feature com o mesmo nome
  • ex) todos os componentes da página SignInPage do domínio account são escritos na biblioteca account/feature-sign-in
• Componentes compartilhados por duas ou mais páginas do mesmo domínio são separados em uma feature distinta dentro desse domínio
  • ex) se o componente KakaoLoginButton for usado em comum em SignInPage e SignUpPage do domínio account, esse componente será escrito na biblioteca account/feature-social-login
• Componentes compartilhados por páginas de domínios diferentes são separados em uma feature distinta dentro do domínio compartilhado
  • ex) o componente GlobalNavigation, compartilhado entre HomePage do domínio landing e LecturePage do domínio classroom, é escrito na biblioteca shared/feature-navigation

Bibliotecas Shell

• As páginas são criadas combinando componentes das bibliotecas Feature e UI
  • ex) o componente SignInPage é um componente da biblioteca account/shell-kr-web. Nela também existem SignUpPage, PhoneVerificationPage etc.
• A biblioteca Shell é o ponto de entrada de um domínio específico fornecido à aplicação
• É possível fornecer pontos de entrada diferentes para cada aplicação
  • Por exemplo..
  • Os componentes usados no componente HomePage estão escritos na biblioteca landing/feature-home.
  • Mas, mesmo sendo a mesma HomePage, sua composição será diferente dependendo de ser a HomePage do site dos EUA, do Japão ou da Coreia.
  • Portanto, é possível criar bibliotecas shell para cada aplicação que acessa o domínio landing. (shell-us-web, shell-jp-web, shell-kr-web)

Bibliotecas Provider

• Bibliotecas que gerenciam estado compartilhado entre duas ou mais bibliotecas Feature
  • ex) shared/provider-auth-state, que gerencia o estado de login

Bibliotecas UI

• Um conjunto de componentes presentacionais compartilhados entre duas ou mais bibliotecas.

Bibliotecas Utility

• Todos os módulos que não se encaixam nas quatro categorias acima
• Devem fornecer funcionalidades independentes o suficiente para serem testadas e implantadas sem relação com o modelo de domínio da CLASS101.
  • ex) shared/utils-apollo-client, shared/utils-i18n

Aplicações

• Passam a ter apenas o papel de gerenciar configurações e dependências = quase não há código na aplicação