10 JavaScript Libraries and Frameworks to Learn This Year

Como novo desenvolvedor, o número de bibliotecas e frameworks disponíveis pode ser avassalador.

Como sabe quais deve aprender a usar? Quais serão mais úteis na sua carreira de programador? Neste post especial, Erik Hanchett dá-nos uma visão geral das suas dez melhores bibliotecas e frameworks de JavaScript.

Erik!

>p>-

Neste post, iremos discutir 10 bibliotecas e frameworks de JavaScript e para que são usadas. Tentei escolher algumas das mais populares bibliotecas e frameworks JS, mais algumas que talvez não tenham ouvido antes.

Esta lista destina-se a servir de introdução para principiantes, para que possam ter uma ideia sobre o que há por aí e porque devem usar estas frameworks e bibliotecas em JavaScript. Ao trabalhar como programador web tem muitas opções, o que torna importante saber que bibliotecas e frameworks JS são melhores para que cenários.

Tabela de Conteúdos

Divulgação: Sou uma afiliada orgulhosa de alguns dos recursos mencionados neste artigo. Se comprar um produto através das minhas ligações nesta página, posso receber uma pequena comissão por o ter encaminhado. Obrigado!

Qual é a diferença: JavaScript Libraries vs. Frameworks

Uma pergunta que ouço com bastante frequência é “Qual é a diferença entre bibliotecas e frameworks JavaScript”? Essa é uma boa pergunta, e tem havido muita discussão em linha. Vou abordar brevemente as diferenças, mas pode encontrar alguns guias mais aprofundados aqui, aqui, e aqui.

O que são bibliotecas JavaScript?

Geralmente, uma biblioteca JS é uma peça de código reutilizável que, muitas vezes, tem um caso de uso primário. Uma biblioteca pode ser constituída por várias funções/objectos/métodos, dependendo da língua. A sua aplicação pode “ligar” a uma biblioteca para lhe permitir o acesso a essa funcionalidade.

O que são estruturas JavaScript?

Por outro lado, uma estrutura JS tem mais controlo sobre a sua aplicação. Ajuda-o a orientar a arquitectura e o projecto que se segue. As frameworks consistem em múltiplas bibliotecas e fornecem-lhe ganchos e callbacks, para que possa continuar a construir sobre elas.

As frameworks e bibliotecas JavaScript são ambas úteis e é uma boa ideia experimentar e ver quais funcionam melhor para si.

Tem uma biblioteca ou framework JavaScript que não tenha coberto? Deixe um comentário abaixo!

Lista de Bibliotecas JavaScript

P>Comecemos pelas bibliotecas!

jQuery: Um Antigo Clássico (Mas Será Obsoleto?)

No mundo JavaScript, jQuery é ainda, de longe, uma das bibliotecas mais prolíficas e populares por aí. Foi lançada em 2006 por John Resig e tem sido utilizada em websites de todo o mundo. Em algumas estimativas, mais de 50% de todos os websites conhecidos utilizam jQuery. São centenas de milhões (se não milhares de milhões) de sítios Web. Então o que é jQuery? jQuery é uma biblioteca utilizada principalmente para manipulação de modelos de objectos de documentos (DOM). O DOM é uma estrutura semelhante a uma árvore que representa todos os elementos de uma página web.

A biblioteca jQuery pode seleccionar elementos DOM, criar animações, lidar com eventos, e muito mais. O seu objectivo é ser extensível, simples, e claro de usar. Trata de todas as incompatibilidades entre navegadores, e promove a separação do HTML e JavaScript.

P>Possuiria usar jQuery? Bem, depende. Alguns websites insistem que o jQuery já não é necessário. Os browsers modernos melhoraram muito as suas Interfaces de Programação de Aplicações DOM (API). No passado, poderia ter usado jQuery para fazer selecções simples de consultas. Agora pode fazê-lo facilmente com o velho JavaScript.

Outras vezes, com a popularidade das estruturas de aplicação de página única (SPA), não faz sentido utilizar jQuery em muitas circunstâncias. Por exemplo, a maioria dos SPAs têm algum tipo de tratamento de eventos incorporado. A utilização de jQuery pode causar mais danos do que bem nestes casos.

No mínimo, deve aprender o básico de jQuery como um novo desenvolvedor web. Encontrará quase de certeza bases de código mais antigas que utilizam jQuery, e de vez em quando é útil noutros cenários.

