Updated June 2018.
De todas as linguagens que pode utilizar para criar aplicações web, o JavaScript tem talvez a selecção mais robusta de bibliotecas e frameworks verdadeiramente úteis. De facto, há tantas que pode ser difícil descobrir quais usar, especialmente quando se está apenas a começar.
A diferença chave entre bibliotecas e frameworks JavaScript é que as bibliotecas consistem em funções que uma aplicação pode chamar para executar uma tarefa, enquanto que uma framework define como um programador desenha uma aplicação. Por outras palavras, a estrutura chama o código da aplicação, em vez de o contrário. É claro que os programadores ainda precisam de bibliotecas para realizar tarefas básicas na web utilizando JavaScript.
A natureza destas ferramentas mudou nos últimos anos. Em 2015, por exemplo, jQuery era a principal biblioteca JavaScript. Hoje em dia, de acordo com o JavaScript Scene, as bibliotecas tradicionais de JavaScript continuam a ser importantes, mas enfrentam uma concorrência crescente de estruturas JavaScript tais como React, Angular, Node.js, e Ember.js.
Ao considerar qualquer biblioteca ou estrutura JavaScript, poderá querer fazer algumas perguntas-chave:
- É a biblioteca ou estrutura suficientemente flexível para satisfazer as suas necessidades?
- Quantas vezes é a biblioteca ou estrutura actualizada para satisfazer novos requisitos de aplicação e para assegurar a compatibilidade com novos padrões?
- É a biblioteca ou estrutura segura? Pode ser muito difícil resolver problemas de segurança mais tarde?
- A biblioteca ou a estrutura goza de um forte apoio da comunidade? Poderá ficar surpreendido com a frequência com que precisará dela.
li>Existem aplicações de exemplo simples? Quer ter a certeza de que a biblioteca ou estrutura está bem escrita e fornece documentação utilizável.
Com isso em mente, estamos a actualizar a nossa lista, originalmente publicada em 2015, para cobrir bibliotecas e estruturas bem conhecidas utilizadas por quase todos os sítios na web, bem como opções mais especializadas concebidas para suportar funcionalidades específicas de sítios. Para o ajudar a compreender as escolhas, listamos as bibliotecas e frameworks separadamente (em ordem alfabética):
JavaScript Libraries
D3.js
Muitos websites modernos são orientados por dados. Os sites de notícias, por exemplo, devem actualizar constantemente o seu conteúdo, tornando impossível reconfigurar a configuração a cada poucos segundos para suportar estas alterações. A biblioteca Data Driven Documents, ou D3.js, é única na medida em que coloca os dados em primeiro lugar. A imagem de ecrã abaixo mostra apenas algumas das muitas apresentações de dados que encontrará em D3.O índice visual de js:
Clicking an entry in the visual index takes you to a detail page where you can see a full view of the data presentation (shown below), as well as the underlying code and the data used to create the presentation:
O sítio fornece exemplos completos concebidos para o ajudar a compreender o poder da biblioteca.
A principal vantagem desta biblioteca é a sua manipulação extremamente flexível do conteúdo. O lado negativo, contudo, é que o D3.js não proporciona muita pizzazz. Se estiver a trabalhar num site de comércio electrónico, por exemplo, em vez de apenas apresentar informação, esta biblioteca pode não ser a melhor escolha. Para além de extrema flexibilidade, a apresentação relativamente simplificada da D3.js ajuda a melhorar a velocidade, evitando muita da bagagem que outras bibliotecas utilizam para criar apresentações deslumbrantes. E se achar que D3.js ainda é um pouco demais para as suas necessidades, considere Chart.js, uma biblioteca mais pequena dedicada a fornecer gráficos.
jQuery
jQuery ganhou o seu estatuto de longo prazo como a régua reinante da página web. Muitos sítios ainda usam jQuery para manipulação básica de Modelo de Objecto de Documento (DOM) por três razões essenciais:
- jQuery é incrivelmente fácil de aprender. Fornece mais exemplos do que a maioria das bibliotecas, pelo que há uma boa probabilidade de encontrar um exemplo que demonstre exactamente como realizar a sua tarefa específica.
- jQuery é incrivelmente rápido. Porque se concentra em executar bem tarefas específicas, jQuery torna possível executar essas tarefas rapidamente.
- jQuery tem uma enorme base instalada. Tem também uma quantidade significativa de apoio da comunidade e de colaboradores do projecto.
p> Pode esperar que esta biblioteca esteja por perto a longo prazo. O tempo adicional de desenvolvimento também significa que a documentação está bastante polida. Como pode ver abaixo, a documentação decompõe os tópicos em peças facilmente compreensíveis e pode então aprofundar os detalhes adicionais conforme necessário:
Obviamente, nada é perfeito. Por exemplo, há alturas em que o jQuery não funciona da mesma maneira em vários navegadores. JQuery está na vanguarda destas preocupações, e pode encontrar informação sobre suporte de browsers no site.
Finalmente, ao contrário de outras bibliotecas, jQuery não é uma solução completa. É necessário outro produto, tal como jQuery UI (ver a próxima entrada) para construir uma aplicação completa. É importante perceber que o seu sítio será mais modular e dependente de mais bibliotecas quando trabalhar com jQuery (o que não é necessariamente uma coisa má).
jQuery UI
jQuery UI é apenas um dos muitos add-ons para jQuery, mas é o que vê com mais frequência, razão pela qual o incluímos aqui. Utiliza jQuery UI para adicionar elementos gráficos básicos à sua aplicação, depois de incorporar jQuery. A biblioteca jQuery UI vem com todo o tipo de widgets interessantes, tais como acordeões, barras deslizantes, pontas de ferramentas, e picadores de datas, que tornam possível configurar a sua aplicação para fornecer serviços úteis.
Pode pesquisar até widgets específicos ou outros controlos para ver como funcionam. Uma página contém tipicamente o controlo no topo, seguido por instruções de utilização e código de amostra. Tal como com jQuery, começa com um exemplo simples, mas detalha conforme necessário para ver as adições que pode fazer.
Esta biblioteca destaca-se por várias razões. Mais importante, JQuery UI funciona com praticamente qualquer navegador, pelo que os utilizadores são menos propensos a reclamar que a sua aplicação não funciona como esperado. jQuery UI também oferece um vasto número de add-ons. Por exemplo, enquanto a jQuery UI não tem um colector de tempo, pode obter add-ons para executar essa tarefa em locais como trentrichardson.com/examples/timepicker.
O único problema com o grupo de bibliotecas jQuery é que elas se tornaram grandes … realmente grandes. Por vezes, uma biblioteca fica simplesmente demasiado rica em características. O tamanho das bibliotecas JQuery pode torná-las lentas a carregar em dispositivos mais pequenos. Bibliotecas alternativas de terceiros como Granim.js e Multiple.js surgiram para fornecer um subconjunto de características jQuery, por vezes com um conjunto focalizado de características adicionais, com tempos de carregamento significativamente mais rápidos.
Parsley
A validação de formato é uma tarefa essencial. Como os dados são agora tão frequentemente analisados por máquinas, os dados limpos são mais essenciais do que nunca. Limpar os dados após o facto é demorado e nunca tão preciso como conseguir que o utilizador forneça informação correcta em primeiro lugar.
Parsley fornece mais técnicas de validação de formulários do que qualquer outra biblioteca JavaScript. O utilizador escolhe o nível de validação de que necessita, mas estas podem tornar-se bastante complexas:
P>A validação supostamente simples mostrada abaixo contém muitos tipos de validação diferentes, juntamente com o código necessário para executar a tarefa. É espantoso como é fácil realizar as validações mais comuns. (Não será necessária uma codificação pesada, a menos que se tente validar dados complexos.)
QUnit
A funcionalidade de teste fornecida por muitas bibliotecas deixa muito a desejar. Mesmo que se utilize um script, o teste manual de aplicações complexas é necessariamente incómodo e demorado – se conseguir encontrar todos os erros.
QUnit é uma das várias bibliotecas de teste de unidades disponíveis para JavaScript. Embora alguns possam considerá-la um pouco datada, é relativamente abrangente e destaca-se com grande apoio da comunidade e uma curva de aprendizagem curta. O site QUnit fornece uma grande quantidade de informação de início, incluindo um tutorial completo sobre testes unitários.
Pode até usar QUnit para testar QUnit (assumindo que alguma vez o queira fazer)!
Reagir
Usualmente considerada uma biblioteca, Reagir é por vezes referida como uma estrutura. No contexto da abordagem Model-View-Controller (MVC) para criar aplicações de grande escala, React fornece a parte de visualização. Não assume nada sobre a pilha de tecnologia subjacente que se está a utilizar para modelar ou controlar os dados. Tudo o que React está interessado é em exibir os dados no ecrã. Com isto em mente, não depende do modelo de objecto de documento (DOM) do navegador, mas utiliza um DOM virtual leve que exibe a informação rapidamente. Uma das melhores coisas sobre React é que é declarativo, o que significa que diz ao quadro o que quer fazer, não como fazê-lo.
O preço que paga pela velocidade e capacidade de usar MVC é um certo grau de complexidade acrescida. Mesmo um pequeno componente requer bastante código (como demonstrado pelos exemplos no site React). O que se ganha é flexibilidade e velocidade ao trabalhar com projectos realmente grandes.
JavaScript Frameworks
Angular
A Angular framework torna possível estender o HTML actuando como a parte controladora de MVC. Os controladores são o comportamento por detrás dos componentes DOM. Angular torna possível criar novos comportamentos de uma forma que é ao mesmo tempo natural e directa. As extensões acabam por parecer adições ao HTML, em vez de algo aparafusado no lugar. O site Angular torna claras as duas razões essenciais para a utilização deste produto: “speed & performance” e “incredible tooling”
No entanto, a codificação pode tornar-se complexa, e esta estrutura pode ser mais adequada a empresas do que a pequenas start-ups. Mesmo os exemplos simples no site Angular dependem de múltiplos ficheiros que rapidamente criam complexidade. É importante notar que a última versão do Angular também depende do TypeScript em vez do JavaScript puro, o que aumenta a curva de aprendizagem mas proporciona escalabilidade.
Felizmente, Angular vem com um extenso tutorial, mostrado aqui, que deverá facilitar aos programadores experientes começar a produzir resultados rapidamente.
Um problema potencial: a última versão de Angular não suporta uma gama tão vasta de browsers como as versões anteriores. Certifique-se de que é compatível com os navegadores que o seu sítio suporta.
Ember.js
Há algo de sério numa estrutura que se refere a si própria como uma “estrutura para programadores web ambiciosos”. Empresas bem conhecidas como Microsoft, Netflix, e LinkedIn utilizam Ember.js porque emprega o padrão Model-View-View-Model (MVVM) e incorpora as melhores práticas como parte da estrutura. E o melhor de tudo é que escalona muito bem. Curiosamente, enquanto o Ember.js se concentra no desenvolvimento web, pode também usá-lo para construir aplicações móveis e de desktop – foi usado para construir Apple Music.
Não como muitas outras frameworks, pode usar o conjunto completo de ferramentas baseadas no Ember para criar um ambiente de desenvolvimento altamente compatível. A Ember CLI (interface de linha de comando) fornece acesso a uma grande variedade de ferramentas que pode automatizar utilizando scripts. Ember Data, por exemplo, fornece acesso a dados orientados para a web usando o Mapeamento Relacional a Objectos (ORM). O Ember Inspector, entretanto, é um plugin para os navegadores Firefox e Chrome, concebido para facilitar a depuração.
p>Even com toda a sua potência, no entanto, o tutorial de início rápido do Ember.js demora apenas cinco minutos a completar. Claro que o tutorial padrão demora significativamente mais tempo, mas produz resultados mais respeitáveis, como mostrado aqui:
A documentação para esta estrutura inclui todos os tópicos de que necessita, incluindo discussões sobre o modelo do objecto, modelos, componentes, controladores, e modelos. Existe também um blog, e a comunidade Ember.js pode fornecer ajuda adicional.
Node.js
Node.js é um JavaScript assíncrono, orientado por eventos, com algumas características únicas. Para começar, se não tem trabalho a fazer, simplesmente “vai dormir”. Isto pode não parecer grande coisa, mas se estiver a alojar o seu site na nuvem pública, “pô-lo a dormir” pode poupar-lhe dinheiro – possivelmente muito dinheiro. Além disso, porque o Node.js não requer fechaduras para fazer o seu trabalho, não tem tendência a bloquear como algumas outras estruturas podem fazer. Este produto é mais parecido com jQuery do que com jQueryUI, na medida em que não o utiliza para criar uma interface de utilizador. Em vez disso, cria-se um código que reage a eventos – um cliente gera eventos, e o servidor responde a esses eventos. A interface de utilizador é um elemento separado que exibe qualquer resultado.
Porque Node.js é tão simples e rápido, com apoio da comunidade sem igual, que se pode encontrar no mais improvável dos lugares. Mesmo que pense não ter o pacote completo instalado, é provável que tenha pelo menos parte dele instalado como parte do Node.js Package Manager (NPM). De acordo com a fundação Node.js, existem 9 milhões de casos em que o mesmo funciona em mais de 50.000 mil pacotes. Por outras palavras, o Node.js forma a fundação de muitos dos pacotes que utiliza. Com Node.js, os programadores podem construir:
- Aplicações de backend
- Blogs
- Sistemas de gestão de clientes
- Serviços em tempo real, tais como aplicações de chat e jogos
- APIs de REST
- Aplicações sociais de rede
- Utilitários e ferramentas
Vue.js
Uma versátil estrutura JavaScript de código aberto, Vue é “progressiva”, o que significa que ao contrário de “estruturas monolíticas, Vue é concebido desde o início para ser incrementalmente adoptável”. Escalando entre uma biblioteca e uma estrutura completa, Vue utiliza um “modelo de desenvolvimento baseado em componentes” que lhe permite misturar e combinar componentes Vue nos seus projectos.
As características do Vue incluem componentes, modelos, transições, e ligação de dados bidireccional, mas talvez a sua característica mais distintiva seja o seu sistema de “reactividade”. Basicamente, reactividade significa que a actualização de um objecto JavaScript em Vue actualiza automática e discretamente os templates Vue.
Vue foi construído para poder ser utilizado por qualquer pessoa com conhecimentos de HTML, CSS, e JavaScript. Para ter uma ideia de como funciona, veja o vídeo abaixo:
Para mais informações, pode ver como Vue se compara com outros Frameworks aqui.
Outras escolhas
Não se esqueça que há muito mais bibliotecas JavaScript, comunidades, colecções, e frameworks disponíveis, muitas vezes com áreas de foco específicas.
Por exemplo, CodePen é uma comunidade online gratuita para testar e mostrar misturas de HTML, CSS, e JavaScript. Pense nisto como um ambiente social para designers e programadores front-end, uma comunidade de desenvolvimento online, e um editor com uma interface uniforme. Cada entrada CodePen chama-se Pen e pode vê-los em acção como parte de uma colecção. Algumas colecções são bastante chiques, tais como anime.js, enquanto outras, tais como Funny JS, têm widgets interessantes que talvez não se vejam noutros locais. Também funciona directamente com React.
Similiarmente, Jest é uma solução de teste JavaScript “zero configuração” concebida para funcionar fora da caixa com React.
BIDEO.JS, entretanto, fornece um método para exibir vídeos de fundo de ecrã inteiro, útil se estiver a construir um site para uma agência de viagens, por exemplo.
O resultado final
Como já deve estar claro, o problema não é encontrar uma biblioteca ou estrutura JavaScript que possa ajudá-lo a fazer algo interessante – é encontrar a biblioteca que o ajudará a fazer a única tarefa que precisa de realizar.
Além disso, quer ter a certeza de estar a confiar em bibliotecas que ainda estarão por perto amanhã. Ninguém quer ter de retrabalhar a sua aplicação porque a biblioteca JavaScript que utiliza já não está disponível. E mesmo que a maioria das bibliotecas e estruturas modernas de JavaScript sejam agora extremamente fiáveis, ainda tem de garantir que funcionam com todos os dispositivos e navegadores em que os seus utilizadores confiam.