Should you use or learn jQuery in 2020?

Utiliser ou ne pas utiliser? Apprendre ou ne pas apprendre? Voyons comment vous pouvez éviter complètement jQuery et les raisons pour lesquelles vous devriez continuer à l'utiliser

Quelles que soient vos préférences en termes de frameworks et de bibliothèques JavaScript, jQuery a joué un grand rôle dans l'écosystème JavaScript.

Il était beaucoup plus populaire il y a quelques années, et maintenant certains des besoins de jQuery ont été remplacés par les navigateurs modernes (heureusement!), Mais cette bibliothèque JavaScript est toujours utilisée par unparcellede personnes.

Pourquoi jQuery est-il devenu si populaire en premier lieu? Premièrement, jQuery est né dans un monde où les applications JavaScript n'étaient pas une chose. Au début des années 2000, JavaScript était principalement utilisé pour alimenter les diaporamas et autres widgets qui apparaissaient à l'intérieur d'une page, comme les galeries d'images, les sélecteurs de dates, etc. Ce n'était pas assez puissant pour faire beaucoup de choses sans être trop lent (les ordinateurs étaient aussi plus lents, bien sûr).

Il convient de noter que jQuery n'était ni la seule ni la première bibliothèque. D'autres étaient très populaires à l'époque, comme Mootools, YUI, Dojo Toolkit, Scriptaculous et Prototype. jQuery est probablement devenu le plus célèbre d'entre eux, plus tard.

Les navigateurs à l'époque avaient beaucoup de problèmes d'interopérabilité. Nous avons eu beaucoup de bizarreries et de problèmes de standardisation entre les navigateurs, et jQuery nous a aidés en créant une couche d'abstraction et en prenant soin de toutes les solutions de contournement.

jQuery vous permettait de sélectionner des éléments DOM en utilisant la syntaxe des sélecteurs CSS, c'était très convivial et très simple à étendre. Cela a simplifié les animations JavaScript.

Cela a également aidé à simplifier le travail avec AJAX (et ses différences entre les navigateurs) à un moment où ce terme était très populaire, ce qui a également donné à jQuery un bon coup de pouce en termes de popularité.

Aujourd'hui, nous n'avons pas beaucoup de problèmes de compatibilité avec les navigateurs, et leAPI des sélecteursetAller cherchernormalisé au navigateur deux des meilleures fonctionnalités de jQuery.

jQuery est certainement un sujet plein de débats. Certaines personnes disent que jQuery est une relique du passé, certaines personnes l'utilisent encore au jour le jour. Certaines personnes passent leur temps à écrire surpourquoi nous n'avons pas besoin de jQuery.

Son utilisation est sûrement en baisse au cours des dernières années:

jQuery trends

Aujourd'hui, le paysage JavaScript a radicalement changé. Cela dit, il est toujours utile de savoir ce que jQuery peut faire pour vous.

Les choses pour lesquelles nous avons utilisé jQuery pour cela ont maintenant une API de navigateur standardisée

Sélection des éléments DOM

La manière jQuery:

$('.button')

Nous pouvons désormais utiliser l'API Selectors:

document.querySelector('.button')

si vous avez plus d'éléments:

document.querySelectorAll('.button')

Attendez que le DOM soit chargé

La manière jQuery:

$(document).ready(() => {
	 //...
})

La manière DOM:

document.addEventListener("DOMContentLoaded", () => {
  //...
})

Ajouter ou supprimer des classes d'un élément DOM

La manière jQuery:

el.addClass('big')
el.removeClass('big')
el.toggleClass('big')

La manière DOM:

el.classList.add('big')
el.classList.remove('big')
el.classList.toggle('big')

Supprimer un élément du DOM

La manière jQuery:

el.remove()

La manière DOM:

el.remove()

(à droite, pas de changement)

Changer le contenu d'un élément dans le DOM

La manière jQuery:

el.text('Hello')
el.html('Hello')
el.text()
el.html()

La manière DOM:

el.innerHTML = 'Hello'
el.textContent = 'Hello'
el.innerHTML
el.textContent

Sélection de l'élément parent dans le DOM

La manière jQuery:

el.parent()

La manière DOM:

el.parentNode

Écoute des événements sur les éléments DOM

La manière jQuery:

el.on('click', (e) => { /* ... */ })

La manière DOM:

el.addEventListener('click', (e) => { /* ... */ })

Requêtes AJAX

La manière jQuery:

$.ajax({
  url: '/api.json',
  type: 'GET'
  success: (data) => {
    console.log(data)
  }
})

La manière JS moderne:

fetch('/api.json')
  .then(response => response.text())
  .then(body => console.log(body))

Animations

Les animations jQuery peuvent désormais être réalisées dans le navigateur à l'aide de transitions CSS ou d'animations CSS.

Bizarreries du navigateur

Transpilez votre code à l'aide de Babel ou utilisez des polyfills spécifiques (polyfill.io)

Devriez-vous utiliser jQuery aujourd'hui?

Répondons à la question que pose cet article dans son titre. Si vous ne connaissez pas déjà jQuery, vaut-il la peine de l'apprendre maintenant?

À mon avis, jQuery ne devrait plus être utilisé dans de nouveaux projets qui ne ciblent que les navigateurs modernes, et bien sûr, si votre projet en dépend pour une raison particulière, ou simplement parce que vous utilisez des plugins ou un autre code qui nécessite jQuery, continuez à l'utiliser. .

Certaines bibliothèques ont également une dépendance sur jQuery, comme Bootstrap. Vous pouvez également acheter des modèles prêts à l'emploi qui ne l'utilisent qu'avec ses plugins.

Peut-être travaillez-vous dans une équipe où les développeurs frontend ne sont pas tous des assistants JavaScript et ils sont plus habitués à jQuery qu'aux nouveaux standards. Si cela fait le travail, c'est cool.

Vous n'aurez peut-être pas non plus le luxe d'utiliser la dernière technologie cool (comme React ou Vue) car vous devez prendre en charge d'anciens navigateurs, qui ont un ensemble de normes plus ancien. Dans ce cas, jQuery est toujours extrêmement pertinent pour vous.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: