Neste artigo, compartilhamos insights sobre como escolher uma biblioteca ou um framework para usar no seu aplicativo da Web. As discussões aqui vão ajudar você a avaliar os prós e contras para encontrar a biblioteca ou o framework de JavaScript ideal para o problema de negócios que você está tentando resolver. Entender quais prós e contras se aplicam a diferentes situações é fundamental para analisar o grande número de opções de bibliotecas JavaScript disponíveis.
O que são bibliotecas e frameworks JavaScript
O que é uma biblioteca JavaScript? Em sua forma mais simples, uma biblioteca JavaScript é um código pré-escrito que você pode chamar no código do seu projeto para realizar uma tarefa específica.
Esta postagem menciona principalmente "bibliotecas". No entanto, muitas das discussões também se aplicam a frameworks. Basicamente, a diferença entre os dois pode ser resumida da seguinte forma:
- No caso de uma biblioteca, o código do aplicativo chama o código da biblioteca.
- No caso de um framework, o código do aplicativo é chamado pelo framework.
Os exemplos práticos a seguir ajudam a ilustrar as diferenças.
Exemplo de chamada para uma biblioteca JavaScript
Uma biblioteca JavaScript executa uma tarefa específica e retorna o controle para o aplicativo. Ao usar uma biblioteca, você controla o fluxo do aplicativo e escolhe quando chamá-la.
No exemplo a seguir, o código do aplicativo importa um método da biblioteca lodash. Depois que a função é concluída, o controle é retornado ao aplicativo.
import capitalize from 'lodash.capitalize';
capitalize('hello'); // Hello
Quando o método lodash.capitalize é executado, ele chama um código JavaScript pré-escrito que coloca em maiúscula o primeiro caractere de uma string.
Exemplo de uso de um framework de JavaScript
Um framework de JavaScript é um modelo de código predefinido em que você cria o comportamento do seu aplicativo. Ou seja, quando você usa um framework, ele controla o fluxo do aplicativo. Para usar um framework, você escreve o código do aplicativo personalizado, e o framework chama esse código.
O exemplo a seguir mostra um snippet de código que usa o framework de JavaScript Preact:
import { createElement } from 'preact';
export default function App() {
return (
<p class="big">Hello World!</p>
)
}
No exemplo, observe que o framework tem muito mais controle sobre o código que você escreve e, em alguns casos, até mesmo sobre quando executá-lo.
Por que usar uma biblioteca?
O uso de uma biblioteca JavaScript pode ajudar a evitar a repetição desnecessária de código. As bibliotecas podem abstrair lógicas complexas, como manipulação de datas ou cálculos financeiros. Uma biblioteca também pode ajudar a lançar seu produto inicial, em vez de ter que escrever todo o código do zero, o que pode levar tempo.
Algumas bibliotecas JavaScript do lado do cliente ajudam a abstrair as peculiaridades da plataforma da Web. Uma biblioteca também pode servir como uma ferramenta de aprendizado. Por exemplo, se você não conhece as funções de easing de animação, o código-fonte de uma biblioteca pode ensinar como elas funcionam.
Algumas bibliotecas são apoiadas por grandes empresas que investem tempo e dinheiro para mantê-las atualizadas e seguras. Muitas bibliotecas vêm com uma documentação extensa, que oferece a você e à sua equipe uma maneira rápida de se familiarizar com o uso da biblioteca.
No fim das contas, usar uma biblioteca JavaScript economiza tempo.
Por que você deve se preocupar com o uso da biblioteca?
Tecnicamente, é possível desenvolver seu aplicativo da web do zero, mas por que se dar ao trabalho quando você pode usar um software livre (de código aberto) ou comprar uma solução que, a longo prazo, pode economizar tempo e dinheiro? Há um grande número de bibliotecas e frameworks de JavaScript disponíveis, cada um com uma abordagem única para resolver problemas e características diferentes. Exemplo:
- Uma biblioteca pode ser escrita e mantida internamente, em vez de por terceiros.
- Uma biblioteca pode ter licenças legais específicas que a tornam adequada ou não para seu aplicativo da web.
- Uma biblioteca pode estar desatualizada ou sem manutenção.
- Uma biblioteca pode simplificar um conjunto de tarefas complexas e economizar muito tempo e dinheiro.
- Uma biblioteca pode ser amplamente usada na comunidade e ser bem conhecida entre os desenvolvedores.
Como você deve imaginar, características diferentes podem afetar seu aplicativo da Web de maneiras diferentes. Às vezes, a decisão não é tão complexa, e você pode trocar uma biblioteca se não gostar dela. No entanto, às vezes uma biblioteca pode ter um efeito significativo no seu trabalho e no seu aplicativo da Web, o que sugere que uma abordagem mais informada pode ser necessária.
Há alguns ambientes JavaScript que não são do lado do cliente, como no servidor (executado em um ambiente de nuvem) ou em um Raspberry Pi, em que talvez seja necessário ajustar os critérios usados para avaliar bibliotecas e frameworks.
Desempenho
O efeito de uma biblioteca JavaScript no desempenho de um aplicativo da Web do lado do cliente não deve ser ignorado. Uma biblioteca JavaScript grande pode prejudicar a performance de carregamento da sua página. Lembre-se: milissegundos fazem milhões.
Considere um cenário em que você usa uma biblioteca JavaScript para animação. Algumas bibliotecas podem adicionar facilmente dezenas de kilobytes e, em alguns casos, até centenas de kilobytes. Recursos JavaScript como esse podem atrasar significativamente o carregamento da página, já que o navegador precisa fazer o download, analisar, compilar e executar o código.
Quanto maior a biblioteca JavaScript, maior o efeito de desempenho nos usuários.
Ao avaliar ou usar uma biblioteca ou um framework JavaScript, considere as seguintes sugestões para melhorar a performance:
- Se você tiver uma biblioteca JavaScript grande, considere usar uma alternativa menor. Por exemplo, o date-fns oferece muitas funcionalidades em um tamanho mais razoável do que outras opções.
- Seguindo o exemplo anterior de date-fns, importe apenas as funções necessárias, como
import { format } from 'date-fns'. Combine essa abordagem com o tree shaking para que um payload mínimo de JavaScript seja criado e enviado aos usuários. - Use ferramentas de teste de desempenho, como o Lighthouse, para observar o efeito de desempenho do uso de uma determinada biblioteca JavaScript. Se uma biblioteca adicionar um atraso de um segundo ao tempo de carregamento da página (não se esqueça de limitar a rede e a CPU durante o teste), talvez seja necessário reavaliar a biblioteca escolhida. Além de verificar o carregamento de página, analise o comportamento de qualquer página da Web que invoque o código da biblioteca em questão. O desempenho de carregamento de página não conta toda a história.
- Se o autor da biblioteca aceitar comentários, envie suas observações de desempenho, sugestões e até mesmo contribuições para o projeto. É aí que a comunidade de código aberto se destaca. Se você decidir fazer uma contribuição, talvez seja necessário consultar seu empregador primeiro.
- Use uma ferramenta automatizada de rastreamento de pacotes, como o bundlesize, para monitorar atualizações inesperadamente grandes em uma biblioteca. É comum que uma biblioteca JavaScript cresça com o tempo. Adições de recursos, correções de bugs, casos extremos e outros podem aumentar o tamanho do arquivo de uma biblioteca. Depois que você/sua equipe concordarem em usar uma biblioteca, atualizá-la pode ser menos problemático e gerar poucas ou nenhuma dúvida. É aí que a automação se torna útil.
- Analise os requisitos de uma biblioteca e avalie se a plataforma da Web oferece a mesma funcionalidade de forma nativa. Por exemplo, a plataforma da Web já oferece um seletor de cores, o que elimina a necessidade de usar uma biblioteca JavaScript de terceiros para implementar a mesma funcionalidade.
Segurança
O uso de um módulo de terceiros traz alguns riscos de segurança inerentes. Um pacote malicioso na base de código do seu aplicativo da web pode comprometer a segurança da equipe de desenvolvimento e dos usuários.
Considere uma biblioteca publicada no ecossistema do NPM. Esse pacote pode ser legítimo. No entanto, com o tempo, o pacote pode ser comprometido.
Confira algumas dicas de segurança para usar ou avaliar códigos de terceiros:
- Se você usa o GitHub, considere as ofertas de segurança do código, como o Dependabot. Ou considere serviços alternativos que verificam vulnerabilidades no código, como o snyk.io.
- Considere usar serviços de auditoria de código, uma equipe de engenheiros que pode auditar manualmente o código de terceiros que você está usando.
- Avalie se você precisa bloquear suas dependências em uma versão específica ou confirmar o código de terceiros no controle de versões. Isso pode ajudar a bloquear sua dependência em uma versão específica, que é considerada segura. Ironicamente, isso pode ter um efeito contrário na segurança, já que você pode perder atualizações vitais para a biblioteca.
- Verifique a página inicial do projeto ou a página do GitHub, se houver. Pesquise se há problemas de segurança pendentes e se os problemas anteriores foram resolvidos em um prazo razoável.
- O código de terceiros que usa outro código de terceiros pode apresentar mais riscos do que uma biblioteca com zero dependências. Esteja ciente desse risco.
Acessibilidade
Você deve estar se perguntando como as bibliotecas de software estão relacionadas à acessibilidade na Web. Embora uma biblioteca de software possa ser usada em diferentes ambientes, no contexto de uma biblioteca baseada em JavaScript do lado do cliente, a acessibilidade na Web é de extrema importância.
Uma biblioteca baseada em JavaScript do lado do cliente (ou framework, nesse caso) pode aumentar ou diminuir a acessibilidade do seu site. Considere uma biblioteca JavaScript de terceiros que adiciona um controle deslizante de imagem a uma página. Se o controle deslizante de imagens não considerar a acessibilidade na Web, você, como desenvolvedor Web, pode ignorar um recurso tão importante e lançar um produto que não tenha recursos essenciais, como um controle deslizante que possa ser navegado pelo teclado.
- O plug-in de tipografia responsiva é compatível com usuários que aumentam ou diminuem o zoom da página?
- O plug-in de upload de arquivos é compatível com uploads de dispositivos com o Assistente?
- A biblioteca de animação oferece suporte para usuários que preferem movimento reduzido?
- O plug-in de mapas interativos é compatível com o uso exclusivo do teclado?
- A biblioteca do player de áudio oferece uma experiência adequada em leitores de tela?
É razoável esperar que algum nível de envolvimento seja necessário para que você, o desenvolvedor web, atenda a esses requisitos de acessibilidade. Exemplo:
- Se houver recursos ausentes, você poderá implementá-los na base de código, mesmo que continue usando a biblioteca em questão.
- Com o apoio do seu empregador, você pode contribuir com esse recurso que falta para a biblioteca, se o autor dela permitir.
- Você pode abrir um diálogo com o autor da biblioteca. Por exemplo, esses recursos de acessibilidade específicos estão no seu plano de desenvolvimento? Você concorda que eles pertencem à biblioteca?
- Para casos de uso comuns, você pode procurar opções de bibliotecas alternativas mais acessíveis. Elas podem existir, mas são mais difíceis de encontrar.
- Em casos extremos, talvez seja necessário abandonar uma biblioteca inteiramente e implementar os recursos do zero. Isso pode acontecer quando uma biblioteca ou framework tem uma experiência de acessibilidade degradada no uso inicial, e você precisa desfazer muito do que a biblioteca ou o framework supostamente oferece sem custo financeiro.
Convenções
Uma biblioteca de software que usa convenções de programação estabelecidas é mais fácil de usar. Se uma biblioteca usar uma convenção de programação desconhecida, pode ser difícil para você e sua equipe trabalharem com ela.
Se uma biblioteca não segue as convenções de programação comuns (por exemplo, um guia de estilo comum), não há muito o que fazer para corrigir isso imediatamente. No entanto, ainda há algumas opções:
- Diferencie o código-fonte da biblioteca da API exposta a você, o usuário da biblioteca. Embora o código-fonte interno possa usar convenções desconhecidas, se a API (a parte da biblioteca com que você interage) usar convenções conhecidas, não há com o que se preocupar.
- Se a API da biblioteca não seguir as convenções de programação comuns, use um padrão de design do JavaScript, como o padrão de proxy, para agrupar e conter todas as interações com a biblioteca em um único arquivo na base de código. O proxy pode oferecer uma API mais intuitiva para outras partes do código na base de código.
As convenções desempenham um papel importante na facilidade de uso. Uma biblioteca que inclui uma API intuitiva pode economizar muitas horas ou até dias de trabalho, em comparação com uma API não intuitiva que precisa de muita experimentação para ser compreendida.
Atualizações
Por exemplo, uma biblioteca totalmente funcional que realiza alguns cálculos matemáticos raramente precisa de atualizações. Na verdade, uma biblioteca com todos os recursos é uma raridade no mundo em constante mudança do desenvolvimento web. No entanto, há momentos em que você quer que o autor da biblioteca seja responsivo e esteja disposto a fazer atualizações. Novas pesquisas e descobertas podem revelar maneiras melhores de fazer as coisas, então as técnicas usadas em bibliotecas e frameworks estão sempre sujeitas a mudanças.
Ao escolher uma biblioteca ou um framework, preste atenção em como as atualizações são processadas e saiba que essas decisões podem afetar você:
- A biblioteca tem um cronograma de lançamento razoável? Por exemplo, as atualizações no repositório de código-fonte podem acontecer com frequência, mas, se não forem "publicadas" ou "lançadas" de acordo, pode ser difícil fazer o download delas.
- A biblioteca lança atualizações com um esquema de controle de versão de software sensato? Uma biblioteca deve economizar seu tempo. Se você precisar mudar o código de forma inesperada sempre que atualizar a versão da biblioteca, isso pode anular o propósito de usar essa biblioteca. Às vezes, as alterações interruptivas são inevitáveis, mas, em um mundo ideal, elas são raras e não são impostas aos consumidores da biblioteca.
- A biblioteca investe esforços na compatibilidade com versões anteriores? Às vezes, as atualizações de software podem vir com alterações interruptivas, mas também oferecem uma camada de compatibilidade com versões anteriores. Isso permite que o consumidor da biblioteca use a versão mais recente com mudanças mínimas no código.
Licenciamento
O licenciamento de software é um aspecto importante do uso de bibliotecas de software de terceiros. O autor de uma biblioteca pode atribuir uma licença a ela. Se você estiver pensando em usar a biblioteca, a escolha da licença pode afetar você.
Por exemplo, uma biblioteca JavaScript pode ter uma licença de software que permite o uso em um ambiente não comercial. Para um projeto pessoal, essa pode ser uma ótima escolha. Se o projeto tiver um elemento comercial, talvez seja necessário considerar uma licença empresarial.
Em caso de dúvida, procure orientação jurídica profissional ou consulte a equipe jurídica da sua empresa.
Comunidade
Uma biblioteca ou framework com uma grande comunidade de usuários/colaboradores pode ser benéfica, mas isso não é uma garantia. Em geral, quanto mais usuários uma biblioteca ou framework tiver, maior será a probabilidade de se beneficiar. Considere os seguintes prós e contras de participar de uma comunidade de desenvolvimento:
Vantagens:
- Uma grande base de usuários pode significar uma chance maior de bugs serem detectados com antecedência e frequência.
- Uma comunidade grande e ativa pode significar mais tutoriais, guias, vídeos e até cursos sobre a biblioteca ou o framework em questão.
- Uma comunidade ativa grande pode significar mais suporte em fóruns e sites de perguntas e respostas, aumentando a probabilidade de que as dúvidas de suporte sejam respondidas.
- Uma comunidade engajada pode significar mais colaboradores externos para a biblioteca ou o framework. Eles podem ajudar a fornecer recursos que não estão no roteiro do autor.
- Quando uma biblioteca ou framework é popular em uma comunidade, é mais provável que seus colegas já tenham ouvido falar ou até mesmo estejam familiarizados com ela.
Desvantagens:
- Um projeto com uma base de usuários grande e diversificada pode ficar sobrecarregado com adições constantes de recursos. Bibliotecas inchadas podem prejudicar a performance na Web.
- Um projeto com uma comunidade ativa e engajada pode ser estressante para os autores e mantenedores, e pode exigir uma moderação intensa da comunidade.
- Um projeto que cresce rapidamente, mas não tem o suporte adequado, pode começar a mostrar sinais de uma comunidade tóxica. Por exemplo, desenvolvedores web iniciantes ou júniores podem se sentir indesejados em uma determinada comunidade devido ao gatekeeping.
Documentação
Não importa o nível de simplicidade ou complexidade de uma biblioteca ou framework JavaScript, a documentação do software sempre pode ajudar. Até mesmo desenvolvedores muito experientes usam a documentação em vez de tentar descobrir o código por conta própria. A documentação esclarece qual API você deve usar e como usá-la.
A documentação pode até fornecer exemplos de código, facilitando o início rápido. Ao avaliar uma biblioteca ou um framework, você pode fazer algumas destas perguntas:
- A biblioteca inclui documentação? Caso contrário, você precisará se sentir confortável para descobrir as coisas por conta própria.
- A documentação é clara, fácil de entender e sem ambiguidades? Muitos desenvolvedores passam muito tempo com a documentação. Pode parecer algo pequeno, mas a clareza na documentação textual pode ter um grande efeito na sua produtividade.
- A documentação é gerada de forma totalmente automática? Esse tipo de documentação pode ser mais difícil de entender e nem sempre fornece orientações claras sobre como usar uma API.
- A documentação está atualizada? A manutenção da documentação às vezes é tratada como algo secundário. Se a biblioteca for atualizada, mas a documentação não, isso pode levar a um desperdício de tempo de desenvolvimento.
- A documentação é abrangente e está disponível em vários formatos? Guias do usuário, exemplos de código, documentação de referência, demonstrações ao vivo e tutoriais são formatos de documentação valiosos que podem ajudar você a usar uma biblioteca ou um framework.
A documentação nem sempre está completa, e tudo bem. Avalie as necessidades da sua organização, os requisitos do projeto e a complexidade do software para determinar o nível de documentação necessário.
Conclusão
É normal se sentir sobrecarregado ao escolher uma biblioteca ou um framework pela primeira vez. Como em qualquer outra coisa, quanto mais você aprende e pratica uma tarefa, melhor você fica. Pode ser útil consultar este post na próxima vez que você escolher uma biblioteca ou um framework para usar. Você pode usar os títulos deste post como uma lista de verificação. Por exemplo: essa biblioteca tem um bom desempenho? Essa biblioteca atende aos padrões da minha empresa para acessibilidade na Web?
Há outros aspectos de bibliotecas e frameworks que você pode considerar e que não foram muito discutidos neste post:
- Extensibilidade: qual é o nível de dificuldade para estender a biblioteca com lógica e/ou comportamento personalizados?
- Ferramentas: se aplicável, a biblioteca tem ferramentas como plug-ins de editor de código, ferramentas de depuração e plug-ins de sistema de build?
- Arquitetura: um código limpo é importante, mas a arquitetura geral da biblioteca é sensata?
- Testes: o projeto tem um pacote de testes? O site do projeto usa selos ou indicadores que o pacote de testes está passando em relação ao commit mais recente?
- Compatibilidade: a biblioteca funciona bem com outras bibliotecas e/ou frameworks que você está usando?
- Custo: qual é o custo de um framework? Ele é de código aberto ou está disponível para compra?
- Métricas de vaidade: esse deve ser um dos últimos critérios da sua lista ou até mesmo ignorado, mas você pode considerar os "votos" do projeto, as contas de redes sociais que o representam e/ou quantos bugs/problemas abertos existem na página do projeto.