História e herança do JQuery


O jQuery é a biblioteca JavaScript mais popular do mundo. A comunidade de desenvolvedores da web o criou no final dos anos 2000, o que levou ao surgimento de um rico ecossistema de sites, plug-ins e estruturas que usam o jQuery sob o capô.

Mas, nos últimos anos, seu status como a principal ferramenta para o desenvolvimento da web foi abalado. Vamos ver por que o jQuery se tornou popular e por que saiu de moda, e em quais casos ainda é aconselhável usá-lo para criar sites modernos.

Uma breve história do jQuery


John Resig criou a primeira versão da biblioteca em 2005 e a publicou em 2006 em um evento chamado BarCampNYC. No site oficial do jQuery, o autor escreveu:

jQuery é uma biblioteca Javascript baseada no lema: Deve ser legal programar em Javascript. O jQuery realiza tarefas frequentes e repetitivas, extrai todas as marcações desnecessárias e as torna breves, elegantes e compreensíveis.

JQuery tem duas vantagens principais. A primeira é uma API conveniente para manipular páginas da web. Em particular, fornece métodos poderosos para a seleção de itens. Você pode escolher não apenas por ID ou classes, o jQuery permite escrever expressões complexas, por exemplo, para selecionar elementos com base em seus relacionamentos com outros elementos:

// Select every item within the list of people within the contacts element $('#contacts ul.people li'); 

Com o tempo, o mecanismo de seleção evoluiu para uma biblioteca Sizzle separada.

A segunda vantagem da biblioteca era que ela abstraía as diferenças entre os navegadores. Naqueles anos, era difícil escrever código que funcionasse de maneira confiável em todos os navegadores.

A falta de padronização significava que os desenvolvedores precisavam considerar as muitas diferenças entre navegadores e casos limítrofes. Dê uma olhada neste código-fonte inicial do jQuery e procure pelo jQuery.browser. Aqui está um exemplo:

 // If Mozilla is used if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) { // Use the handy event callback jQuery.event.add( document, "DOMContentLoaded", jQuery.ready ); // If IE is used, use the excellent hack by Matthias Miller // http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited } else if ( jQuery.browser == "msie" ) { // Only works if you document.write() it document.write("<scr" + "ipt id=__ie_init defer=true " + "src=javascript:void(0)><\/script>"); // Use the defer script hack var script = document.getElementById("__ie_init"); script.onreadystatechange = function() { if ( this.readyState == "complete" ) jQuery.ready(); }; // Clear from memory script = null; // If Safari is used } else if ( jQuery.browser == "safari" ) { // Continually check to see if the document.readyState is valid jQuery.safariTimer = setInterval(function(){ // loaded and complete are both valid states if ( document.readyState == "loaded" || document.readyState == "complete" ) { // If either one are found, remove the timer clearInterval( jQuery.safariTimer ); jQuery.safariTimer = null; // and execute any waiting functions jQuery.ready(); } }, 10); } 

E, graças ao jQuery, os desenvolvedores podem mudar o atendimento de todas essas armadilhas para os ombros da equipe de desenvolvimento de bibliotecas.

O JQuery posteriormente facilitou a implementação de tecnologias mais sofisticadas, como animações e Ajax. A biblioteca realmente se transformou em uma dependência padrão do site. E hoje ele fornece o trabalho de uma grande parte da Internet. A W3Techs estima que 74% dos sites hoje usam jQuery .

O controle sobre o desenvolvimento do jQuery também se tornou mais formalizado. Em 2011, a equipe criou o jQuery Board . E em 2012, o jQuery Board se transformou na jQuery Foundation .

Em 2015, a jQuery Foundation juntou-se à Dojo Foundation para criar a JS Foundation , que então se uniu à Node.js. Foundation em 2019 para criar a OpenJS Foundation , na qual o jQuery foi um dos “ projetos importantes ”.

Mudando circunstâncias


No entanto, nos últimos anos, o jQuery cresceu em popularidade . O GitHub removeu a biblioteca do frontend do site . O Bootstrap v5 se livra do jQuery porque é sua “ maior dependência de cliente para JavaScript comum ” (atualmente 30 Kb, compactado e compactado). Várias tendências no desenvolvimento da Web enfraqueceram a posição do jQuery como uma ferramenta necessária.

Navegadores


Por várias razões, as diferenças e limitações do navegador tornaram-se menos importantes. Primeiro, a padronização melhorou. Os principais desenvolvedores de navegadores (Apple, Google, Microsoft e Mozilla) estão desenvolvendo conjuntamente padrões da Web como parte do Grupo de Trabalho da Web Hypertext Application Technology .
Embora os navegadores ainda sejam diferentes entre si em vários aspectos importantes, os fornecedores pelo menos têm um meio de pesquisar e criar uma base comum em vez de uma guerra permanente entre si. Assim, as APIs do navegador ganharam novos recursos. Por exemplo, a API de busca é capaz de substituir as funções do Ajax do jQuery:

 // jQuery $.getJSON('https://api.com/songs.json') .done(function (songs) { console.log(songs); }) // native fetch('https://api.com/songs.json') .then(function (response) { return response.json(); }) .then(function (songs) { console.log(songs); }); 

Os métodos querySelector e querySelectorAll duplicam os seletores do jQuery:

 // jQuery const fooDivs = $('.foo div'); // native const fooDivs = document.querySelectorAll('.foo div'); 

Agora você pode manipular classes de elementos com classList :

 // jQuery $('#warning').toggleClass('visible'); // native document.querySelector('#warning').classList.toggle('visible'); 

O site Você pode não precisar do jQuery lista mais algumas situações nas quais você pode substituir o código do jQuery pelo código nativo. Alguns desenvolvedores sempre aderem ao jQuery, porque simplesmente não conhecem as novas APIs, mas quando descobrem, começam a usar essa biblioteca com menos frequência.

O uso de recursos nativos pode melhorar o desempenho da página. Muitos efeitos de animação jQuery agora podem ser implementados com muito mais eficiência com CSS.

A segunda razão é porque os navegadores são atualizados muito mais rapidamente do que antes. A maioria deles possui uma estratégia de atualização "sempre-verde" , com exceção do Apple Safari. Eles podem ser atualizados em segundo plano sem o envolvimento do usuário e não estão vinculados às atualizações do sistema operacional.

Isso significa que os novos recursos do navegador e as correções estão se espalhando muito mais rapidamente, e os desenvolvedores não precisam esperar até que o compartilhamento Can I Use atinja um nível aceitável. Eles podem usar com confiança novos recursos e APIs sem carregar jQuery ou polyfiles.

A terceira razão é que o Internet Explorer está se aproximando de um estado de completa irrelevância. O IE tem sido o flagelo do desenvolvimento da web em todo o mundo. Seus erros típicos eram comuns e, como o IE dominava nos anos 2000 e não usava uma estratégia de atualização "sempre-verde", suas versões antigas ainda são comuns.

Em 2016, a Microsoft acelerou o descomissionamento do IE, interrompendo o suporte para as versões décima e anterior, limitando-se ao suporte para o IE 11. E cada vez mais, os desenvolvedores da Web podem se dar ao luxo de ignorar a compatibilidade com o IE.

Até o jQuery deixou de oferecer suporte ao IE 8 e inferior desde a versão 2.0 , lançada em 2013. E, embora em alguns casos o suporte ao IE ainda seja necessário, por exemplo, em sites mais antigos, no entanto, essas situações surgem cada vez menos.

Novos quadros


Desde o advento do jQuery, muitas estruturas foram criadas, incluindo os líderes modernos de React , Angular e Vue . Eles têm duas vantagens importantes sobre o jQuery.

Primeiro, eles facilitam a divisão da interface do usuário em componentes. As estruturas foram projetadas para lidar com renderização e atualização de página. E o jQuery geralmente é usado apenas para atualização, confiando ao servidor a tarefa de fornecer a página inicial.

Por outro lado, os componentes React, Angular e Vue permitem vincular estreitamente HTML, código e até CSS. À medida que dividimos a base de código em muitas funções e classes independentes, a capacidade de dividir a interface em componentes reutilizáveis ​​simplifica a montagem e a manutenção de sites complexos.

A segunda vantagem é que estruturas mais recentes aderem a um paradigma declarativo, no qual o desenvolvedor descreve como deve ser a interface e confia à estrutura a implementação de todas as alterações necessárias para alcançar a desejada. Essa abordagem contradiz a característica imperativa da abordagem do código jQuery.

No jQuery, você prescreve explicitamente as etapas para fazer alterações. E na estrutura declarativa, você diz: “De acordo com esses dados, a interface deve ficar assim.” Isso pode facilitar muito a escrita de código sem erros.

Os desenvolvedores adotaram novas abordagens para o desenvolvimento de sites, e é por isso que a popularidade do jQuery caiu.

Quando usar o jQuery?


Então, quando o jQuery deve ser usado?

Se a complexidade do projeto aumentar, é melhor começar com outra biblioteca ou estrutura que permita gerenciar significativamente a complexidade. Por exemplo, para dividir a interface em componentes. O uso do jQuery nesses sites a princípio pode parecer aceitável, mas rapidamente levará ao código de espaguete quando você não tiver certeza de qual fragmento afeta qual parte da página.

Eu já estive nessa situação, quando tento fazer alguma mudança, sinto uma tarefa difícil. Você não pode ter certeza de que não quebrará nada, porque os seletores de jQuery dependem da estrutura HTML criada pelo servidor.

No outro extremo da escala, existem sites simples que exigem apenas um toque de interatividade ou conteúdo dinâmico. Nesses casos, eu não usaria o jQuery por padrão, porque muito mais pode ser feito com APIs nativas.

Mesmo se eu precisar de algo mais poderoso, procurarei uma biblioteca especializada, por exemplo, axios para Ajax ou Animate.css para animações. Será mais fácil do que carregar todo o jQuery por um pouco de funcionalidade.

Eu acho que a melhor razão para usar o jQuery é que ele fornece funcionalidade abrangente para o site front-end. Em vez de aprender uma variedade de APIs nativas ou bibliotecas especializadas, você só pode ler a documentação do jQuery e se tornará produtivo imediatamente.

A abordagem imperativa não escala bem, mas é mais fácil de aprender do que a abordagem declarativa de outras bibliotecas. Para um site com recursos claramente limitados, é melhor usar o jQuery e trabalhar silenciosamente: a biblioteca não requer montagem ou compilação complexa.

Além disso, o jQuery é bom nos casos em que você tem certeza de que o site não ficará complicado com o tempo e se você não se importa com a funcionalidade nativa, o que, é claro, exigirá a criação de mais código que o jQuery.

Você também pode usar esta biblioteca se precisar oferecer suporte a versões mais antigas do IE. Então o jQuery o servirá como nos dias em que o IE era o navegador mais popular.

Olhe para o futuro


O jQuery não desaparecerá em breve. Ele está desenvolvendo ativamente , e muitos desenvolvedores preferem usar sua API, mesmo com a disponibilidade de métodos nativos. A biblioteca ajudou uma geração inteira de desenvolvedores a criar sites que funcionam em qualquer navegador. E embora em muitos aspectos ele tenha sido substituído por novas bibliotecas, estruturas e paradigmas, o jQuery desempenhou um enorme papel positivo na criação de uma web moderna.

Se a funcionalidade do jQuery não mudar significativamente, é provável que nos próximos anos o uso da biblioteca continue a diminuir lenta mas constantemente. Geralmente, novos sites são criados desde o início, usando estruturas mais modernas, e os cenários adequados de uso do jQuery estão se tornando menos comuns.

Alguém não gosta da intensidade da obsolescência das ferramentas de desenvolvimento da Web, mas para mim isso é uma evidência de progresso rápido. O jQuery nos permitiu fazer muito melhor. O mesmo vale para seus sucessores.

Source: https://habr.com/ru/post/pt468169/


All Articles