352 lines
10 KiB
Markdown
352 lines
10 KiB
Markdown
# Análise Completa e Plano de Otimização - Aplicativo RDO
|
|
|
|
## 1. Resumo Executivo
|
|
|
|
Este documento apresenta uma análise detalhada da estrutura atual do aplicativo RDO (Relatório Diário de Obra) e propõe um plano abrangente de otimização, refatoração e modernização do código. O objetivo é melhorar a performance, legibilidade, manutenibilidade e seguir as melhores práticas atuais de desenvolvimento.
|
|
|
|
## 2. Análise da Arquitetura Atual
|
|
|
|
### 2.1 Pontos Fortes Identificados
|
|
- ✅ Uso de TypeScript para tipagem estática
|
|
- ✅ Arquitetura baseada em React 18 com hooks modernos
|
|
- ✅ Integração com Supabase para backend-as-a-service
|
|
- ✅ Implementação de React Query para gerenciamento de estado servidor
|
|
- ✅ Uso de Zustand para estado global
|
|
- ✅ Configuração de PWA com Capacitor
|
|
- ✅ Implementação de modo offline com Dexie
|
|
- ✅ Estrutura de pastas organizada
|
|
|
|
### 2.2 Problemas Críticos Identificados
|
|
|
|
#### 2.2.1 Duplicação de Lógica de Estado
|
|
- ❌ **Problema**: Existem dois sistemas paralelos para gerenciamento de obras:
|
|
- `src/hooks/useObras.ts` (useState + useEffect)
|
|
- `src/hooks/queries/useObras.ts` (React Query)
|
|
- `src/stores/useObraStore.ts` (Zustand)
|
|
- ❌ **Impacto**: Inconsistência de dados, complexidade desnecessária, bugs potenciais
|
|
|
|
#### 2.2.2 Configuração TypeScript Permissiva
|
|
- ❌ **Problema**: `tsconfig.json` com `strict: false` e outras verificações desabilitadas
|
|
- ❌ **Impacto**: Perda de benefícios da tipagem estática, bugs em runtime
|
|
|
|
#### 2.2.3 Estrutura de Rotas Repetitiva
|
|
- ❌ **Problema**: Código repetitivo no `App.tsx` com múltiplas rotas similares
|
|
- ❌ **Impacto**: Dificulta manutenção e adiciona verbosidade
|
|
|
|
#### 2.2.4 Falta de Padronização de Componentes
|
|
- ❌ **Problema**: Componentes sem padrão consistente de props e estrutura
|
|
- ❌ **Impacto**: Dificuldade de manutenção e reutilização
|
|
|
|
## 3. Plano de Otimização Detalhado
|
|
|
|
### 3.1 Fase 1: Consolidação da Arquitetura de Estado (Prioridade Alta)
|
|
|
|
#### 3.1.1 Migração para Arquitetura Unificada
|
|
**Objetivo**: Eliminar duplicações e criar uma única fonte de verdade
|
|
|
|
**Ações**:
|
|
1. **Manter apenas React Query + Zustand**:
|
|
- Remover hooks baseados em useState (`useObras.ts`, `useRdos.ts`, etc.)
|
|
- Usar React Query para estado servidor (dados do Supabase)
|
|
- Usar Zustand apenas para estado cliente (UI, configurações)
|
|
|
|
2. **Reestruturar hooks de queries**:
|
|
```typescript
|
|
// Estrutura otimizada
|
|
src/hooks/
|
|
├── queries/
|
|
│ ├── useObrasQuery.ts // React Query apenas
|
|
│ ├── useRdosQuery.ts // React Query apenas
|
|
│ └── useUsersQuery.ts // React Query apenas
|
|
├── stores/
|
|
│ ├── useUIStore.ts // Estado da UI
|
|
│ ├── useConfigStore.ts // Configurações
|
|
│ └── useOfflineStore.ts // Estado offline
|
|
└── index.ts
|
|
```
|
|
|
|
3. **Implementar padrão de custom hooks compostos**:
|
|
```typescript
|
|
// Exemplo: useObra.ts
|
|
export const useObra = (id: string) => {
|
|
const query = useObraQuery(id);
|
|
const mutation = useUpdateObraMutation();
|
|
const uiState = useUIStore();
|
|
|
|
return {
|
|
...query,
|
|
update: mutation.mutate,
|
|
isUpdating: mutation.isPending,
|
|
// Lógica composta
|
|
};
|
|
};
|
|
```
|
|
|
|
#### 3.1.2 Otimização do React Query
|
|
**Configurações aprimoradas**:
|
|
```typescript
|
|
// queryClient.ts otimizado
|
|
export const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 5 * 60 * 1000, // 5 minutos
|
|
gcTime: 10 * 60 * 1000, // 10 minutos
|
|
retry: (failureCount, error) => {
|
|
if (error?.status === 401) return false;
|
|
return failureCount < 3;
|
|
},
|
|
refetchOnWindowFocus: false, // Otimização mobile
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
### 3.2 Fase 2: Modernização do TypeScript (Prioridade Alta)
|
|
|
|
#### 3.2.1 Configuração Strict
|
|
```json
|
|
// tsconfig.json otimizado
|
|
{
|
|
"compilerOptions": {
|
|
"strict": true,
|
|
"noUnusedLocals": true,
|
|
"noUnusedParameters": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"exactOptionalPropertyTypes": true,
|
|
"noUncheckedIndexedAccess": true
|
|
}
|
|
}
|
|
```
|
|
|
|
#### 3.2.2 Melhoria dos Tipos
|
|
1. **Criar tipos específicos do domínio**:
|
|
```typescript
|
|
// types/domain.ts
|
|
export type ObraStatus = 'ativa' | 'pausada' | 'concluida' | 'cancelada';
|
|
export type UserRole = 'admin' | 'engenheiro' | 'mestre_obra' | 'usuario';
|
|
|
|
export interface ObraWithRelations extends Obra {
|
|
responsavel?: Usuario;
|
|
rdos?: RDO[];
|
|
}
|
|
```
|
|
|
|
2. **Implementar branded types para IDs**:
|
|
```typescript
|
|
export type ObraId = string & { readonly brand: unique symbol };
|
|
export type UserId = string & { readonly brand: unique symbol };
|
|
```
|
|
|
|
### 3.3 Fase 3: Refatoração de Componentes (Prioridade Média)
|
|
|
|
#### 3.3.1 Sistema de Design Consistente
|
|
1. **Criar componentes base reutilizáveis**:
|
|
```typescript
|
|
// components/ui/
|
|
├── Button/
|
|
│ ├── Button.tsx
|
|
│ ├── Button.types.ts
|
|
│ └── Button.stories.tsx
|
|
├── Input/
|
|
├── Modal/
|
|
└── Card/
|
|
```
|
|
|
|
2. **Implementar compound components**:
|
|
```typescript
|
|
// Exemplo: Modal compound component
|
|
export const Modal = {
|
|
Root: ModalRoot,
|
|
Header: ModalHeader,
|
|
Body: ModalBody,
|
|
Footer: ModalFooter,
|
|
};
|
|
```
|
|
|
|
#### 3.3.2 Otimização de Performance
|
|
1. **Implementar React.memo estratégico**:
|
|
```typescript
|
|
export const ObraCard = React.memo(({ obra }: { obra: Obra }) => {
|
|
// Componente otimizado
|
|
});
|
|
```
|
|
|
|
2. **Usar React.lazy para code splitting**:
|
|
```typescript
|
|
const ObraDetails = React.lazy(() => import('./pages/ObraDetails'));
|
|
```
|
|
|
|
3. **Implementar virtualization para listas grandes**:
|
|
```typescript
|
|
import { FixedSizeList as List } from 'react-window';
|
|
```
|
|
|
|
### 3.4 Fase 4: Otimização de Rotas (Prioridade Média)
|
|
|
|
#### 3.4.1 Configuração Declarativa de Rotas
|
|
```typescript
|
|
// routes/config.ts
|
|
export const routes = [
|
|
{
|
|
path: '/',
|
|
element: Dashboard,
|
|
protected: true,
|
|
layout: MainLayout,
|
|
},
|
|
{
|
|
path: '/obra/:id',
|
|
element: ObraDetails,
|
|
protected: true,
|
|
layout: null, // Tela cheia
|
|
},
|
|
] as const;
|
|
|
|
// App.tsx simplificado
|
|
export default function App() {
|
|
return (
|
|
<Router>
|
|
<QueryProvider>
|
|
<AuthProvider>
|
|
<RouteRenderer routes={routes} />
|
|
</AuthProvider>
|
|
</QueryProvider>
|
|
</Router>
|
|
);
|
|
}
|
|
```
|
|
|
|
### 3.5 Fase 5: Otimizações de Performance (Prioridade Média)
|
|
|
|
#### 3.5.1 Bundle Optimization
|
|
1. **Configurar Vite para otimização**:
|
|
```typescript
|
|
// vite.config.ts
|
|
export default defineConfig({
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
vendor: ['react', 'react-dom'],
|
|
supabase: ['@supabase/supabase-js'],
|
|
ui: ['@radix-ui/react-dialog', '@radix-ui/react-select'],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
```
|
|
|
|
2. **Implementar preloading estratégico**:
|
|
```typescript
|
|
// Preload de rotas críticas
|
|
const prefetchObraDetails = (obraId: string) => {
|
|
queryClient.prefetchQuery({
|
|
queryKey: ['obra', obraId],
|
|
queryFn: () => getObra(obraId),
|
|
});
|
|
};
|
|
```
|
|
|
|
#### 3.5.2 Otimização de Imagens e Assets
|
|
1. **Implementar lazy loading de imagens**
|
|
2. **Usar WebP com fallback**
|
|
3. **Configurar service worker para cache de assets**
|
|
|
|
### 3.6 Fase 6: Melhorias de DX (Developer Experience)
|
|
|
|
#### 3.6.1 Ferramentas de Desenvolvimento
|
|
1. **Configurar ESLint mais rigoroso**:
|
|
```javascript
|
|
// eslint.config.js
|
|
export default [
|
|
...tseslint.configs.strictTypeChecked,
|
|
{
|
|
rules: {
|
|
'@typescript-eslint/no-unused-vars': 'error',
|
|
'@typescript-eslint/prefer-nullish-coalescing': 'error',
|
|
'react-hooks/exhaustive-deps': 'error',
|
|
},
|
|
},
|
|
];
|
|
```
|
|
|
|
2. **Implementar Prettier com configuração consistente**
|
|
3. **Configurar Husky para pre-commit hooks**
|
|
|
|
#### 3.6.2 Testing Strategy
|
|
1. **Implementar testes unitários com Vitest**
|
|
2. **Testes de integração com Testing Library**
|
|
3. **E2E tests com Playwright**
|
|
|
|
## 4. Cronograma de Implementação
|
|
|
|
### Sprint 1 (2 semanas) - Fundação
|
|
- [ ] Configurar TypeScript strict mode
|
|
- [ ] Consolidar arquitetura de estado (Fase 1)
|
|
- [ ] Remover hooks duplicados
|
|
- [ ] Configurar ferramentas de desenvolvimento
|
|
|
|
### Sprint 2 (2 semanas) - Componentes
|
|
- [ ] Criar sistema de design base
|
|
- [ ] Refatorar componentes principais
|
|
- [ ] Implementar compound components
|
|
- [ ] Otimizar performance com React.memo
|
|
|
|
### Sprint 3 (1 semana) - Rotas e Performance
|
|
- [ ] Refatorar sistema de rotas
|
|
- [ ] Implementar code splitting
|
|
- [ ] Otimizar bundle com Vite
|
|
- [ ] Configurar preloading
|
|
|
|
### Sprint 4 (1 semana) - Finalização
|
|
- [ ] Testes e validação
|
|
- [ ] Documentação
|
|
- [ ] Deploy e monitoramento
|
|
|
|
## 5. Métricas de Sucesso
|
|
|
|
### 5.1 Performance
|
|
- **Bundle size**: Redução de 30%
|
|
- **First Contentful Paint**: < 1.5s
|
|
- **Largest Contentful Paint**: < 2.5s
|
|
- **Time to Interactive**: < 3s
|
|
|
|
### 5.2 Qualidade de Código
|
|
- **TypeScript coverage**: 100%
|
|
- **ESLint errors**: 0
|
|
- **Test coverage**: > 80%
|
|
- **Duplicação de código**: < 5%
|
|
|
|
### 5.3 Developer Experience
|
|
- **Build time**: Redução de 40%
|
|
- **Hot reload**: < 200ms
|
|
- **Type checking**: < 5s
|
|
|
|
## 6. Riscos e Mitigações
|
|
|
|
### 6.1 Riscos Identificados
|
|
1. **Breaking changes durante refatoração**
|
|
- *Mitigação*: Implementar testes abrangentes antes das mudanças
|
|
|
|
2. **Regressões de funcionalidade**
|
|
- *Mitigação*: Refatoração incremental com validação contínua
|
|
|
|
3. **Resistência da equipe às mudanças**
|
|
- *Mitigação*: Documentação clara e treinamento
|
|
|
|
### 6.2 Plano de Rollback
|
|
- Manter branches de feature para cada fase
|
|
- Implementar feature flags para mudanças críticas
|
|
- Monitoramento contínuo em produção
|
|
|
|
## 7. Conclusão
|
|
|
|
Este plano de otimização transformará o aplicativo RDO em uma aplicação moderna, performática e maintível. A implementação incremental garante baixo risco enquanto maximiza os benefícios de cada melhoria.
|
|
|
|
A consolidação da arquitetura de estado e a modernização do TypeScript são as prioridades mais altas, pois impactam diretamente na estabilidade e manutenibilidade do código.
|
|
|
|
Com a implementação completa deste plano, esperamos:
|
|
- **50% de redução** no tempo de desenvolvimento de novas features
|
|
- **30% de melhoria** na performance da aplicação
|
|
- **90% de redução** em bugs relacionados a tipos
|
|
- **Experiência de desenvolvimento** significativamente melhorada |