Padrões de projeto e boas práticas em JavaScript

4 min readJan 28, 2019

--

Livros “Padrões de Projeto” e “Learning JavaScript Design Patterns”

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

É 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.

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:

Padrão de projeto com TypeScript e guia de estilo para VueJS