jQuery – co to jest, zalety i wady – czy warto używać?

W tym artykule odpowiemy sobie czy warto się uczyć i używać jQuery w 2020 czy 2021 roku na stronach i w aplikacjach internetowych. Biblioteka jQuery działa aż na 77% stron z pośród miliona najbardziej popularnych witryn na świecie. Biblioteki tej nie można też uniknąć w przypadku stron wykorzystującej system WordPress (który jak pamiętamy obsługuje 30% całego Internetu).

jQuery pod pewnymi względami jest podobny do PHP i Bootstrapa – są to jedne z najpopularniejszych narzędzi/technologii – z tego samego powodu – najczęściej krytykowane. Skąd taki stan rzeczy? Tylko popularne i szeroko wykorzystywane technologie są krytykowane. A te mniej znane? No cóż… nikt się nimi po prostu nie przejmuje.

Spis treści:

1. Co to jest jQuery?
2. Dodatki i rozszerzenia
3. Popularne strony używające jQuery
4. Zalety jQuery
5. Wady jQuery
6. jQueryUI

Co to jest jQuery?

jQuery to biblioteka JavaScript, która ułatwia manipulację elementami i zdarzeniami w dokumencie HTML. Upraszcza wybieranie elementów z drzewa DOM, manipulacje nimi (np. kopiowanie, usuwanie ukrywanie, zmianę kolejności i właściwości) oraz animację i upraszcza korzystanie z AJAX (ang. Asynchronous JavaScript and XML).

W praktyce, jQuery dostarcza gotowych, często wykorzystywanych funkcji w skryptach JavaScript dzięki czemu:

• upraszcza/ułatwia/przyspiesza pracę programiście,
• zwiększa kompatybilność kodu pod kątem wielu platform i wersji przeglądarek.

Mottem tej biblioteki jest „write less do more” czyli pisz mniej rób więcej i jest to bardzo trafne zdanie, które w zasadzie tłumaczy wszystko o jQuery:

Na czym polega przyspieszenie pracy w jQuery?

jQuery posiada zestaw gotowych funkcji, które można wywołać. To powoduje, że możemy zrobić to samo za pomocą dużo krótszego i mniej złożonego kodu.

Przykład 1: wykryć moment załadowania strony za pomocą ready:

$(document).ready(function() {
       /* ciało funkcji */
 });

zamiast pisać w Vanilla JS:

document.addEventListener('DOMContentLoaded', function() {
       /* ciało funkcji */ 
 });

To dopiero początek, przyjrzyjmy się kolejnemu przykładowi:

Przykład 2: Wykrycie zdarzenia click to w jQuery jedno słowo:

$('a').click(function() {
       /* ciało funkcji */ 
 });

w VanilllaJS trzeba napisać taki kod:

[].forEach.call(document.querySelectorAll('a'), function(el) {
   el.addEventListener('click', function() {
      /* ciało funkcji */  
   })
 })

Przykład 3: korzystanie z AJAX, metoda POST:

$.post('skrypt.php', { user: user }, function (output) {
   /* ciało funkcji */
 })

W Vanilla JS to około 5 razy więcej kodu:

var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (output) {
   /* ciało funkcji */ 
}
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.open('POST', url)
httpRequest.send('user=' + encodeURIComponent(user))

To są naprawdę banalne przykłady, różnice w objętości kodu są spektakularne przy bardziej złożonych przypadkach użycia.

Jeżeli chcesz więcej przykładów, możesz zajrzeć do mojego krótkiego przewodnika: tutorial jQuery – podstawy.

Dodatki i rozszerzenia jQuery

Szeroka popularność biblioteki jQuery spowodowała, że na jego bazie tworzone są gotowe dodatki (tzw. wtyczki jQuery) do stron internetowych takich jak galerie, efekty wizualne, zaawansowane rozwiązania UI a nawet całe frameworki typu Bootstrap.

Zależność od jQuery wycofano w Bootstrap 5. Mimo to, z pewnością będzie wykorzystywany w celu obsługi innych wtyczek.

źródło: codecanyon.net

jQuery jest ciągle uaktualniany i od kilku lat codziennie powstają lub wychodzą aktualizacje do skryptów, które bazują na tej bibliotece. Ostatnia aktualizacja samego jQuery miała miejsce w sierpniu 2022 (wersja 3.6.1).

Przykłady znanych skryptów, które można często znaleźć na stronach internetowych:

• Bootstrap JS
• Popper JS
• jQuery Collapse
• Colorbox
• jQuery bxSlider
• Infinite Ajax Scroll
• Magnific Popup
• Masonry
• OWL Slider
• TouchSwipe
• Isotope
• jPlayer
• ImgAreSelect
• ScrollTo

Popularne strony wykorzystujące jQuery

Co powoduje, że konkretna technologia jest uważana za popularną i zalecaną? O tym decydują potrzeby i wymagania rynku. Nie ma lepszego sposobu na pokazanie wielkości jQuery jak przytoczenie „paru” serwisów które na nim bazują:

Serwisy i portale internetowe korzystające z jQuery:

• github.com
• stackoverflow.com
• bitbucket.org
• twitter.com
• baidu.com
• linkedin.com
• wikipedia.org
• duckduckgo.com
• vimeo.com
• dribble.com
• paypal.com
• microsoft.com
• amazon.com

W Polsce z jQuery korzysta m. in.:

• interia.pl
• gazeta.pl
• allegro.pl
• olx.pl
• ceneo.pl
• filmweb.pl
• payu.pl
• wykop.pl

Oficjalne strony i sklepy znanych marek wykorzystujące jQuery:

• apple.com
• tesla.com
• mclaren.com
• infosys.com
• fenty.com
• bugatti.com
• chanel.com
• gucci.com
• armani.com
• louisvuitton.com
• porsche.com
• versace.com
• huawei.com
• samsung.com

CMSy

• wszystkie strony WordPress,
• wszystkie sklepy PrestaShop,
• wszystkie sklepy WooCommerce,

I można tak wymieniać godzinami…

Zalety jQuery

Czy warto używać jQuery? Zbierzmy najważniejsze zalety:

• przyspieszenie pracy programistów a tym samym zmniejszenie czasu pracy i kosztu projektów,
• ułatwienie programowania w JavaScript za pomocą gotowych szkieletów przydatnych funkcji a to zwiększa funkcjonalność projektów niskim kosztem,
• prostota działania, która powoduje że po chwili nauki jesteśmy w stanie tworzyć przydatne aplikacje za pomocą JavaScript.
• krzyżowa kompatybilność aplikacji w szerokim spektrum przeglądarek,
• niski (lub zerowy) koszt wdrożenia, ponieważ często biblioteka ta jest dodana z automatu w przez sam CMS, dodatek lub inne narzędzie które musi się znajdować na docelowej stronie,
• duża społeczność pozwalająca zasięgnąć rady na forach, praktycznie wszystkie popularne przypadki użycia są już dawno rozwiązane i nie trzeba wymyślać koła na nowo,
• duża popularność wśród web deweloperów, co nie powoduje przywiązania do jednego wykonawcy i kod jest czytelny i zrozumiały,
• większa czytelność kodu dzięki jego prostocie i wyższej warstwy abstrakcji,
• możliwość skorzystania z multum gotowych wtyczek (zarówno płatnych jak i darmowych) pozwalające dodać dodatkowe funkcjonalności niskim kosztem,
• dojrzałość i wieloletnie stałe aktualizowanie zwiększa niezawodność i przewidywalność aplikacji (wiele problemów zostało wykrytych i naprawionych na przestrzeni wielu lat).
• szybsze działanie strony jeżeli korzystamy z oficjalnych repozytoriów online, skrypt może być współdzielony pomiędzy różnymi witrynami.
• obniża próg wejścia w naukę programowania w JavaScript.
• bardzo dobra dokumentacja – dopracowywana latami dokumentacja pozwala szybko znaleźć interesujące nas rozwiązania.

Wady jQuery

jQuery (jak każda biblioteka) otrzymuje z automatu łatkę czegoś co rozleniwia programistów i powoduje, że do strony są ładowane dodatkowe skrypty, które pogarszają wydajność stron i apliakacji. Trudno z tym dyskutować i jest to racja. Każdy przypadek, w którym przyspiesza się w jakikolwiek sposób pracę programisty jest albo kosztowny dla klienta albo przenoszony na użytkownika. Zbyt wczesne wchodzenie do jQuery może faktycznie ograniczać rozwój w JavaScript ale to już jest problem sposobu edukacji a nie samej biblioteki.

Jednak ci sami krytycy często korzystają z innych i o wiele bardziej obciążających bibliotek i frameworków. Przytaczanie tego argumentu jest typowo retorycznym zabiegiem – mało kto przecież używa w pracy tzw. Vanillla JS czyli czystego JavaScript. Choć bardzo dobra znajomość czystego JavaScript jest sporą przewagą na rynku pracy i w tworzeniu projektów. Sprawdź mój kurs Vanilla JavaScript od podstaw.

Popularność jQuery faktycznie spada w ostatnim czasie na rzecz używania czystego JavaScriptu a przy dużych projektach stosuje się frameworki typu Angular JS, Vue.js, React. Jeżeli będziesz pracować w korporacji nad złożonymi aplikacjami prawdopodobnie używasz lub będziesz używać jednego z tych trzech frameworków. Z drugiej strony, jeżeli pracujesz nad typowymi stronami internetowymi to z pewnością będziesz się stykać z jQuery na porządku dziennym. Tym bardziej jeżeli utrzymujesz projekty, które zostały wykonane w ostatnich latach i które używają takich rozszerzeń jak jQueryUI, jQueryMobile lub Bootstrapa w wersji niższej niż 5.

W krytyce jQuery często można się natknąć na argument, który ma na celu przekreślić jego największą zaletę jakoby nowoczesne przeglądarki rzekomo były bardziej ustandaryzowane i kompatybilne ze sobą dzięki aktualizacji samych interpreterów JavaScript. Podbijany jest też fakt, że jQuery został wynaleziony dawno temu, jednak „krytycy” pomijają to, że jest ciągle aktualizowany.

Interfejs graficzny jQuery UI

Biblioteka jQuery posiada opcjonalny zestaw gotowych widgetów, efektów i motywów stanowiących dodatek do podstawowej biblioteki. Kolekcja jQuery UI składa się z wielu elementów takich jak akordeony, zakładki, cienie, ikony, przyciski formularze itp. Narzędzie to przyspiesza budowanie zaawansowanych interfejsów, które często są potrzebne we wszelkiego rodzaju panelach administracyjnych i konfiguratorach.

Trzeba przyznać, że obecnie dużo popularniejszym rozwiązaniem jest w takim przypadku jest korzystanie z gotowych motywów Bootstrapa, niemniej, wiele stron nadal korzysta z systemów projektowych opartych o jQuery UI ponieważ są dopracowane i istnieje wiele dodatków zbudowanych na bazie jQuery UI. Z tego rozwiązania nadal korzystają takie strony jak: twitter.com, codepen.io, ahrefs.com, docs.aws.amazon.com i trello.com.

Oficjalna strona projektu: https://jqueryui.com

jQuery Mobile

Istnieje też jQuery Mobile – system projektowy przeznaczony dla urządzeń mobilnych, którego wspominam w ramach ciekawostki, ponieważ jest już rzadko wykorzystywany ze względu na rozwój innych systemów projektowych.

Interfejs jQuery Mobile przypomina starsze wersje Androida i iOS. Obsługa dotyku i dedykowane funkcje nadal mogą być użyteczne w przypadku tworzenia prostych aplikacji webowych tworzonych w takich narzędziach jak PhoneGap.

Podsumowanie

jQuery jako najpopularniejsza biblioteka JavaScript ma się dobrze i jest nadal wykorzystywana nawet w tych najnowszych produkcjach i dużych i obszernych stronach internetowych. O ile jego popularność spada w środowiskach skoncentrowany na aplikacjach webowych i bardzo dużych projektach o tyle na stronach i średniej wielkości serwisach internetowych ciągle nie ma sobie równych.

Biblioteka jQuery jeszcze przez jakiś czas będzie czymś w rodzaju internetowego standardu, którego brak znajomości będzie utrudniał rozwój obecnych stron internetowych czy świadczenia usług serwisu. Wszystkie motywy na wszelkie CMSy dostępne obecnie w marketach z szablonami wykorzystują jQuery. To samo jest ze wtyczkami i licznymi projektami w serwisie Codepen. Warto znać tę bibliotekę jeżeli nasza praca ma polegać na dostosowaniu takich szablonów do potrzeb klientów lub chcemy wykorzystywać popularne dodatki do stron.

Krytyka jQuery przypomina krytykę PHP, WordPressa i Bootstrapa – należy ją ignorować i po prostu robić swoje. Dzięki znajomości tych opartych na prostocie, otwartych, ciągle aktualizowanych i wspieranych przez największych graczy świata IT narzędziach, można szybko prototypować, tworzyć przydatne strony i aplikacje bardzo niskim kosztem.

Źródła

• https://jquery.com/,
• https://www.wappalyzer.com/technologies/jquery