Design da Arquitetura

Como requisito do projeto, muito da arquitetura é baseada naquilo que o Nuxt já fornece, dessa forma, neste documento irei focar majoritariamente em informações relevantes e nas modificações e alterações feitas em cima da estrutura base entregue pelo framework.

The Composable Architecture (TCA)

A arquitetura utilizada no projeto foi a TCA, que ao meu ver é a ideal para aplicações que podem crescer em funcionalidades, ainda que estas não tenham sido definidas. Esse approach me soa interessante pela possibilidade de usar conceitos simples como componentes reutilizáveis em toda aplicação, mas conseguir modularizar basicamente a qualquer escala, sem gerar um overhead de gestão que microserviços/microfrontends tendem a gerar, sendo muito custoso pra manter em um estado ótimo.

Os principais conceitos ligados em TCA neste projeto estão:

• Componentização com o template, estilos e a lógica do componente definidas claramente
• Uso de Composables, que permitem uma melhor reutilização de lógica entre os componentes
• Gestão de Side Effects com hooks
• Gestão de estado com Stores, seguindo um fluxo unidirecional (State → View → Action)

O Nuxt e o Vue ajudam muito na escolha do uso de TCA pois tem uma estrutura, tanto de pasta quando de arquivos, que deixa muito clara a separação de responsabilidades daquele determinado componente ou funcionalidade.

Estrutura de Pastas

@/
├── app.vue
├── assets
│   └── css
│       └── main.css
├── components
│   ├── **
│   │   ├── **.e2e.spec.ts
│   │   ├── **.spec.ts
│   │   ├── **.types.ts
│   │   └── **.vue
├── composables
│   └── *.ts
├── constants
│   └── *.ts
├── features
│   └── **
│       ├── **
│       │   ├── **.store.ts
│       │   ├── **.types.ts
│       │   └── **.vue
├── layouts
│   └── **.vue
├── pages
│   └── **.vue
├── stores
│   └── **.ts
└── types
    └── **.ts

Os pontos relevantes na estrutura de pastas são:

• Na pasta components ficam os componente ligados a aplicação como um todo, geralmente componentes básicos ligados a UI. Cada componente fica em sua própria pasta e arquivos relacionados a ele, como os de tipagem e de testes, ficam no mesmo nível dessa pasta, pra facilitar suas referências e importação.
• A adição da pasta features, que não existe originalmente na edstrutura base do Nuxt, é uma pasta análoga a de components, mas direcionada a componentes de "negócio", que de fato manipulam os dados da aplicação de forma mais direta. Eles também possuem arquivos ligados direto ao componente no mesmo nível de pasta.

A convenção de nomenclatura de componentes, composables, etc também segue o padrão recomendado do Nuxt.

Design Patterns

• Composite, utilizada nos Shapes, que são os elementos do canvas
• Observer, utilizada para atualizar o store da aplicação. O LiveCanvas utiliza-se disso para manter o código em sync em tempo real. Além disso, a ideia de usar este pattern também está ligada a seu uso em sync entre diferentes usuários, que não foi implementada nesta versão, mas pode se apoiar neste conceito.
• Factory Method, utilizado pelos Renderers para cada um desenhar à sua forma o conteúdo do store em seu próprio canvas.