Onde aprendê-lo: jQuery básico em Team Treehouse

O que o curso cobre: Os fundamentos da manipulação de elementos numa página web e da resposta às interacções dos utilizadores – com jQuery.

Factos do curso:

• Nome do curso: jQuery basic
• Plataforma: Equipa Treehouse
• Instruído por: Treasure Porth
• Preço: $25/mês com uma assinatura da Team Treehouse

Nível de matança: Principiante

Chefe de volta à tabela de conteúdos “

Underscore e Lodash: Utility JS Libraries

Em 2009, Jeremy Ashkenas criou o Underscore. Underscore é uma biblioteca de utilidades que consiste em mais de 100 funções. Estas funções ajudá-lo-ão a manipular matrizes, objectos e outras funções.

Uma das características mais poderosas de Underscore é o seu ajudante de programação funcional. Por exemplo, mapa, filtro e redução são algumas das mais populares. A programação funcional (FP) é um paradigma de programação que evita a mudança de estado e a mutação de dados. A FP tornou-se cada vez mais popular nos últimos anos, mas está hoje fora do âmbito deste artigo.

Em 2012, Lodash teve o seu primeiro lançamento inicial. John-David Dalton criou esta biblioteca para ter um suporte de iteração transversal mais consistente para arrays, cordas, e objectos de argumento.

No processo, Lodash tornou-se um super conjunto de Underscore com mais características e melhor documentação. Hoje em dia, a maioria dos criadores mudou-se de Underscore para Lodash. Mesmo muitos dos colaboradores do Underscore trabalham agora no Lodash.

Aqui está a preocupação de que o Lodash já não seja necessário, uma vez que o JavaScript evoluiu. À medida que o padrão JavaScript evolui, novos lançamentos incluíram alguns dos utilitários que só se podiam obter de bibliotecas externas como Lodash e Underscore.

No entanto, Lodash e Underscore são excelentes bibliotecas que são especialmente úteis para quaisquer aplicações FP.

Onde aprendê-lo: Underscore.js Fundamentals on Pluralsight

O que o curso cobre: Como manipular e controlar colecções JavaScript, matrizes, objectos e funções – com Underscore.js.

Factos do curso:

• Nome do curso: Fundamentos do Underscore.js
• Plataforma: Pluralsight
• Instruído por: Craig Shoemaker
• Preço: $29/mês com uma inscrição Pluralsight

Nível de matança: Intermediário

Chefe de volta ao índice “

D3.js: uma Biblioteca para Gráficos e Visualizações

D3.js é uma biblioteca JavaScript para visualização de dados. Esta biblioteca foi desenvolvida em 2011 a partir de um projecto anterior chamado Protovis. Mike Bostock, Jeff Heer, e Vadim Ogievetsky desenvolveram D3.js para ser mais expressivo do que o seu predecessor e mais compatível com as normas web actuais.

D3.js é uma grande ferramenta na criação de visualizações personalizadas. Isto pode ser algo tão simples como um gráfico de barras, ou tão complexo como um gráfico de superfície 3D. A biblioteca tem uma poderosa API que utiliza selectores, muito parecidos com os que se podem ver em jQuery. Após seleccionar um elemento no DOM pode fazer todo o tipo de transições e manipulações.

D3 5+ a última versão de D3, é uma colecção de 52 módulos diferentes. Cada um tem um propósito diferente. Alguns facilitam o trabalho com as cores; outros trabalham com elementos SVG de arrastar e largar.

se pretende fazer qualquer tipo de visualização, esta é a biblioteca JS para verificar!

Onde aprendê-lo: Visualização de informação: Programação com D3.js em Coursera

O que o curso cobre: O básico da criação de visualizações com D3.js, incluindo um sistema de visualização totalmente funcional para visualizar rotas aéreas.

Fatos do curso:

• Nome do curso: Visualização de informação: Programação com D3.js
• Plataforma: Coursera
• Instruído por: Enrico Bertini e Cristian Felix
• Preço: $39/mês com uma assinatura Coursera

Nível de matança: Principiante

Chefe de volta ao índice “

Reagir: Biblioteca Javascript Favorita do Facebook

Em Março de 2013, Jordan Walke lançou React enquanto trabalhava no Facebook. Desde então, React tornou-se uma das bibliotecas front-end mais populares e é utilizada em centenas de milhares de sites em todo o mundo.

