Artigo original: 10 Awesome JavaScript Libraries You Should Try Out in 2021

Tradução em português europeu

O JavaScript é uma das linguagens mais populares da web. Ainda que tenha sido inicialmente desenvolvida apenas para páginas da web, tem apresentado um crescimento exponencial nas duas últimas décadas.

Atualmente, o JavaScript é capaz de fazer quase tudo. Ele funciona com diferentes plataformas e dispositivos, incluindo o que é denominado como a Internet das Coisas. Com o recente lançamento do SpaceX Dragon, o JavaScript já chegou, inclusive, ao espaço.

Uma das razões para a popularidade do JavaScript é a disponibilidade de um grande número de frameworks e bibliotecas. Isso torna a programação mais fácil comparada à programação com JavaScript mais tradicional.

Existem bibliotecas para quase tudo. Todos os dias, são desenvolvidas muitas mais. Com tantas bibliotecas à escolha, porém, torna-se difícil estarmos atualizados relativamente a cada uma delas e a como elas podem estar ajustadas especificamente às nossas necessidades.

Neste artigo, vamos discutir as 10 bibliotecas de JS mais populares, e que poderás usar num próximo projecto.

Leaflet

A Leaflet é a melhor biblioteca open source para adicionar mapas interativos para telemóveis na tua aplicação.

O seu tamanho reduzido (39kB) torna-a uma boa alternativa a considerar, quando comparada com outras bibliotecas de mapas. Com eficiência quando utilizada em diferentes plataformas e uma API bem documentada, ela tem tudo o que é preciso para se apaixonar.

Aqui está uma amostra de código para criar um mapa com a Leaflet:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});

Na Leaflet, temos de providenciar uma camada de mosaicos visto que não existe uma por definição. Isso também significa, contudo, que podemos escolher de uma ampla variedade de camadas (gratuitas e premium). Podes explorar as diferentes camadas de mosaicos aqui.

Se tiveres mais interesse, lê mais sobre a Leaflet e segue os tutoriais (página em inglês).

fullPage.js

Esta biblioteca open source ajuda-nos a criar sites com capacidade de rolagem em tela completa, como podes ver no GIF acima. É fácil de usar e tem várias opções de personalização. Por isso, não é uma grande surpresa que seja usada por milhares de programadores e que tenha 30 mil estrelas no GitHub.

Em baixo, tens uma demonstração no Codepen para poderes experimentar:

Podes usá-la com frameworks conhecidas como:

Encontrei a biblioteca há cerca de um ano atrás e, desde então, tem sido uma das minhas bibliotecas preferidas. É das poucas bibliotecas que uso em quase todos os meus projectos. Se ainda não começaste a usá-la, então experimenta-a. Não vais ficar desapontado.

anime.js

Uma das melhores bibliotecas de animação disponíveis, a Anime.js é flexível e simples de usar. É a ferramenta perfeita para te ajudar a adicionar alguma animação elegante ao teu projecto.

Anime.js funciona bem com propriedades CSS, SVG, atributos DOM e objetos do JavaScript e pode ser facilmente integrada nas tuas aplicações.

Como programador, é importante ter um bom portfolio. A primeira impressão que as pessoas têm do teu portfolio ajuda a decidir se és contratado ou não. Assim, que melhor ferramenta do que esta biblioteca para dar vida ao teu portfólio? Não só melhorará o teu site, mas também ajudará a demostrar habilidades reais.

Vê esta demonstração no Codepen para saber mais:

Também podes ver outros projetos fixes no Codepen ou ler a documentação aqui (em inglês).

Screenfull.js

Encontrei esta biblioteca enquanto procurava uma maneira de implementar uma característica de full-screen no meu projecto.

Se também precisares de uma característica de full-screen, recomendo usares esta biblioteca em vez da Fullscreen API devido à sua eficiência nos vários navegadores (ainda que seja construída sobre ela).

É tão pequena que nem vais reparar no seu tamanho – apenas cerca de 0.7kB zipada.

Experimenta a demo ou lê a documentação (em inglês), para saber mais.

Moment.js

Trabalhar com data e hora dá bastante trabalho, especialmente com chamadas de API, fusos horários diferentes, idiomas locais e assim por diante. Moment.js pode ajudar-te a resolver alguns problemas, seja a manipular, a validar, a analisar ou a formatar datas e tempo.

