Escolher um framework ou uma biblioteca JavaScript

Umar hansa

Neste artigo, compartilhamos insights sobre como escolher uma biblioteca ou framework para usar no seu aplicativo da Web. As discussões aqui o ajudarão a avaliar os prós e os contras para encontrar a biblioteca ou estrutura JavaScript certa para o problema empresarial que você está tentando resolver. Entender quais prós e contras se aplicam em diferentes situações é fundamental para verificar o grande número de opções de biblioteca JavaScript disponíveis.

O que são bibliotecas e frameworks JavaScript

O que é uma biblioteca JavaScript? Na forma mais simples, uma biblioteca JavaScript é um código pré-escrito que pode ser chamado no código do 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:

  • Para 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 depois retorna o controle para o aplicativo. Ao usar uma biblioteca, você controla o fluxo do aplicativo e escolhe quando chamar a biblioteca.

No exemplo a seguir, o código do aplicativo importa um método da biblioteca lodash. Quando 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 com a primeira letra maiúscula no primeiro caractere de uma string.

Exemplo de uso de um framework de JavaScript

Um framework de JavaScript é um modelo de código predefinido no qual você constrói 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, em seguida, o framework chama o código do aplicativo.

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 controla quando executar o código.

Por que usar uma biblioteca?

Usar uma biblioteca JavaScript pode ajudar a evitar a repetição de código desnecessária. 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 precisar 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 Web. Uma biblioteca também pode servir como uma ferramenta de aprendizagem. Por exemplo, caso você não conheça as funções de easing de animação, use o código-fonte de uma biblioteca para aprender como esses easings funcionam.

Algumas bibliotecas são apoiadas por grandes empresas que investem tempo e dinheiro em mantê-las atualizadas e seguras. Muitas bibliotecas são acompanhadas por uma documentação extensa, que oferece a você e sua equipe uma maneira rápida de se familiarizar com o uso da biblioteca.

Em última análise, usar uma biblioteca JavaScript economiza tempo.

Por que é importante usar a biblioteca?

Tecnicamente, é possível desenvolver um aplicativo da Web do zero, mas por que ter esse problema quando se pode usar software sem custo financeiro (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 estruturas JavaScript disponíveis, cada uma oferecendo uma abordagem única para resolver problemas e cada uma com 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 inadequada 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 utilizada na comunidade e pode ser bem conhecida entre os desenvolvedores.

Como você pode suspeitar, características diferentes podem afetar seu aplicativo da Web de maneiras diferentes. Às vezes, a decisão não é tão profunda, e você pode trocar uma biblioteca com segurança 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.

Existem alguns ambientes JavaScript fora do lado do cliente, como no servidor (executado em um ambiente de nuvem) ou em um Raspberry Pi, em que pode ser necessário ajustar os critérios usados para verificar bibliotecas e frameworks.

Desempenho

O efeito de desempenho de uma biblioteca JavaScript em um aplicativo da Web do lado do cliente não deve ser ignorado. Uma grande biblioteca JavaScript pode atrapalhar o desempenho de carregamento da sua página. Não se esqueça: milissegundos geram milhões.

Considere um cenário em que você usa uma biblioteca JavaScript para animação. Algumas bibliotecas podem adicionar dezenas de kilobytes e, em alguns casos, até centenas de kilobytes. Recursos JavaScript como esse podem causar um atraso significativo no 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 sobre o desempenho para os usuários.

Ao avaliar ou usar um framework ou uma biblioteca JavaScript, considere as seguintes sugestões para melhorar o desempenho:

  • Dado uma grande biblioteca JavaScript, considere usar uma alternativa menor. Por exemplo, date-fns oferece muitas funcionalidades em um tamanho mais razoável do que algumas outras opções.
  • Continuando com o exemplo anterior de fn de data, importe apenas as funções necessárias, como import { format } from 'date-fns'. Combine essa abordagem com tree shaking para que uma carga JavaScript mínima seja criada e enviada aos usuários.
  • Use ferramentas de teste de desempenho, como o Lighthouse, para observar o efeito 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 da página, crie o perfil de qualquer comportamento da página da Web que invoque o código da biblioteca em questão. O desempenho do carregamento da página não conta a história completa.
  • Se os comentários forem bem-vindos pelo autor da biblioteca, envie suas observações de desempenho, sugestões e até mesmo contribuições para o projeto. É aqui que a comunidade de código aberto brilha! Se você decidir fazer uma contribuição, talvez seja necessário entrar em contato com seu empregador primeiro.
  • Usar uma ferramenta automatizada de rastreamento de pacotes, como o bundlesize, para monitorar grandes atualizações inesperadas em uma biblioteca. É comum que uma biblioteca JavaScript aumente com o tempo. Adições de recursos, correções de bugs, casos extremos e outros podem aumentar o tamanho de arquivo de uma biblioteca. Depois que você e sua equipe concordarem em usar uma biblioteca, a atualização dela pode ser um problema menor e gerar poucas ou nenhuma dúvida. É aqui que vale a pena confiar na automação.
  • Analise seus requisitos para uma biblioteca e avalie se a plataforma Web oferece ou não a mesma funcionalidade nativamente. Por exemplo, a plataforma da Web já oferece um seletor de cores, que elimina a necessidade de usar uma biblioteca JavaScript de terceiros para implementar a mesma funcionalidade.

Segurança

O uso de módulos de terceiros traz alguns riscos de segurança inerentes. Um pacote malicioso dentro da 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. Porém, com o tempo, o pacote pode ser comprometido.

Veja algumas dicas de segurança a serem consideradas ao usar ou avaliar código de terceiros:

  • Se você usa o GitHub, considere as ofertas de segurança do código, como o Dependabot. Se preferir, você pode usar serviços alternativos que verificam vulnerabilidades no seu código, como snyk.io.
  • Considere usar serviços de auditoria de código, uma equipe de engenheiros que podem auditar manualmente o código de terceiros que você está usando.
  • Avalie se é preciso bloquear as dependências para 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 a uma versão específica, que é provavelmente considerada segura. Ironicamente, isso pode ter um efeito negativo na segurança, porque você pode perder atualizações vitais da biblioteca.
  • Verifique a página inicial do projeto ou a página do GitHub, se houver. Pesquisar se existem problemas de segurança pendentes e se problemas de segurança anteriores foram resolvidos dentro de um prazo razoável.
  • Códigos de terceiros que usam códigos externos podem ter mais risco do que uma biblioteca com nenhuma dependência. Esteja atento a esse risco.

Acessibilidade

Você pode estar se perguntando como as bibliotecas de software estão relacionadas à acessibilidade na Web. Embora uma biblioteca de software possa ser usada em ambientes diferentes, no contexto de uma biblioteca baseada em JavaScript do lado do cliente, a acessibilidade na Web é muito importante.

Uma biblioteca (ou framework, baseada em JavaScript) do lado do cliente pode aumentar ou diminuir a acessibilidade de seu site. Considere uma biblioteca JavaScript de terceiros que adicione um controle deslizante de imagem a uma página. Se o controle deslizante de imagem não considerar a acessibilidade na Web, você, como desenvolvedor da Web, pode ignorar um recurso tão importante e lançar um produto que não tem recursos críticos, como o controle deslizante sendo navegável 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 o upload de arquivos a partir de dispositivos assistivos?
  • A biblioteca de animações oferece suporte para usuários que preferem movimento reduzido?
  • O plug-in interativo do Maps suporta apenas o uso de teclado?
  • A biblioteca de players de áudio oferece uma experiência adequada em leitores de tela?

É razoável esperar que você, o desenvolvedor da Web, precise de um certo nível de envolvimento para atender a esses requisitos de acessibilidade. Exemplo:

  • É possível implementar os recursos ausentes na sua base de código, mesmo que você continue usando a biblioteca em questão.
  • Com o apoio do seu empregador, você pode contribuir com um recurso que está faltando para a biblioteca, se o autor dela permitir essa contribuição.
  • É possível iniciar um diálogo com o autor da biblioteca. Por exemplo, esses recursos de acessibilidade específicos estão no seu roteiro? Você concorda que eles pertencem à biblioteca?
  • Para casos de uso comuns, você pode explorar opções de biblioteca alternativas que são mais acessíveis. Elas podem existir, mas são mais difíceis de encontrar.
  • Em casos extremos, talvez seja necessário abandonar uma biblioteca e implementar os recursos do zero. Isso pode acontecer quando uma biblioteca ou um framework tem uma experiência de acessibilidade degradada no uso inicial e você precisa desfazer muito do que a biblioteca ou o framework supostamente oferecem sem custos.

Convenções

É mais fácil trabalhar com bibliotecas de software que usam convenções de codificação estabelecidas. Se uma biblioteca usa uma convenção de programação que não é conhecida, pode ser difícil para você e sua equipe trabalhar com ela.

Se uma biblioteca não segue convenções de codificação comuns (por exemplo, um guia de estilo comum), não há muito que você possa fazer como correção imediata. No entanto, ainda há algumas opções:

  • Lembre-se de diferenciar entre o código-fonte da biblioteca e a API exposta para 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 a qual você interage) usar convenções conhecidas, talvez não haja nada com que se preocupar.
  • Se a API da biblioteca não seguir convenções de programação comuns, você poderá usar um padrão de design do JavaScript, como o padrão de proxy, para unir e conter todas as interações com a biblioteca em um único arquivo na base de código. Seu proxy pode oferecer uma API mais intuitiva para outras partes do código na sua base de código.

