Como manter o seu frontend atualizado na prática
Olá pessoal, neste artigo vou trazer um pouco de algumas boas práticas adquiridas ao longo de anos de bastante estudo e aplicação em projetos reais. Hoje, no papel de desenvolvedora especialista, venho incentivando os times com quem trabalho a seguirem essas práticas mantendo as aplicações mais atualizadas e seguras.
Muitos projetos - tanto no frontend como no backend - acabam ficando desatualizados devido a falta de conhecimento e/ou falta de tempo dos desenvolvedores de aplicarem as atualizações devidas. Com a disseminação da arquitetura distribuída temos cada vez mais projetos para darmos manutenção e atenção à qualidade dos mesmos e seus pacotes. Com o passar dos anos, esses débitos técnicos vão se acumulando e ficando cada vez mais difícil a atualização, levando alguns times a optarem por não fazerem as atualizações necessárias ou até mesmo refazerem a aplicação.
Uma aplicação desatualizada pode trazer diversas brechas de segurança, erros de compatibilidade com navegadores e outras plataformas, além de uma performance defasada e consequentemente mais custos — tanto para o desenvolvimento quanto para hospedagem dos sistemas. Portanto, vou trazer algumas dicas práticas e rápidas que podem ajudar você e seu time a manterem os projetos frontends ou outras aplicações que utilizam pacotes javascript mais atualizados, seguros e limpos.
A seguir vou destacar alguns comandos e práticas que podem te auxiliar com essas atualizações, porém antes de começar a prática é importante que você tenha em mente como funciona o versionamento de pacotes no npm. Se você já possui esse conhecimento pode pular o item abaixo.
Versionamento de pacotes
O ecossistema de pacotes javascript segue o versionamento semântico - padrão de mercado hoje. Uma release pode ser indicada pelo padrão : 1.0.0 (MAJOR.MINOR.PATCH):
- Major: representa uma “breaking change” (mudança que pode haver quebra na utilização de componentes já existentes) ou features muito grandes.
- Minor: versão sem mudanças significativas, pode ser componentes novos ou atualizações de componentes já existentes.
- Patch: mudança pequena, ajustes ou correções de bugs, estilos..
Sintaxe de pacotes
Uma aplicação javascript pode utilizar desse padrão do versionamento semântico junto a uma sintaxe que indica o tipo de atualização permitida em comandos de install e update dos pacotes. A tabela a seguir indica essas sintaxes e seus significados.
Você pode brincar mais com essa sintaxe na calculadora npm semver.
Instalação de pacotes
A instalação de pacotes via npm install ou yarn install irá baixar as dependências declaradas no arquivo package.json. Porém, dependendo do contexto essas dependências podem ser atualizadas via instalação. Isso ocorre porque esses comandos baixam as versões compatíveis mais atualizadas ou seja baixam as versões com o maior patch existente.
Exemplo:
- No meu package.json eu possuo o pacote react@^17.0.0
- A última versão patch do pacote react é a 17.0.3
- Ao rodar o comando install o pacote baixado será o react@17.0.3
Em geral, essa atualização não deve gerar conflitos ou mudanças que vão impactar o funcionamento da aplicação. Mas para garantir que o ambiente do desenvolvimento seja igual ao ambiente produtivo recomendamos sempre versionar o arquivo de lock e a usar nos pipelines de entrega contínua a opção --frozen-lockefile junto ao comando de install.
Checar pacotes depreciados
Para checar dentre os pacotes instalados no seu projeto quais contém atualizações pendentes, você pode executar o comando:
npm outdatedou
yarn outdatedEste comando irá retornar a lista de pacotes que contém atualizações pendentes, informando a versão desejada (última atualização minor) e a versão mais recente (última atualização major). Exemplo:
Com essa informação em mãos, você pode tomar a ação de atualizar os pacotes de forma mais consciente.
Auditar pacotes
O comando para auditar os pacotes irá checar os pacotes instalados em busca de vulnerabilidades nos mesmos, e retornar os problemas encontrados. Essas vulnerabilidades podem vir em diferentes níveis de gravidades (INFO, LOW, MODERATE, HIGH e CRITICAL)
Você pode especificar no comando um nível mínimo de vulnerabilidade para atuar na atualização dos pacotes, exemplo para verificar as vulnerabilidades altas e críticas:
yarn audit --level highExemplo da saída de uma vulnerabilidade crítica:
É informado a vulnerabilidade, o pacote responsável, o caminho até este pacote (muitas vezes não é um pacote instalado diretamente, mas sim uma dependência de um pacote instalado, como no exemplo acima) e a versão corrigida.
No npm você consegue executar uma correção automáticamente através do comando:
npm audit fixEnquanto no yarn não temos essa opção nativa porém podemos resolver através de uma das estratégias:
- Pacote: yarn-audit-fix
Instale o pacote:yarn add yarn-audit-fix -D
Execute o comando:yarn-audit-fix - Exporte do npm:
Execute a geração do package-lock:npm i --package-lock-only
Execute o fix via npm:npm audit fix
Remova o arquivo yarn.lock:rm yarn.lock
Importe os pacotes para o yarn:yarn import
Remova o package-lock:rm package-lock.json
Observação: nem sempre as vulnerabilidades encontradas vão ter uma versão corrigida disponível. Neste cenário as vulnerabilidades continuarão ocorrendo até que seja resolvido, a não ser que seja encontrado uma alternativa ao pacote responsável que deverá ser substituído manualmente.
Atualização de pacotes
Conhecendo os pacotes depreciados ou com vulnerabilidades, é possível focar em atualizá-los.
Podemos fazer uma atualização geral com o comando npm updateno npm ou yarn upgradeno yarn. Assim como na instalação, esses comandos vão respeitar o versionamento semântico, porém a instalação irá puxar pacotes superior à versões patch, ou seja, irá instalar pacotes com atualizações minor. Exemplo:
- No meu package.json eu possuo o pacote react@^ 17.0.0
- A ultima versão minor do pacote react é a 17.1.1
- Ao rodar o comando de update o pacote baixado será o react@17.1.1
Para escolher os pacotes atualizados podemos utilizar o comando: yarn upgrade-interactive. Este comando disponibiliza os pacotes identificados no outdated e permite o desenvolvedor escolher os pacotes para serem atualizados. Exemplo:
Outra opção é especificar os pacotes e versões de atualização via cli, exemplo:
yarn upgrade package1
yarn upgrade package1@^1.0.0
yarn upgrade package1 package2
yarn upgrade @reactOs comandos de atualização vão refletir os pacotes mais recentes no arquivo de *.lock. Porém muitas vezes queremos essa atualização a partir do arquivo de package.json. Essa alteração pode ser feita manualmente no arquivo package.json ou realizando a instalação do pacote novamente. Exemplo:
yarn add package1
npm install package1
yarn add package1@^1.0.0
npm install package1@^1.0.0
...Desinstalar pacotes não utilizados
É comum que pacotes deixem de ser usados ou sejam copiados de outros projetos e acabam sobrando na sua aplicação. Para verificar esses pacotes você pode utilizar do pacote auxiliar depcheck:
Instalando pacote: npm install depcheck -g
Verificando pacotes não utilizados: depcheck
Exemplo da saída desse comando:
Como mostrado na imagem acima é apontado os pacotes que não tiveram referências encontradas no projeto, entretanto muitas vezes alguns destes pacotes podem estar sendo utilizados de forma implícita, como nos pipelines de entrega contínua ou compilação da ferramenta de bundler. Portanto a remoção desses pacotes deve ser feita de forma cautelosa validando o resultado do mesmo.
Versões do node
Além dos pacotes, é importante mantermos as atualizações do node e outros frameworks/bibliotecas atualizadas. Essas versões geralmente são mantidas por no máximo 3 anos após o lançamento de uma versão major.
A atualização dessas tecnologias pode trazer diversos benefícios na performance e compatibilidade da aplicação com navegadores e dispositivos móveis.
Este é o planejamento de suporte do node retirado hoje (na data em que escrevi este documento) do site oficial.
Essa atualização dificilmente irá gerar mudanças com incompatibilidade, precisando de pouca manutenção durante a atualização (isso considerando que você não está em uma versão muito distante da atual, se for o caso recomendo que faça o update versão a versão validando o comportamento esperado).
Você pode baixar a versão mais recente do node via o site oficial, que contém as opções de acordo com seu sistema operacional e preferências.
Versões do framework/bibliotecas
Ao atualizar os pacotes com os comandos de atualização globais como o npm update ou yarn upgradeseu framework ou biblioteca devem ter seus pacotes respectivos atualizados também, porém não será atualizado as versões majors, exigindo uma atualização manual. Portanto devemos ficar atentos também à essas versões, e as mesmas podem ter incompatibilidades (breaking changes) com as versões anteriores, porém também trazem mais benefícios e suporte.
React
Atualização: npm install react@18.0.2ou yarn add react@18.0.2
Angular
Atualização: npm install angular@17.0.3ou yarn add angular@17.0.3
Caso suas dependências não exijam versões específicas inferiores desses pacotes, não deve haver nenhum problema para fazer essa atualização.
Exemplo prático dos comandos apresentados
Para ilustrar melhor os comandos apresentados, montei um depara que pode te ajudar a visualizar esses comandos e seus impactos.
Para isso, imagine o cenário de um pacote abc, com as versões disponíveis:
- 1.0.0, 1.0.1, 1.0.2, 1.2.0, 1.2.1, 1.2.2, 2.0.0, 2.1.0
Na tabela a seguir temos os exemplos dos pacotes instalados conforme a sintaxe apresentada no arquivo package.json e o comando execuado.
Lembrando também que se executarmos o comando yarn add abc sem especificar uma versão, o pacote instalado seria o 2.1.0, ou seja a maior versão disponível — independente se esse arquivo já existe no package.json ou não.
Conclusão
Como vimos neste artigo, há alguns comandos e ferramentas que podem nos ajudar nas atualizações necessárias, porém é importante saber como usá-los de forma consciente e responsável.
Espero que este conteúdo sirva como referência para utilização no seu dia a dia. Bons estudos e até a próxima!
