Padrões de projeto e boas práticas em JavaScript
Este artigo tem como objetivo fazer uma breve introdução e sugerir dicas de estudo sobre padrões de projetos e boas práticas em Javascript.
Vamos começar por padrões de projetos. O trecho abaixo do livro “Learning JavaScript Design Patterns” responde duas perguntas importantes sobre o tema, “o que é” e “por que”:
Padrões de projeto são soluções reutilizáveis para problemas comuns em projetos de software. Eles são interessantes e fascinantes para explorar em qualquer linguagem de programação.
Uma razão para isso é que eles nos ajudam a construir a experiência combinada de muitos desenvolvedores que vieram antes de nós e a garantir que estruturemos nosso código de maneira otimizada, atendendo às necessidades dos problemas que estamos tentando resolver.
Inclusive, este livro é citado várias vezes neste artigo e é uma excelente fonte de conteúdo para você se aprofundar em design patterns para JavaScript.
Padrões de projeto GoF
De forma geral no mundo de desenvolvimento de software, o livro “Padrões de Projeto: soluções reutilizáveis de software orientado a objetos” de 1994 se destaca como uma grande referência sobre padrões de projetos. Os escritores deste livro ficaram conhecidos como “Gang of Four” (Erich Gamma, Richard Helm, Ralph Johnson e John Vlissides).
O livro define 23 padrões em 3 categorias diferentes, popularmente conhecido como “Padrões GoF”. Segue abaixo a lista com os links para a teoria e implementação de cada padrão aplicado na linguagem JavaScript.
Padrões de criação
Padrões estruturais
Padrões comportamentais
- Chain of Responsibility
- Command
- Interpreter
- Iterator
- Mediator
- Memento
- Observer
- State
- Strategy
- Template Method
- Visitor
É importante avaliar o escopo do seu projeto e as habilidades técnicas da sua equipe antes de utilizar um ou vários padrões de projeto. Os padrões de projeto são necessários para resolver problemas, mas podem gerar problemas (como elevar muito o nível de dificuldade de seu projeto) quando usado de forma demasiada.
MV* Architectural Patterns
Os chamados “MV * Patterns” são muito comuns no back-end desde o século passado. São arquiteturas que essencialmente define as camadas e responsabilidades de cada uma na construção da sua aplicação. Estes padrões também são comumente usados no front-end através de Frameworks como o Angular, Vue e outros.
MVC Pattern
A arquitetura MVC separa a organização da sua aplicação em três camadas: Model, View e Controller. A Model é responsável pelos dados de exibição, geralmente composto por uma coleção de classes que descreve a lógica de negócio. As Views são os componentes de interfaces de usuário, podendo ser arquivos XML, HTML, etc. O Controller ele será responsável por gerenciar as solicitações do usuário, gerenciar a lógica e fazer a comunicação entre a Views e a Model. Para uma explicação aprofundada sobre cada camada do MVC, recomendo a leitura deste tópico.
MVP Pattern
O padrão MVP é derivado do padrão MVC, porém substitui o “Controller” pelo “Presenter”. Para a Model e a View continua valendo as mesmas definições e responsabilidades do padrão anterior. Diferentemente do MVC, a View e o Presenter são completamente dissociados uns dos outros e se comunicam uns com os outros por meio de uma interface. O Presenter contém a lógica de negócio da interface e recebe a entrada dos usuários por meio da View. Neste link você irá encontrar mais informações sobre o padrão e um comparativo com MVC.
MVVM Pattern
Baseado nos dois padrões anteriores, o MVVM separa mais claramente o desenvolvimento de interfaces de usuário do comportamento e lógica de negócios em uma aplicação, com as seguintes camadas: Model, View e ViewModel. A ViewModel é responsável por expor métodos, comandos e outras propriedades que ajudam a manter o estado da exibição, manipulam o modelo como resultado das ações exibidas e disparam eventos na própria exibição. É estabelecido uma ligação de dados bidirecional entre a View e ViewModel, que permite a propagação automática de alterações da ViewModel para a View. Leia mais sobre aqui.
Boas práticas
Seguir boas práticas é algo essencial, na programação e não é diferente quando se trata de JavaScript. Inúmeros problemas podem ser evitados ou contornados seguindo boas práticas, além de facilitar o trabalho em equipe e manutenibilidade do código.
Minha indicação é estudar e seguir o “Airbnb JavaScript Style Guide() {”. Este guia foi criado pela equipe do Airbnb e é um compilado de diversos conceitos, boas práticas e padrões para JavaScript. Ele é frenquentemente atualizado para acompanhar as evoluções da linguagem e tem ampla adoção na comunidade.
Abaixo eu listo todos os tópicos abordados pelo Style Guide com o link para a documentação oficial. Eu traduzi os títulos, porém a versão mais recente não possui tradução integral para português.
- Tipos
- Referências
- Objetos
- Arrays
- Destructuring
- Strings
- Funções
- Arrow Functions
- Classes e Construtores
- Módulos
- Iteradores e Geradores
- Propriedades
- Variáveis
- Hoisting
- Expressões Condicionais & Comparações
- Blocos
- Declarações de Controle
- Comentários
- Espaços em branco
- Vírgulas
- Ponto e vírgulas
- Casting & Coerção de Tipos
- Convenções de nomenclatura
- Métodos Assessores
- Eventos
- jQuery
- Compatibilidade ECMAScript 5
- Estilos ECMAScript 6+ (ES 2015+)
- Biblioteca padrão
- Testes
- Performance
- Recursos
Pode parecer trabalhoso seguir tudo que é proposto, mas o ganho de qualidade e produtividade é perceptível. Vale ressaltar que você pode adotar parcialmente, modificar ou incluir regras para algum cenário específico de sua aplicação e equipe.
Caso você estiver usando alguma biblioteca ou framework JavaScript, é importante você também estudar e utilizar boas práticas para o mesmo. Recomendo a leitura de: