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

Naucz się React na szkoleniu z Type of Web! 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!