Frequentemente ouvimos termos como biblioteca JavaScript ou JavaScript Framework, mas para muitas pessoas novas no campo n\u00e3o sabem a diferen\u00e7a entre bibliotecas JS e estruturas JS. Muitos locais on-line tentaram encontrar respostas para essa pergunta frequente.<\/p>\n Uma boa resposta afirma que uma biblioteca JS \u00e9 uma biblioteca de c\u00f3digos JavaScript pr\u00e9-escritos projetados para facilitar o desenvolvimento de aplicativos baseados em JS. Subsequentemente, uma biblioteca JavaScript pode conter v\u00e1rios m\u00e9todos, objetos ou fun\u00e7\u00f5es, que dependem da linguagem.<\/p>\n Seu aplicativo, c\u00f3digo pai, pode chamar a biblioteca JS para permitir acesso \u00e0 funcionalidade.<\/p>\n Uma estrutura JavaScript \u00e9 uma cole\u00e7\u00e3o javascript de bibliotecas que chamar\u00e3o e usar\u00e3o o c\u00f3digo pai de uma maneira espec\u00edfica. Uma estrutura define todo o design do aplicativo, possuindo o controle de seu aplicativo e oferecendo retornos de chamada e ganchos sobre os quais voc\u00ea pode criar.<\/p>\n Uma biblioteca JavaScript \u00e9 um peda\u00e7o de c\u00f3digo que pode ser reutilizado para fornecer uma funcionalidade espec\u00edfica. \u00c9 diferente de um framework em seu fluxo de controle: uma biblioteca oferece fun\u00e7\u00f5es, classes e objetos para serem chamados por seu c\u00f3digo pai, ou seja, para serem usados \u200b\u200bem sua aplica\u00e7\u00e3o.<\/p>\n A biblioteca extrair\u00e1 ou selecionar\u00e1 diferentes camadas, o que significa que voc\u00ea n\u00e3o precisar\u00e1 se preocupar com os detalhes da implementa\u00e7\u00e3o. Chame uma fun\u00e7\u00e3o na biblioteca e entregue a ela v\u00e1rios par\u00e2metros. A biblioteca JavaScript ir\u00e1 execut\u00e1-lo e retornar o controle para voc\u00ea.<\/p>\n As bibliotecas JavaScript n\u00e3o imp\u00f5em restri\u00e7\u00f5es estruturais para limitar a maneira como voc\u00ea usa a biblioteca.<\/p>\n Confira esta cole\u00e7\u00e3o popular de bibliotecas JavaScript:<\/p>\n Os desenvolvedores do Instagram e do Facebook s\u00e3o os criadores do React, uma biblioteca JavaScript vers\u00e1til, que os desenvolvedores designaram como a tecnologia mais amada de acordo com a Pesquisa Stack Overflow de 2017. A contagem de estrelas do GitHub o classifica como o projeto JavaScript mais popular.<\/p>\n O React permite que os desenvolvedores gerem uma interface de usu\u00e1rio interativa por meio de um m\u00e9todo declarativo que permite o controle total do estado do aplicativo, afirmando que “a visualiza\u00e7\u00e3o deve ser assim".<\/p>\n O React emprega um modelo baseado em componentes e cada componente \u00e9 um elemento de interface de usu\u00e1rio reutiliz\u00e1vel com seu pr\u00f3prio estado. Usando um DOM virtual, o React \u00e9 uma das melhores bibliotecas JavaScript que tiram da equa\u00e7\u00e3o as preocupa\u00e7\u00f5es relacionadas \u00e0 manipula\u00e7\u00e3o direta do DOM.<\/p>\n React \u00e9 uma biblioteca JavaScript rica em recursos e algumas de suas caracter\u00edsticas mais marcantes incluem sintaxe JSX opcional, fluxo de dados unidirecional e uma ferramenta de linha de comando que aprimora a cria\u00e7\u00e3o de um projeto React sem a necessidade de configurar a constru\u00e7\u00e3o. Com os muitos pacotes React<\/a> dispon\u00edveis, voc\u00ea pode construir coisas incr\u00edveis.<\/p>\n O que \u00e9 jQuery? jQuery \u00e9 uma biblioteca JavaScript, e voc\u00ea pode baixar o jQuery em jquery.com ou no site JavaScript, onde voc\u00ea tamb\u00e9m pode encontrar a documenta\u00e7\u00e3o do jQuery sobre como usar o jQuery. A biblioteca jQuery \u00e9 um software multiplataforma gratuito usando licen\u00e7a MIT permissiva.<\/p>\n Para que serve o jQuery? JavaScript jQuery permite uma manipula\u00e7\u00e3o DOM mais f\u00e1cil e torna o JavaScript mais acess\u00edvel. jQuery \u00e9 um framework? N\u00e3o, Java Script jQuery \u00e9 uma biblioteca, n\u00e3o um framework. \u00c9 uma biblioteca amig\u00e1vel ao desenvolvedor devido \u00e0 sintaxe f\u00e1cil e \u00e0 curva de aprendizado suave.<\/p>\n jQuery \u00e9 uma das bibliotecas JavaScript mais populares e sua popularidade como um construtor de sites confi\u00e1vel com suporte a v\u00e1rios navegadores foi alimentada por caracter\u00edsticas fundamentais, como manipula\u00e7\u00e3o de eventos, manipula\u00e7\u00e3o de DOM com base em seletores CSS e capacidade de fazer chamadas AJAX.<\/p>\n O JavaScript como linguagem de programa\u00e7\u00e3o evoluiu extensivamente e v\u00e1rios dos recursos mais recentes do jQuery foram integrados \u00e0 mais nova especifica\u00e7\u00e3o ECMAScript.<\/p>\n As principais estruturas e bibliotecas JavaScript de hoje n\u00e3o exigem mais t\u00e9cnicas de manipula\u00e7\u00e3o do DOM, pois possuem um m\u00e9todo integrado de vincula\u00e7\u00e3o do DOM. Dentro desse contexto, o jQuery pode n\u00e3o ser t\u00e3o popular quanto costumava, mas continua sendo uma das bibliotecas JavaScript mais utilizadas.<\/p>\n D3 \u00e9 uma biblioteca de visualiza\u00e7\u00e3o que usa padr\u00f5es como HTML, SVG e CSS. \u00c9 uma biblioteca JavaScript poderosa e exclusiva que aumenta substancialmente o controle sobre o resultado final.<\/p>\n D3: Data-Driven Documents vincula os dados ao DOM e faz a transforma\u00e7\u00e3o no documento. Com seu pr\u00f3prio ecossistema de bibliotecas e plugins, o D3 ampliou sua funcionalidade b\u00e1sica. Al\u00e9m disso, existem v\u00e1rios tutoriais e documenta\u00e7\u00e3o dispon\u00edveis online.<\/p>\n O Underscore entrou no dom\u00ednio do JavaScript em 2009 e foi desenvolvido por Jeremy Ashkenas como uma biblioteca de utilit\u00e1rios vers\u00e1til que abrange mais de 100 fun\u00e7\u00f5es diferentes. Essas fun\u00e7\u00f5es permitem que os desenvolvedores controlem objetos, matrizes e outras fun\u00e7\u00f5es.<\/p>\n Os principais recursos incluem auxiliares de programa\u00e7\u00e3o funcionais, como mapear, filtrar e reduzir. FP, ou Programa\u00e7\u00e3o Funcional, \u00e9 um paradigma popular que evita a mudan\u00e7a de estado e a altera\u00e7\u00e3o de dados.<\/p>\n O Lodash entrou no mundo das bibliotecas JavaScript em 2012. Projetado por John-David Dalton, o Lodash oferece suporte de itera\u00e7\u00e3o consistente em v\u00e1rios ambientes para strings, arrays e objetos de argumento.<\/p>\n Hoje, o Lodash \u00e9 o superconjunto do Underscore definido pela documenta\u00e7\u00e3o aprimorada e mais recursos. A maioria dos desenvolvedores, incluindo os contribuidores do Underscore, agora est\u00e3o trabalhando com o Lodash em vez do Underscore.<\/p>\n Os padr\u00f5es do JavaScript evolu\u00edram tanto que muitos dos utilit\u00e1rios disponibilizados por bibliotecas externas agora est\u00e3o inclu\u00eddos no JavaScript.<\/p>\n Dentro deste contexto, Lodash e Underscore podem n\u00e3o ser mais necess\u00e1rios, embora tanto o Lodash quanto o Underscore continuem sendo excelentes bibliotecas de utilit\u00e1rios particularmente \u00fateis para aplicativos FP.<\/p>\n JavaScript Frameworks estabelece e controla o fluxo de controle de seu aplicativo. Ele define o esqueleto e informa aos desenvolvedores como os elementos essenciais devem ser organizados. As melhores estruturas JavaScript tamb\u00e9m fornecem funcionalidades b\u00e1sicas para configurar o aplicativo.<\/p>\n Usando uma estrutura JavaScript, voc\u00ea se torna obrigado a respeitar os padr\u00f5es e princ\u00edpios de design da respectiva estrutura. A estrutura chama voc\u00ea, enquanto voc\u00ea chama uma biblioteca.<\/p>\n As estruturas JavaScript geralmente consistem em v\u00e1rias bibliotecas. Eles t\u00eam um alto n\u00edvel de abstra\u00e7\u00e3o e uma s\u00e9rie de recursos embutidos, incluindo teste, vincula\u00e7\u00e3o de modelo, vincula\u00e7\u00e3o de dados, chamadas AJAX ou manipula\u00e7\u00e3o de eventos. Aqui est\u00e3o alguns dos melhores frameworks JavaScript:<\/p>\n Tr\u00eas frameworks principais governam o mundo do JavaScript na categoria de popularidade, ou seja, Angular, Vue e React. Esses frameworks s\u00e3o o melhor lugar para come\u00e7ar a aprender um framework para novos desenvolvedores. H\u00e1 uma abund\u00e2ncia de recursos de aprendizagem dispon\u00edveis.<\/p>\n Uma vez cunhado como o mais popular e o melhor framework de javascript, bem como o melhor framework de front-end para JavaScript, o Angular teve o apoio do Google e de um s\u00f3lido grupo de empresas e indiv\u00edduos. A \u00faltima vers\u00e3o do Angular foi lan\u00e7ada em 2016.<\/p>\n Vue.js \u00e9 um framework JavaScript progressivo lan\u00e7ado em 2014 por Evan You em uma \u00e9poca em que ele ainda fazia parte da equipe do Google. Uma estrutura de c\u00f3digo aberto, o Vue.js mudou drasticamente desde 2014 e agora \u00e9 considerado um SPA refinado.<\/p>\n A progressividade do Vue o torna um poderoso framework JavaScript porque voc\u00ea pode adicion\u00e1-lo em seu aplicativo progressivamente. \u00c9 uma estrutura que pode ser facilmente misturada e combinada em seus projetos JS, um \u00f3timo recurso que falta ao Angular e ao Ember.<\/p>\n Os recursos dispon\u00edveis com o Vue.js incluem modelos, componentes, vincula\u00e7\u00e3o de dados bidirecional, foco de reatividade e transi\u00e7\u00f5es.<\/p>\n Bootstrap \u00e9 um framework JavaScript front-end que foi criado para quem n\u00e3o gosta de design. Anteriormente conhecido como Twitter Blueprint, o Bootstrap se promove como o melhor framework JS, HTML e CSS para projetos responsivos e mobile-first.<\/p>\n Mark Otto e Jacob Thornton, que faziam parte do Twitter na \u00e9poca, lan\u00e7aram o Bootstrap em 2011. \u00c9 um framework que pessoas que n\u00e3o s\u00e3o designers podem usar para produzir sem muito esfor\u00e7o sites com apar\u00eancia razo\u00e1vel e implementar design responsivo.<\/p>\n Bootstrap usa plugins JS e \u00edcones, estilos e componentes CSS. Os plugins incluem modelos, alertas, dropdowns e bot\u00f5es, entre outros.<\/p>\n Outra estrutura JS de c\u00f3digo aberto, Ember.Js \u00e9 uma ferramenta de compila\u00e7\u00e3o desenvolvida por Yehuda Katz como SproutCore 2.0 e lan\u00e7ada em 2011. Possui um roteador embutido e Ember Data. O Ember.js \u00e9 considerado uma estrutura r\u00edgida e adapt\u00e1vel com foco na conven\u00e7\u00e3o e n\u00e3o na configura\u00e7\u00e3o.<\/p>\n Muitos novos desenvolvedores se sentem desencorajados por desenvolvedores experientes que afirmam que a arena do JavaScript est\u00e1 mudando muito r\u00e1pido. Como um novo desenvolvedor, voc\u00ea pode ouvir reclama\u00e7\u00f5es sobre como existem muitas bibliotecas e estruturas JavaScript surgindo muito rapidamente.<\/p>\n Sim, o mundo JavaScript \u00e9 um ambiente de ritmo acelerado; n\u00e3o adianta negar o \u00f3bvio. No entanto, voc\u00ea ainda precisa aprender uma estrutura se quiser entrar no dom\u00ednio JS. Este artigo oferece apenas uma r\u00e1pida olhada no vibrante mundo das bibliotecas e estruturas JavaScript.<\/p>\n Passe para o pr\u00f3ximo n\u00edvel e selecione uma estrutura e uma biblioteca e comece a aprender!<\/p>\n Se voc\u00ea gostou de ler este artigo sobre bibliotecas JavaScript, confira este sobre o sal\u00e1rio do desenvolvedor do WordPress<\/a>.<\/p>\n Tamb\u00e9m escrevemos sobre alguns assuntos relacionados como treinamento em WordPress<\/a>, convers\u00e3o de HTML para WordPress<\/a>, melhor editor de c\u00f3digo<\/a> e extens\u00f5es Brackets<\/a>.<\/p>\n![\"Bibliotecas](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-204142-61e8c7faeee9b.jpg\")
<\/a><\/p>\n\n
O que \u00e9 uma biblioteca JavaScript?<\/h3>\n<\/li>\n<\/ul>\n
<\/a><\/p>\n\n
O que \u00e9 uma estrutura JavaScript?<\/h3>\n<\/li>\n<\/ul>\n
<\/a><\/p>\nBibliotecas JavaScript<\/h3>\n
<\/a><\/p>\n\n
Reagir<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
jQuery<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
D3: Documentos baseados em dados<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
Sublinhado e Lodash<\/strong><\/h3>\n<\/li>\n<\/ol>\n
\n
Sublinhado<\/a><\/h3>\n<\/li>\n<\/ul>\n
<\/a><\/p>\n\n
Lodash<\/a><\/h3>\n<\/li>\n<\/ul>\n
<\/a><\/p>\nEstruturas JavaScript populares<\/strong><\/h3>\n
<\/a><\/p>\nOs tr\u00eas grandes frameworks JavaScript<\/h3>\n
\n
Angular<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
Js<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
Bootstrap<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\n\n
Human.js<\/a><\/h3>\n<\/li>\n<\/ol>\n
<\/a><\/p>\nConsidera\u00e7\u00f5es finais sobre as bibliotecas do JavaScript<\/strong><\/h3>\n