# Why do we even discuss the future of jQuery?não perca o vídeo por cima do artigo!

porque o jQuery ainda executa a maioria da lógica web frontend! Ele fornece cerca de 70% das principais páginas da web e 20% de toda a web (fonte). Isso é enorme!mas isso torna a questão sobre o seu futuro ainda mais estranha.jQuery tem problemas. Está em todo o lado e não é à prova do futuro. Foi uma ferramenta incrível quando foi lançado em 2006, mas as questões centrais que corrigiu na época não são mais problemas. Em vez disso, você agora pode encontrar muito mais problemas ao usar jQuery.

para entender isso, vamos considerar as questões jQuery fixado de volta em 2006.

JavaScript estava meio quebrado e navegadores implementaram de forma muito diferente

Esta foi uma das principais coisas que o jQuery ajudou a fazer. De repente, tiveste uma API fácil de usar que te permitiu manipular o DOM. E ainda melhor do que isso: a mesma API trabalhou em todos os navegadores principais!

$('h1').text('Awesome!')

JavaScript e web como um todo eram menos maduro

jQuery permitido que os desenvolvedores simplesmente “fazer mais” na web – no frontend para ser mais preciso. Criar interfaces de usuário envolventes (para as quais você precisa de JavaScript) era mais fácil porque você poderia usar uma API bem documentada. Animar elementos, adicionar e remover conteúdo, mudar estilos e re-encomendar itens foi significativamente mais fácil de conseguir do que com vanilla JavaScript. jQuery também adicionou uma API Ajax poderosa e ainda acessível que tornou o envio de pedidos de fundo fácil também. Este é um bloco de construção principal de UIs movidos por JavaScript, uma vez que você não tem que carregar uma nova página em cada ação do Usuário e pode carregar ou manipular dados do lado do servidor nos bastidores.

    aprenda Vue.js

    Vue.o js simplifica a construção de páginas reactivas. Uma sintaxe agradável + recursos poderosos-que não é o pior pacote que você poderia obter.

    aprender reagir

    reagir é uma grande alternativa ao Vue.js. É extremamente popular e você não deve absolutamente perder isso!

    aprenda Angular

    Angular começou tudo! Aprenda o quadro que é a mãe da reação.js e Vue!

    # O que mudou?

    as questões fixadas pela jQuery já não são questões.

    JavaScript amadureceu, a compatibilidade do navegador ficou muito melhor. Temos um vibrante ecossistema de desenvolvimento frontend com milhares de pacotes e Ferramentas, podemos usar bibliotecas Ajax muito mais poderosas como Axios se quisermos.

    isso não significa que tudo é ótimo, mas os problemas centrais que foram corrigidos por jQuery realmente não existem mais.

    em vez disso, jQuery agora é uma ferramenta que é muitas vezes (nem sempre, é claro) usada por desenvolvedores Web menos experientes que nunca fizeram a mudança para vanilla JavaScript ou frameworks como Angular ou React.

    E isso é importante para entender a propósito: não estamos falando apenas de jQuery vs Angular. Vanilla JavaScript é uma alternativa real!

    while DOM traversal and manipulation was way more difficult in 2006, we got many functionalities like querySelector built into vanilla JavaScript now. Estas coisas funcionam e até funcionam entre navegadores.

    Se você tem a possibilidade de usar vanilla JavaScript em vez de alcançar basicamente o mesmo com jQuery, é obviamente melhor usar a opção baunilha. Você salva o pacote extra download e você não tem que aprender uma sintaxe extra.

    # não é apenas Vanilla JavaScript …

    não é apenas vanilla JavaScript embora. Hoje em dia, temos alternativas melhores.

    Vanilla JavaScript claramente ainda tem seus limites. Se você está construindo uma UI complexa com muita lógica implementada através de JavaScript, você rapidamente acaba em situações onde você essencialmente tem que escrever algum tipo de código de esparguete. A gestão do DOM state é, afinal de contas, difícil.

    E não apenas isso. Você regularmente encontra situações em que a sua lógica dom traversal quebra se alguma vez decidir reordenar o seu código HTML (ou introduzir novos elementos).

    <div> <h1>What's new?</h1> <div> <p>An interesting discussion over the future of jQuery evolved over the last days.</p> </div></div>
    $('#news') .find('div') .find('p') .text('This replaces the paragraph text - hopefully')

    Este código irá parar de funcionar se você alterar o código HTML, como este.

    <div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

    e o mesmo seria verdadeiro para as técnicas transversais de vanilla JavaScript.

    obviamente, você pode escrever código que ainda funcionaria no cenário acima. Mas pode quebrar em circunstâncias diferentes. Ou você acaba com uma longa cadeia de métodos transversais para selecionar com segurança o que você planeja manipular. E isso só se torna mais difícil se você manualmente criar ou remover elementos DOM através de jQuery.

    Se alguma vez teve um caso de uso em que precisava de adicionar e remover elementos dinamicamente-digamos, com base em algum array JavaScript contendo dados – você sabe a dor que está associada a isso ao usar JavaScript jquery ou vanilla. Deixe em paz se você quiser então trabalhar com esses elementos (por exemplo, anexar clique ouvintes ou estilos).

    # Frameworks to the rescue!há uma solução para isso!frameworks JavaScript como Angular, React (Oh, que é uma biblioteca na verdade – perdoe-me Reat folks) ou Vue, por exemplo.

    todos estes frameworks têm uma diferença fundamental em comparação com jQuery (e vanilla JavaScript): Você não escreve código para navegar manualmente no DOM.em vez disso, usa uma abordagem declarativa.o que significa isto?

    Bem, aqui está como você pode selecionar com segurança e manipular o conteúdo HTML neste artigo, desta vez usando Vue:

    <div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
    new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

    Como você pode ver, Vue claramente segue uma filosofia diferente jQuery faz. O mesmo seria verdade para a reação e Angular, a propósito.

    para o resto deste artigo, vou usar Vue para os exemplos – simplesmente porque tem uma sintaxe muito agradável e é fácil começar com. Importar Vue para a sua página web e você está pronto para ir.

    mas Angular e reagem também seguem abordagens comparáveis. Se você quiser saber mais sobre esses, eu tenho recursos úteis para você:

    • Angular – O Guia Completo
    • Reagir – O Guia Completo
    • Angular vs Reagir vs Vue

    E, claro, no caso de você quiser se aprofundar mais no Vue, eu tenho recursos que demais: Vue – O Guia Completo.

    todos eles se concentram em permitir que você simplesmente marque lugares no DOM onde o conteúdo deve ser exibido. Você não tem que descrever o caminho para esse lugar – o framework vai figurá-lo para você!

    # mas a solução Vue é maior!

    Se você comparar a solução jQuery com a solução Vue, você vê claramente que a abordagem Vue é um pouco mais longa (em termos de linhas de código escritas).

    mas este foi um exemplo muito simples! Exemplos mais complexos crescem rapidamente em tamanho e, pior ainda, complexidade quando se trata de código jQuery necessário. Mas não para Vue (ou para os outros quadros).isto deve-se ao facto de a abordagem geral ser tão diferente. Se você apenas descrever sua estrutura de Dados, sua lógica e como você conecta seus dados ao DOM (Seu Modelo, por assim dizer), você não tem que escrever tanto código adicional quando seu código HTML ou lógica de negócios se torna mais complexo.para jQuery, isso é uma coisa diferente. Se você precisa alcançar elementos que estão profundamente aninhados ou se você precisa fazer coisas complexas como looping através de elementos a serem criados, você rapidamente acaba com o código mais complexo (e também propenso a erros) que você viu anteriormente.

    isto irá produzir:

    <div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

    aninhados <div> elementos são clicáveis e o highlighted classe CSS será adicionada a qualquer elemento ao clicar.

    Considerar o Vue (e o HTML) fragmento de que iria conseguir o mesmo:

    new Vue({ el: '#output', data: { shoppingList: , },})

    ainda alguma linha de códigos que você precisa aqui, mas é muito mais fácil de entender, manter e editar! Você declara como seu código HTML deve ser no final, você descreve seus dados e gerencia seu selected estado em seu código JS.

    A magia acontece com a ajuda do chamado directivas v-for (por ciclo), v-on (por evento audição) e v-bind (para alterar o elemento HTML) estão fazendo todo o trabalho aqui. Reat e Angular geralmente tem soluções comparáveis, embora Reat não use diretivas. Ele ainda não vai forçá-lo a escrever manualmente todo o código para selecionar e criar elementos.

    Como o seu (frontend) web app cresce e criar ainda mais Interfaces de usuário complexas, você vai adorar tal abordagem declarativa que não o força em infinitas, unmaintainable cadeias de css()$(...) e appendTo() chamadas.o jQuery é mais pequeno, pelo menos?

    Vue oferece uma sintaxe distintamente diferente-ele faz muito do trabalho pesado em relação ao acesso DOM e manipulação para você.é óbvio que tem de ter um preço, não é? jQuery certamente é menor, certo?bem … não. Não é esse o caso.a partir de março de 2018 jQuery pesa 29kb minificado e gzipado, enquanto Vue vem a 30kb minificado e gzipped. What about React and Angular?

    React na verdade consiste de dois pacotes: reatividade e reação em si. Combinado, você tem que baixar cerca de 34kb minified + gzipped para colocá-lo em funcionamento.

    Angular é muito maior do que isso, uma vez que Angular é uma estrutura muito maior, que é especialmente adequado para aplicações de grandes empresas. Para esses tipos de aplicativos, ele vai ganhar contra a jQuery não por causa do seu tamanho de pacote, mas por causa de toda a dor que ele salva você.então…nunca mais voltes a usar o jQuery?

    a questão agora, é claro, é se você deve sempre usar Vue, Angular ou reagir então. Ou há casos de uso em que usar jQuery ainda faz sentido?em geral, acredito que o tempo de jQuery está a chegar ao fim. Pelo menos na sua forma actual.

    Você ainda pode escolhê-lo para casos triviais, mas por que você não usa apenas vanilla JavaScript para isso e salvar os 30kbs extras + a sintaxe extra que você tem para entrar? Você será um melhor desenvolvedor web se você conhece vanilla JS de qualquer maneira.

    jQuery obviamente ainda vê muito uso em muitos aplicativos web legados e ele vai ficar lá por algum tempo.

    Se você precisa trabalhar em tais aplicativos da web, você provavelmente não vai encontrar uma maneira de contornar a jQuery por agora e aprender que pode, portanto, ainda ser algo que vale o seu tempo.

    Um monte de pacotes populares de terceiros também ainda dependem jQuery-Bootstrap, o framework CSS, faz isso por exemplo (infelizmente, ele ainda faz isso em sua última versão – 4.x). Ter que adicionar a dependência extra por causa de tal pacote é irritante, por isso eu pessoalmente sempre tentar descobrir o que exatamente jQuery faz para esse pacote dado. Uma vez que você tem esse pedaço de informação, você pode reconstruir a funcionalidade com vanilla JS ou algum outro framework e com sucesso se livrar de jQuery depois disso.

Deixe uma resposta

O seu endereço de email não será publicado.