10 powodów, dla których używam jQuery razem z React

W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy!

Wpis powstał z okazji 1. kwietnia 2019 r.

Ale…

Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. W praktyce jednak… okazuje się, że aż 94% señor developerów używa jQuery w codziennej pracy!

Jakie są powody? Oto 10 przykładów kodu, które są znacznie krótsze i bardziej czytelne dzięki jQuery.

1. Pobieranie elementów

Bez jQuery zmuszeni jesteśmy używać gołego DOM API, które bez żadnych abstrakcji zmusza do pisania bardzo długiego i nieczytelnego kodu. Wystarczy tylko porównać prosty przykład, czyli pobieranie elementów z DOM na podstawie selektorów CSS.

DOM API:

document.querySelectorAll('.klasa');

jQuery:

$('.klasa');

Dla tak krótkiego zapisu bez wątpienia warto załadować całą bibliotekę jQuery!

2. Dodawanie i usuwanie klas

Ewidentnie widoczna jest tutaj ogromna przewaga jQuery:

DOM API:

el.classList.add('selected');
el.classList.remove('selected');
el.classList.toggle('selected');

jQuery:

$(el).addClass('selected');
$(el).removeClass('selected');
$(el).toggleClass('selected');

3. Pobieranie rodzica elementu

Tutaj w szczególności widoczna jest ułomność DOM API:

DOM API:

el.parentNode;

jQuery:

$(el).parent();

4. Nadpisywanie treści elementu

DOM API nie mogłoby tutaj być chyba bardziej skomplikowane i mylące. jQuery sprawia, że rzeczy stają się proste:

DOM API:

el.innerHTML = 'Siema';
el.textContent = '<b>Siema</b>';
el.innerHTML;
el.textContent;

jQuery:

$(el).text('Siema');
$(el).html('<b>Siema</b>');
$(el).text();
$(el).html();

5. Pobieranie atrybutów

DOM API:

el.getAttribute('tabindex');

jQuery:

$(el).attr('tabindex');

6. Porównywanie elementów

Tutaj chyba nie muszę komentować, jak bardzo jQuery ułatwia codzienną pracę:

DOM API:

el1 === el2;

jQuery:

$(el1).is($(el2));

7. Nasłuchiwanie na zdarzenia

Od pisania tego w gołym DOM API nadal mam koszmary.

DOM API:

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

jQuery:

$(el).on('click', () => { /* … */ });

8. AJAX

Odejdźmy na moment od DOM API, gdyż jQuery to także przydatne abstrakcje do wykonywania między innymi Ajaksów, animacji i innych rzeczy…

Bez jQuery:

fetch('/api/users')
  .then(response => response.text())
  .then(body => {
    console.log(body);
  })

Z jQuery:

$.ajax({
  url: '/api/users',
  type: 'GET'
  success(data) {
    console.log(data);
  }
})

Wow, no nie? Po zobaczeniu tego kodu, pewnie nigdy więcej nie będziecie chcieli wykonywać requestów bez jQuery!

9. Parsowanie JSON

Tam, gdzie goły JavaScript zawodzi, jQuery jak zwykle dowodzi swojej wyższości:

Bez jQuery:

JSON.parse(json);

Z jQuery:

$.parseJSON(json);

10. Zmiana kontekstu funkcji

„This” w funkcjach w JavaScripcie to skomplikowana sprawa! Na szczęście jQuery sprawia, że bindowanie, czyli zmiana kontekstu, staje się banalne:

Bez jQuery:

fn.bind(context);

Z jQuery:

$.proxy(fn, context);

Podsumowanie

Poznaj React z naszymi szkoleniami! Mam nadzieję, że tym wpisem chociaż nieco przekonałem Was, dlaczego warto nadal używać jQuery w 2019 roku. Oczywiście, ktoś mógłby mi zarzucić, że wybrałem tendencyjne przykłady — takie, w których zysk z użycia jQuery jest największy. Oczywiście! Ale na pewno są to operacje, które wykonujecie codziennie.

Nie słuchajcie nigdy fałszywych guru programowania, którzy mówią, aby odrzucać coś tylko dla zasady. jQuery jest, był i będzie znaczącym frameworkiem i wiele osób używa go razem z React, Vue czy Angularem. Sto lat, jQuery!

Nie wysyłamy spamu, tylko wartościowe informacje. W każdej chwili możesz się wypisać klikając „wypisz się” w stopce maila.

Subscribe
Powiadom o
guest
12 komentarzy
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Rafał Konofalski
Rafał Konofalski
1 rok temu

Prawie się nabrałem 😛

Radosław Pepson Zabinski
Radosław Pepson Zabinski
1 rok temu

niech zostanie ku pamięci hop aprilis 🙂

Tomasz Sochacki
Tomasz Sochacki
1 rok temu

hehe fajne, ale tak nieco z innej strony to wiele osób hejtuje jQuery używając na co dzień np. angularaJS w jakiś starszych apkach jakby nie wiedzieli, albo nie chcieli wiedzieć, że w ajs pod spodem dzieci jQuery Lite 🙂

majkel_94
majkel_94
1 rok temu

Ja ze swojej strony polecam wspaniałą bibliotekę `react-use-jquery`:
https://github.com/latviancoder/useJquery

Michał
Michał
1 rok temu

O kurczę, przeczytałem ten wpis dzisiaj i nie miałem włączonej lampki ostrzegawczej xd

Jakub Sarnowski
Jakub Sarnowski
1 rok temu

Po przeczytaniu tytułu byłem już bardzo podejrzliwy. Po `Dla tak krótkiego zapisu bez wątpienia warto załadować całą bibliotekę jQuery!` nie miałem już wątpliwości 😀

Jakub Sarnowski
Jakub Sarnowski
1 rok temu

Wiem, wiem, po przeczytaniu wstępniaka szybko spojrzałem na datę publikacji i wszystko stało się jasne 😀 P.S. Fajny link ze statystyką użycja jQ wśród seniorów. Ciekaw jestem ile ludzi przeszło obok tej informacji obojętnie nie będąc jeszcze świadom bycia robionym w konia 😀

Kacper Krojna
Kacper Krojna
5 miesięcy temu

a może mi ktoś w paru słowach wyjaśnić, dlaczego nie powinno się używać jQuery?

hirev81771
hirev81771
5 miesięcy temu
Reply to  Kacper Krojna

jestem w branży jakies 14 lat co prawda robie backend ale fornt tez czasem musze ruszyć, i jquery jest jebane już chyba z 10 lat wstecz a ciągle jest na 90% www bo poprostu jest zajebiście proste i działa. Nie powinieneś używac jquery jeśli chcesz dobrze zarabiać jako frontend developer bo za react, angular śmiało dostaniesz 120-150 zł netto h i huj Cie obchodzi czy projekt jest z tego tytłu rentowny czy nie bo wystawiasz FV i masz to gdzieś 🙂

Kacper Krojna
Kacper Krojna
5 miesięcy temu
Reply to  hirev81771

pytałem pod kątem portfolio, ale już wiem co i jak, dzięki 😉

hirev81771
hirev81771
5 miesięcy temu

hmm to moze nieco inny przykłąd:
jQuery:
$('a').click(function() {
/* Kod */
});

Javascript
[].forEach.call(document.querySelectorAll('a'), function(el) {
el.addEventListener('click', function() {
/* Kod */
})
});

już nie tak kolorowo 😀

$(document).on('click', #przycisk, function(){
/* Dalszy kod*/
});

document.addEventListener('click', function(e) {
for (var target = e.target; target && target != this; target = target.parentNode){
if (target.matches(document.getElementById('przycisk'))) {
handler.call(target, e);
break;
}
}
}, false);