React (ou React.js como é por vezes chamada) é uma biblioteca de código aberto apoiada pelo Facebook. É utilizada para ajudar a criar aplicações web de pequena ou grande escala e é particularmente útil na criação de sítios web interactivos. A sua tag line é “A JavaScript Library For Building User Interfaces”.

React é por vezes chamada de SPA, ou aplicação de página única. Este termo refere-se a aplicações web que podem caber numa única página web e não requerem constantes actualizações a partir do navegador web. O conteúdo é carregado dinamicamente quando necessário, utilizando JavaScript.

Utiliza componentes, que ajudam a encapsular código e estado. A utilização de componentes facilita a construção de interfaces de utilizador complicadas.

React usa JSX, que é uma sintaxe semelhante a XML que combina JavaScript e HTML. Não é uma linguagem de modelação; é uma linguagem completa em JavaScript. Alguns novos programadores podem achar o JSX um pouco confuso no início. No entanto, depois de trabalhar com ele durante algum tempo, compreenderá como é benéfico. Por exemplo, o JSX torna fácil envolver expressões JavaScript directamente dentro do seu HTML.

React tem muito a ver com isto, e é definitivamente uma biblioteca que deve procurar se estiver no desenvolvimento web de front-end.

Onde aprendê-lo: Dominar Reagir em Código com Mosh

O que o curso cobre: Como construir e implementar aplicações React rápidas e interactivas com confiança, incluindo React Native (para construir aplicações móveis).

Factos do curso:

• Nome do curso: Mastering React
• Plataforma: Código Com Mosh
• Instruído por: Mosh Hamedani
• Preço: $29 para o curso completo

Nível de matança: Principiante

Chefe de volta ao índice “

Glimmer.js: Biblioteca com Componentes UI para a Web

Glimmer.js é um recém-chegado relativo ao ecossistema da biblioteca JavaScript. Foi desenvolvida pelas mesmas pessoas que lhe trouxeram Ember.js e foi lançada no início de 2017. O seu slogan é “Componentes UI rápidos e leves para a Web”.

Glimmer.js foi construído pela equipa Ember como resposta aos programadores que queriam algo mais pequeno e mais leve do que Ember.js. Tal como discutido durante a nota-chave da EmberConf 2017, Tom Dale ouviu algumas das críticas ao Ember.js e usou isso para ajudar a construir o Glimmer.js.

Glimmer.js apresenta componentes mais leves e um tamanho mais pequeno, e usa o robusto Ember CLI. Pode ser usado com Ember.js como componente, pode funcionar de forma autónoma, ou pode ser adicionado como componente web a uma aplicação existente.

Estamos nos primeiros dias de Glimmer.js, mas estou entusiasmado por ver para onde vai!

Lista de frameworks Javascript

Agora vamos dar uma vista de olhos a frameworks.

Bootstrap: JavaScript Framework for Those Who Who Dislike Design

Bootstrap é um front-end framework de código aberto para o ajudar na concepção de websites. No website Bootstrap, o slogan é “Bootstrap é a estrutura HTML, CSS, e JS mais popular para desenvolver projectos de resposta rápida, mobile-first na web”.

Foi originalmente nomeado Twitter Blueprint e foi desenvolvido por Mark Otto e Jacob Thornton enquanto trabalhavam no Twitter. O seu primeiro lançamento inicial foi em 2011.

A maior força do Botstrap é como é fácil para os não-designers criar rapidamente websites com aspecto decente. Para não mencionar, Bootstrap facilita a criação de designs reactivos (websites que se ajustam dinamicamente de acordo com o dispositivo utilizado: comprimidos, telemóveis, etc.).

Apresenta uma série de estilos CSS, ícones, componentes e plugins JavaScript. Estes plugins incluem muitas coisas comuns que poderá utilizar na construção de um website. Isto inclui modais, dropdowns, alertas, e botões, para citar alguns.

Existiram algumas críticas ao Bootstrap. Uma crítica que vejo muito é que devido à sua popularidade, há muitos websites construídos em Bootstrap que são muito parecidos, tornando mais difícil construir um website de aspecto único. Tenha isso em mente.

Se está a começar a aprender o desenvolvimento web mas não está no aspecto do design, veja Bootstrap.

Onde aprendê-lo: O Guia completo do Bootstrap 4: Principiante a Avançado

O que o curso cobre: Como usar o Bootstrap para implementar primeiras páginas web móveis com CSS e JavaScript.

Fatos do curso:

• Nome do curso: O Guia completo do Bootstrap 4: Iniciante a Avançado
• Plataforma: Udemy
• Instruído por: Andrew Whitworth
• Preço: $174,99 (mas Udemy tem frequentemente vendas)

Nível de matança: Intermediário

Chefe de volta ao índice “

Angular e AngularJS: Estrutura JavaScript do Google

AngularJS, também conhecida como AngularJS 1.x, é uma estrutura JavaScript de código aberto criada e mantida pelo Google. O seu lançamento inicial foi em 2010.

AngularJS é uma estrutura de front-end que o ajuda a criar aplicações web. É também uma estrutura SPA semelhante a React ou Ember.js.

AngularJS utiliza directivas que podem ser inseridas no HTML para dar mais funcionalidade à aplicação. Também suporta ligação de dados bidireccional.

Angular, por vezes conhecido como Angular 2+, é uma estrutura de front-end de código aberto baseada em TypeScript. É uma reescrita completa do AngularJS. É mais modular, recomenda o uso de TypeScript, e uma sintaxe de expressão mais simples.

No início, muitas pessoas estavam preocupadas que o Google abandonasse o Angular 1 quando o Angular 2+ aparecesse. Felizmente, parece que ambos os projectos estão a ser mantidos.

Então, por onde deve começar, Angular 1 ou Angular 2+? Eu recomendaria começar por 1, uma vez que há muito mais trabalhos para 1 neste momento. Em geral, Angular é um óptimo enquadramento a ter em conta se for um novo projecto.

Onde aprendê-lo: Aprenda AngularJS 1.X no Codecademy

O que o curso cobre: Aplique o seu conhecimento de HTML e JavaScript para construir aplicações web de página única com AngularJS. Ser-lhe-á apresentado o padrão de programação Model-View-Controller (MVC) e terá a oportunidade de construir a sua própria aplicação a partir do zero.

Fatos do curso:

• Nome do curso: Aprenda AngularJS 1.X
• Plataforma: Codecademia
• Instruído por: Vários instrutores
• Preço: $19,99/mês com uma assinatura da Codecademy Pro

Nível de instrução: Intermediário (base forte de JavaScript e conhecimentos básicos de HTML necessários)

Chefe de volta ao índice “

Ember.js: a estrutura JavaScript incluída no JavaScript Framework

Ember.js é uma estrutura JavaScript de código aberto que foi inicialmente lançada em 2011 por Yehuda Katz. Era inicialmente conhecida como SproutCore 2.0 antes de ser conhecida como Ember.js.

Não é segredo que Ember.js é uma das minhas estruturas favoritas. Até escrevi um livro sobre ele! A principal coisa que gostei no Ember é a sua mentalidade de “pilhas incluídas”. Ember apresenta uma excelente ferramenta de construção, que muitas outras estruturas SPA emprestaram, chamada Ember CLI.

Esta ferramenta de construção oferece tudo o que é necessário para começar. Precisa de um router? Está integrado. Precisa de testes? Isso também está integrado. Precisa de trabalhar com dados de um back-end? Há Ember Data.

Ember.js segue muitos dos mesmos princípios que Ruby on Rails tem. É altamente opinante, flexível, e prefere a convenção à configuração.

Ember.js está apenas a melhorar, e eu recomendá-lo-ia vivamente.

Onde aprendê-lo: Ember.js Essential Training on LinkedIn Learning

O que o curso cobre: Introdução aos routers e modelos da Ember, bem como como construir um novo projecto a partir do zero, utilizando modelos para criar páginas simples e carregar dinamicamente conteúdos com componentes e ajudantes.

Factos do curso:

• Nome do curso: Ember.js Formação Essencial
• Plataforma: LinkedIn Learning
• Instructed by: Justin Yost
• Preço: $34.99

Nível de instrução: Intermediário

Chefe de volta ao índice “

Aurelia: o Forward-looking JavaScript Framework

Aurelia é um front-end, um framework de código aberto criado por Rob Eisenberg. O Aurelia 1.0 foi lançado pela primeira vez em 2016.

Aurelia tem como slogan “A JavaScript framework for mobile, desktop, and web, leveraging simple conventions and empowering creativity”.

Aurelia é outro SPA como React, Angular, e Ember.js. É poderoso e componível. Pode usar um ou todos os seus diferentes módulos para criar a sua aplicação. Oferece encaminhamento, ligação de dados bidireccional também.