Existem vários métodos que podem ser úteis nos teus projetos. Por exemplo, eu usei o método .fromNow() num dos meus projetos do blog para mostrar a hora em que o artigo foi publicado.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago

Embora não o utilize com muita frequência, sou fã do seu apoio à internacionalização. Por exemplo, podemos personalizar o resultado acima usando o método .locale().

// Francês
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Espanhol
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un año

ezgif.com-video-to-gif — Página inicial do Moment.js

Lê a documentação aqui (em inglês).

Nota: também podes querer explorar alternativas, como Day.js ou date-fns.

Hammer.js

Hammer.js é uma biblioteca do JavaScript que te permite adicionar gestos multitoque nas tuas aplicações para a Web.

Recomendo esta biblioteca para adicionar um pouco de diversão aos teus componentes. Aqui fica um exemplo, para poderes experimentar. Basta tocar com o rato ou caneta no local onde está escrito "Run Pen" ou clicar na div cinza.

Ela consegue reconhecer gestos feitos à mão, através do rato ou pointerEvents. Para utilizadores do jQuery, recomendo usar o plug-in do jQuery.

$(element).hammer(options).bind("pan", myPanHandler);

Lê a documentação aqui (em inglês).

Masonry

A Mansonry é uma biblioteca do JavaScript de layout de grade. É maravilhosa e uso-a em muitos dos meus projectos. Suporta elementos de grade simples e a sua colocação de acordo com o espaço vertical disponível, semelhante ao que um construtor faria para encaixar pedras ou blocos para a construção de uma parede.

Podes usar essa biblioteca para m0strar os teus diferentes projectos numa luz diferente. Usa-a com cartas, imagens, modais, entre outros.

Aqui está um exemplo simples, para mostrar a magia em ação. Não é propriamente magia, mas demonstra como o layout muda conforme o zoom in da página web.

Aqui está o código do exemplo acima:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');

Aqui está uma demonstração interessante no Codepen:

Verifica estes projectos:

D3.js

Se és um programador obcecado por dados, então esta biblioteca é para ti. Ainda tenho de descobrir uma biblioteca que manipule tão eficazmente e de maneira tão bonita os dados como a D3. Com mais de 92 mil estrelas no
GitHub, a D3 é a biblioteca de visualização de dados preferida de muitos programadores.

Recentemente, utilizei a D3 para visualizar dados do COVID-19 e o Repositório de dados do Centro de Ciência e Engenharia de Sistemas (CSSE) da Universidade Johns Hopkins no GitHub. Foi um projecto muito interessante. Se estás a pensar em fazer algo semelhante, sugiro experimentares a D3.js.

Lê mais sobre essa biblioteca aqui (em inglês).

slick

A Slick é totalmente responsiva, com integração de swipe, loop infinito e muito mais. Tal como mencionado na sua página oficial, é mesmo o último carrossel de que precisas.

Tenho usado esta biblioteca por algum tempo, o que me permite poupar muito tempo. Com apenas algumas linhas de código, podes adicionar várias características ao teu carrossel.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Verifica as demonstrações aqui (página em inglês).

Popper.js

A Popper.js é uma biblioteca JavaScript leve, de cerca de 3kB, sem dependências e que fornece um mecanismo de posicionamento confiável e extensível, que podes usar para garantir que todos os teus elementos popper estejam posicionados no lugar certo.

Investir tempo para configurar elementos popper pode não parecer importante, mas essas são as pequenas coisas que te distinguem enquanto programador. C0m um espaço tão pequeno, ela nem sequer ocupa tanto espaço assim.

Lê a documentação aqui (em inglês).

Conclusão

Como programador, é importante possuir e usar as bibliotecas do JavaScript correctas. Tornar-te-á mais produtivo e tornará tua programação muito mais fácil e rápida. No fim de contas, és tu que decides qual a biblioteca que preferes usar, de acordo com as tuas necessidades.

Estas são as 10 bibliotecas do JavaScript que podes experimentar e começar a usar nos teus projectos hoje. Que outras bibliotecas do JavaScript utilizas? Gostarias de ler outro artigo parecido a este? Podes enviar uma mensagem ao autor pelo Twitter e informá-lo disso.