Please enable JavaScript.
Coggle requires JavaScript to display documents.
Mapa mental — Arquitetura Web Moderna - Coggle Diagram
Mapa mental — Arquitetura Web Moderna
Mapa mental — Arquitetura Web Moderna
1. Arquitetura Web Moderna
Integração entre:
Front-end
Back-end
Banco de dados
Comunicação em rede
Objetivo:
Mais desempenho
Escalabilidade
Melhor experiência do usuário
Tecnologias centrais:
HTML5
CSS3
JavaScript
Node.js
MongoDB
Express
Angular / SPA
2. Problema das Arquiteturas Bloqueantes
Processamento síncrono
Requisição espera I/O terminar
Formação de filas
Gargalos de desempenho
Alto custo de escala
Exemplos:
Sistemas com muitos acessos simultâneos
Matrículas online
E-commerce em pico de acesso
3. Revolução do Node.js
Modelo não bloqueante
I/O assíncrono
Single-thread
Alta eficiência em conexões simultâneas
Indicado para:
APIs
Chats
Dashboards
Notificações
Limitação:
Não é ideal sozinho para processamento muito pesado de CPU
4. Event Loop
Núcleo do Node.js
Funciona com:
Fila de eventos
Callbacks
Execução assíncrona
Processo:
Recebe evento
Delega tarefa de I/O
Continua atendendo novas requisições
Retoma resposta quando a tarefa termina
Benefício:
Maior responsividade
5. Comparação de Arquiteturas de Servidor
Multi-thread bloqueante
Ex.: Java tradicional
Nova thread por usuário/requisição
Pode consumir mais memória
Risco de deadlock
Boa para certos cenários corporativos
Event-loop não bloqueante
Ex.: Node.js
Uma thread principal + callbacks
Melhor para alta concorrência
Risco:
Código mal estruturado
Callback hell
6. Comunicação em Tempo Real
HTTP tradicional
Requisição-resposta
Long polling gera sobrecarga
Menor eficiência para tempo real
WebSockets
Conexão persistente
Comunicação bidirecional
Baixa latência
Exemplos:
Chats
Jogos online
Monitoramento em tempo real
Notificações instantâneas
7. Persistência com MongoDB e Mongoose
MongoDB
Banco NoSQL
Orientado a documentos
Estrutura semelhante a JSON
Mais flexível que tabelas rígidas
Mongoose
ODM para Node.js
Adiciona:
Esquemas
Validação
Modelagem
Benefícios:
Organização
Controle dos dados
8. Relacional vs. NoSQL
SQL
Tabelas
Linhas e colunas
Schema rígido
Joins
Indicado para:
Sistemas financeiros
ERP
Controle acadêmico
NoSQL
Coleções
Documentos JSON/BSON
Schema flexível
Dados aninhados
Indicado para:
Redes sociais
Catálogos
Sistemas dinâmicos
9. Front-end Moderno
HTML5:
Semântica
Estrutura
CSS3:
Estilo
Responsividade
Animações
SPA:
Single Page Application
Atualiza partes da tela sem recarregar tudo
Benefícios:
Experiência fluida
Navegação rápida
Exemplos:
Gmail
Trello
Painéis administrativos
10. Stack MEAN
M = MongoDB
E = Express
A = Angular
N = Node.js
Ideia central:
Uma linguagem predominante: JavaScript
Benefícios:
Integração entre camadas
Menor atrito entre front e back
Desenvolvimento full stack
Possibilidade atual:
Comparar com MERN
11. JSON como elo entre camadas
Dado nasce no cliente
Trafega pela API
Pode ser salvo no banco com estrutura parecida
Benefícios:
Menos conversão
Mais produtividade
Depuração facilitada
Exemplo:
Cadastro de usuário
Pedido de compra
Perfil de aluno
12. Automação e Build
Código de desenvolvimento ≠ código de produção
Processo de build:
Minificação
Concatenação
Organização de dependências
Ferramentas citadas:
Grunt
Bower
Contextualização atual:
npm
Webpack
Vite
Benefícios:
Melhor desempenho
Automação
Padronização
13. Fluxo End-to-End da Requisição
Usuário interage com interface
Cliente envia requisição HTTP
Servidor processa
Mongoose valida
MongoDB persiste
Resposta retorna ao cliente
Exemplo:
Cadastro em sistema acadêmico
Compra em e-commerce
Objetivo didático:
Entender o sistema como um todo
14. Resiliência em Produção
Aplicação em produção precisa de:
Proxy reverso
Gerenciador de processos
Entrega de arquivos estáticos
Monitoramento
Componentes:
Nginx
Node.js
Forever
Benefícios:
Alta disponibilidade
Reinício automático
Melhor desempenho
Desafios:
Deploy
Segurança
Logs
Escalabilidade
Ideia central do mapa
Evolução da Web
De arquiteturas bloqueantes
Para arquiteturas modernas orientadas a eventos
Pilar tecnológico
Node.js
Event Loop
WebSockets
MongoDB
SPA
Stack MEAN
Resultado esperado
Aplicações modernas
Escaláveis
Interativas
Integradas
Preparadas para produção