Aurelia é um quadro muito prospectivo. Utiliza muitas novas funcionalidades ECMAScript (ECMAScript ajuda a ditar normas JavaScript), e encoraja-o a escrever o seu código utilizando estas novas funcionalidades. Isto é uma coisa boa, já que não está a aprender uma sintaxe personalizada que só funcionará com Aurelia.

Verifica se isto lhe parece interessante!

Onde aprendê-lo: Aurelia Fundamentals on Pluralsight

O que o curso cobre: Como aproveitar todas as características chave do Aurelia, incluindo a composição da IU, ligação de dados nos dois sentidos, encaminhamento e navegação do lado do cliente, e mais.

Fatos do curso:

• Nome do curso: Aurelia Fundamentals
• Plataforma: Pluralsight
• Instruído por: Brian Noyes
• Preço: $29/mês com uma inscrição Pluralsight

Nível de matança: Intermediário

Chefe de volta ao índice “

Vue.js: a estrutura JavaScript progressiva

Vue.js é uma estrutura JavaScript progressiva de código aberto criada inicialmente por Evan You em 2014 enquanto ele trabalhava para o Google. Desde então, o Vue.js tem mudado muito. Foi reescrito e refinado num grande SPA.

Um dos maiores pontos fortes de Vue.js é a sua progressividade. Por outras palavras, pode progressivamente adicionar Vue à sua aplicação. Ao contrário do AngularJS e Ember, pode facilmente misturar e combinar Vue em projectos.

Algumas das suas características incluem componentes, modelos, transições, e ligação de dados bidireccional, bem como um foco na reactividade.

Reactividade ocorre quando se altera ou actualiza qualquer um dos objectos JavaScript da Vue. Isto, por sua vez, actualizará os modelos da Vue. O Vue.js utiliza algo chamado Shadow DOM que torna a página rápida.

Tivei muito tempo para trabalhar no Vue. Na verdade, escrevi um livro sobre ele!

Onde aprendê-lo: Vue – O Guia Completo (c/ Router, Vuex, Composition API) sobre Udemy

O que o curso cobre: Como construir aplicações Vue.js – todo o caminho desde as pequenas e simples até às grandes, de nível empresarial.

Fatos do curso:

• Nome do curso: Vue – O Guia Completo (c/ Router, Vuex, Composition API)
• Plataforma: Udemy
• Instructed by: Maximilian Schwarzmüller
• Preço: $189,99 (mas Udemy tem frequentemente vendas)

Nível de matança: Intermediário

Pronto para elevar ainda mais o seu nível de JavaScript? Verifique o programa Intermediário de Nanodegree JavaScript da Udacity para aprender um conjunto mais avançado de competências em JavaScript.

Chefe de volta ao índice “

TL;DR: as mais populares Bibliotecas e Estruturas JavaScript

Para aqueles de vós que são novos no desenvolvimento da web – irão ouvir muitas pessoas cínicas a falar sobre como o mundo JavaScript se tornou demasiado rápido. Irão gemer que novas bibliotecas e frameworks de JavaScript estão a sair demasiado depressa e que todos estão a tentar fazer a mesma coisa.

Não estão errados por ser de ritmo acelerado, mas isso não deve impedi-lo de sair e aprender sobre estas frameworks e bibliotecas de JavaScript. Só vos dei uma amostra de cada uma. Cabe-lhe a si pegar numa e começar a aprender.

Quando sou mentor de novos criadores, recomendo que escolham uma equipa. Depois de aprenderem o básico (HTML, JavaScript, e CSS), têm muitas escolhas. Não tente fazer tudo ao mesmo tempo, no entanto: escolha uma estrutura e seja bom nisso. Não precisa de aprender todas elas. Só precisa de aprender pelo menos uma para poder meter o pé na porta algures.

Boa sorte!

sobre o Autor

Erik Hanchett é um programador de software, YouTuber, blogger, e aficionado por sushi. Ele escreve código há mais de 10 anos. O autor de Erik escreveu dois livros, o Ember.js Cookbook e o Vue.js in Action, a ser lançado em breve. Reside actualmente em Reno, Nevada, com a sua mulher e dois filhos. Pode encontrar mais informações de Erik no seu blogue http://www.programwitherik.com.

Nota: há links de afiliados neste post.