As convenções têm um papel importante na facilidade de uso. Uma biblioteca que inclui uma API intuitiva pode economizar muitas horas ou até mesmo dias de horas de pessoas, quando comparada a uma API contraintuitiva que precisa de muitos testes para ser descoberta.

Atualizações

Por exemplo, para uma biblioteca totalmente funcional que realiza alguns cálculos matemáticos, essa biblioteca raramente precisa de atualizações. Na verdade, uma biblioteca com todos os recursos é algo raro de encontrar no mundo em constante mudança do desenvolvimento da Web. No entanto, há momentos em que você quer que o autor da biblioteca seja responsivo e disposto a fazer atualizações. Novas pesquisas e descobertas podem revelar maneiras melhores de fazer as coisas, de modo que as técnicas usadas em bibliotecas e estruturas estão sempre sujeitas a mudanças.

Ao escolher uma biblioteca ou framework, preste atenção em como as atualizações são tratadas e esteja ciente de que essas decisões podem afetá-lo:

  • A biblioteca tem um cronograma de lançamento sensato? Por exemplo, atualizações no repositório do código-fonte podem acontecer com frequência, mas se essas atualizações não forem "publicadas" ou "lançadas", você vai perceber que pode ser difícil baixar essas atualizações.
  • A biblioteca lança atualizações com um esquema adequado de controle de versões de software? Uma biblioteca deve economizar seu tempo. Se você tiver que alterar inesperadamente seu código toda vez que atualizar a versão da biblioteca, talvez isso invalide o propósito de usar essa biblioteca. Mudanças interruptivas às vezes são inevitáveis, mas, em um mundo ideal, elas são pouco frequentes e não são forçadas para os consumidores da biblioteca.
  • A biblioteca investe esforço para compatibilidade com versões anteriores? Às vezes, as atualizações de software podem incluir alterações interruptivas, mas também fornecem 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 pode atribuir uma licença à biblioteca. Se estiver pensando em usar a biblioteca, a escolha da licença dele poderá afetar você.

Por exemplo, uma biblioteca JavaScript pode ter uma licença de software que permita que você a use em um ambiente não comercial. Para um projeto de hobby pessoal, essa pode ser uma ótima escolha. Se o seu projeto tiver um elemento comercial, talvez seja necessário considerar uma licença empresarial.

Em caso de dúvida, procure aconselhamento jurídico profissional ou encaminhe o caso para a equipe jurídica da sua empresa.

Comunidade

Uma biblioteca ou framework que tenha uma grande comunidade de usuários/colaboradores pode ser benéfico, 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 da participação em uma comunidade de desenvolvimento:

Vantagens:

  • Uma grande base de usuários pode significar uma chance maior de detecção precoce e frequente de bugs.
  • Uma grande comunidade ativa pode significar mais tutoriais, guias, vídeos e até mesmo cursos na biblioteca ou estrutura em questão.
  • Uma grande comunidade ativa pode significar mais suporte em fóruns e sites de perguntas e respostas, aumentando a probabilidade de as perguntas de suporte serem respondidas.
  • Uma comunidade engajada pode significar mais colaboradores externos para a biblioteca ou estrutura. Eles podem ajudar a fornecer recursos que, de outra forma, não estão presentes no roteiro do autor.
  • Quando uma biblioteca ou framework se torna popular em uma comunidade, é mais provável que seus colegas e colegas já tenham ouvido ou se familiarizem com eles.

Desvantagens:

  • Um projeto com uma base de usuários grande e diversificada pode ficar cheio de recursos constantes. Bibliotecas em excesso podem prejudicar o desempenho na Web.
  • Um projeto com uma comunidade ativa e envolvida pode ser estressante para os autores e mantenedores e pode exigir muita moderação da comunidade.
  • Um projeto que cresce rapidamente, mas não tem o apoio adequado, pode começar a mostrar sinais de ter uma comunidade tóxica. Por exemplo, desenvolvedores da Web iniciantes ou júnior podem se sentir mal-vindos em uma determinada comunidade devido a um bloqueio.

Documentação

Não importa o quão simples ou complexo seja um framework ou uma biblioteca JavaScript, a documentação do software sempre pode ajudar. Até mesmo desenvolvedores muito experientes usam documentação em vez de descobrir o código por conta própria. A documentação esclarece a API que você deve usar e como usá-la.

A documentação pode até mesmo fornecer um exemplo de código, facilitando os primeiros passos. Ao avaliar uma biblioteca ou framework, faça algumas das seguintes perguntas:

  • A biblioteca inclui documentação? Caso contrário, você terá que 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 gastam muito tempo com documentação. Pode parecer pequeno, mas a clareza na documentação textual pode ter um grande efeito na sua produtividade.
  • A documentação é totalmente gerada automaticamente? Essa 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 negligenciada. Se a biblioteca for atualizada, mas a documentação não, isso pode levar a uma perda de tempo de desenvolvimento.
  • A documentação é abrangente e está disponível em vários formatos? Guias do usuário, exemplo de código, documentação de referência, demonstrações ao vivo e tutoriais são formatos de documentação valiosos que podem ajudá-lo a ter sucesso ao usar uma biblioteca ou estrutura.

A documentação nem sempre pode estar completa, e tudo bem. Você precisará avaliar as necessidades de sua organização, os requisitos do projeto e a complexidade do software e usar isso para determinar o nível de documentação necessário.

Conclusão

É normal sentir uma sobrecarga ao escolher uma biblioteca ou framework pela primeira vez. Assim como em tudo, quanto mais você aprende e pratica uma tarefa, melhor você se torna. Pode ser útil consultar esta postagem na próxima vez que você escolher uma biblioteca ou framework para usar. Você pode usar os títulos desta postagem como uma lista de verificação. Por exemplo: esta biblioteca tem um bom desempenho? Essa biblioteca atende aos padrões de negócios em relação à acessibilidade na Web?

Há outros aspectos de bibliotecas e frameworks que você pode querer considerar, mas que não foram muito discutidos nesta postagem:

  • Extensibilidade:é fácil 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 do sistema de build?
  • Arquitetura:o 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 para o commit mais recente?
  • Compatibilidade:a biblioteca funciona bem com outras bibliotecas e/ou frameworks que você usa no momento?
  • Custo:qual é o custo de uma estrutura? É de código aberto ou está disponível para compra?
  • Métricas de apresentação: devem estar na parte inferior da sua lista de critérios ou até mesmo ignoradas. No entanto, é recomendável considerar os "votos do projeto", as contas de mídia social que representam o projeto e/ou quantos bugs/problemas abertos existem na página do projeto.