Introdução
Recentemente estou auxiliando em entrevistas para engenheiros frontend, principalemnte para plenos e seniores. Deixarei anotando aqui, diversos pontos que permeiam o assunto de arquitetura de aplicações web.
Arquitetura:
O que é Arquitetura?
Em um contexto geral, arquitetura refere-se à estrutura fundamental ou organização subjacente de um sistema ou entidade. Quando aplicado a sistemas de software, como aplicativos web, a arquitetura descreve a maneira como os diferentes componentes do sistema interagem entre si e com o ambiente externo.
A arquitetura de software é uma representação abstrata do sistema que define sua estrutura, comportamento, e interações.
Arquitetura na web:
A arquitetura de uma aplicação web engloba:
Frontend e Backend: A separação de responsabilidades entre a interface do usuário (frontend) e a lógica de negócios e dados (backend).
Protocolos de Comunicação: Como os dados são transmitidos entre o cliente e o servidor, geralmente usando protocolos como HTTP(S).
Modelo de Solicitação-Resposta: A maneira como as solicitações do cliente são tratadas e as respostas correspondentes são retornadas pelo servidor.
Roteamento e Navegação: O mecanismo que permite aos usuários navegar entre diferentes páginas ou estados de uma aplicação web.
Persistência de Dados: Como os dados são armazenados e acessados, incluindo o uso de bancos de dados, caches e armazenamento em cache do navegador.
Segurança na Web: Medidas para proteger a aplicação web contra ameaças como ataques de injeção, cross-site scripting (XSS), e outros tipos de ataques.
Escalabilidade e Desempenho: A capacidade do sistema de lidar com um aumento no número de usuários e garantir uma boa experiência de usuário, incluindo estratégias de cache e otimização de carregamento.
Integração de Serviços Externos: Como a aplicação web se integra a serviços externos, como APIs de terceiros.
No contexto React:
Padrões de Arquitetura:
- Arquitetura MVC (Model-View-Controller)
- Arquitetura MVVM (Model-View-ViewModel)
- Arquitetura Flux (comumente usado em aplicações React)
SPA (Single Page Application):
- Conceitos básicos de como funciona uma SPA
- Frameworks populares para criar SPAs (React, Angular, Vue.js)
- Roteamento em SPAs (React-Router)
APIs RESTful:
- Princípios de design de APIs RESTful
- CRUD Operations (Create, Read, Update, Delete) em APIs REST
- Consumo de APIs REST em aplicações frontend
Gerenciamento de Estado:
- Redux (ou outras bibliotecas de gerenciamento de estado como Vuex para Vue.js)
- Context API (no contexto do React)
- Reactive State Management (por exemplo, usando RxJS)
Performance e Otimização:
- Otimização de carregamento de página
- Otimização de renderização
- Lazy loading de recursos
- Estratégias de cache
Segurança:
- XSS (Cross-Site Scripting) e como evitá-lo
- CSRF (Cross-Site Request Forgery) e como evitá-lo
- Autenticação e autorização em aplicações web
Arquitetura de Componentes:
- Componentização e reutilização de componentes
- Atomic Design ou outras abordagens para organizar componentes
Testes:
- Testes unitários para componentes frontend
- Testes de integração
- Ferramentas e bibliotecas de teste (Jest, Mocha, Jasmine, etc.)
Ferramentas de Desenvolvimento:
- Bundlers (Webpack, Parcel)
- Task Runners (Gulp, Grunt)
- Dependency Managers (npm, Yarn)
DevOps e Implantação:
- Continuous Integration (CI) e Continuous Deployment (CD)
- Docker e contêineres
- Implantação em serviços de hospedagem (AWS, Firebase, Netlify)
Padrões de Design e UX/UI:
- Princípios de design responsivo
- Acessibilidade web
- Boas práticas de design de interface do usuário
Monitoramento e Logging:
- Ferramentas de monitoramento de desempenho (como Google Analytics)
- Logging e captura de erros
Referências
- Para aprofundar no tema de Software Design e Arquitetura, recomendo o link:
- https://roadmap.sh/software-design-architecture