# dlaczego w ogóle omawiamy przyszłość jQuery?

nie przegap filmu nad artykułem!

ponieważ jQuery nadal działa na większości frontend Web logic! Zasila około 70% najlepszych stron internetowych i 20% całej sieci (źródło). To coś wielkiego!

ale to sprawia, że pytanie o jego przyszłość jest jeszcze dziwniejsze.

jQuery ma problemy. Jest wszędzie i nie jest przyszłościowy. To było niesamowite narzędzie, gdy został wydany w 2006 roku, ale podstawowe problemy, które naprawił w tym czasie, nie są już problemami. Zamiast tego możesz napotkać więcej problemów podczas korzystania z jQuery.

aby to zrozumieć, rozważmy problemy jQuery naprawione w 2006 roku.

JavaScript był trochę zepsuty, a przeglądarki implementowały go zupełnie inaczej

To była jedna z głównych rzeczy, w których jQuery pomógł. Nagle pojawiĹ 'o siÄ ™ Ĺ’ atwe w uĹźyciu API, ktĂłre pozwalaĺ ’ o Ci manipulowaÄ ‡ DOM. A nawet lepiej: to samo API działało we wszystkich głównych przeglądarkach!

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

JavaScript i sieć jako całość były znacznie mniej Dojrzałe

jQuery pozwalało programistom po prostu „robić więcej” w Internecie – na interfejsie, aby być precyzyjnym. Tworzenie angażujących interfejsów użytkownika (do których potrzebujesz JavaScript) było łatwiejsze, ponieważ można było użyć dobrze udokumentowanego API. Animowanie elementów, dodawanie i usuwanie treści, zmiana stylów i ponowne zamawianie elementów było znacznie łatwiejsze do osiągnięcia niż w przypadku vanilla JavaScript. jQuery dodał również potężne, a jednocześnie dostępne API Ajax, które ułatwiło również wysyłanie żądań w tle. Jest to podstawowy element interfejsu Użytkownika opartego na JavaScript, ponieważ nie musisz ładować nowej strony przy każdej akcji użytkownika i możesz ładować lub manipulować danymi po stronie serwera za kulisami.

    js

    Vue.js sprawia, że budowanie reaktywnych stron internetowych jest proste. Ładna składnia + potężne funkcje-to nie jest najgorszy pakiet, jaki można dostać.

    Ucz się Reacta

    React jest świetną alternatywą dla Vue.js. Jest niezwykle popularny i absolutnie nie powinieneś tego przegapić!

    dowiedz się Angular

    Angular rozpoczął wszystko! Poznaj framework, który jest matką Reacta.js i Vue!

# co się zmieniło?

problemy naprawione przez jQuery nie są już problemami.

JavaScript dojrzał, kompatybilność z przeglądarką stała się o wiele lepsza. Mamy żywy ekosystem rozwoju frontend z tysiącami pakietów i narzędzi, możemy użyć znacznie bardziej wydajne Biblioteki Ajax jak Axios, jeśli chcemy.

nie oznacza to, że wszystko jest świetne, ale podstawowe problemy, które zostały naprawione przez jQuery, tak naprawdę już nie istnieją.

zamiast tego, jQuery jest teraz narzędziem, które jest często (nie zawsze oczywiście) używane przez mniej doświadczonych programistów internetowych, którzy nigdy nie przeszli na vanilla JavaScript lub frameworki, takie jak Angular lub React.

i to jest ważne, aby zrozumieć przy okazji: nie mówimy tylko o jQuery vs Angular. Vanilla JavaScript to prawdziwa alternatywa!

podczas gdy poruszanie się po DOM i manipulacja były znacznie trudniejsze w 2006 roku, otrzymaliśmy wiele funkcji, takich jak querySelector wbudowany w vanilla JavaScript teraz. Te rzeczy działają, a nawet działają w różnych przeglądarkach.

Jeśli masz możliwość korzystania z vanilla JavaScript zamiast osiągnąć w zasadzie to samo z jQuery, to oczywiście lepiej użyć opcji vanilla. Zapisujesz dodatkowy pakiet do pobrania i nie musisz uczyć się dodatkowej składni.

# It 's not just Vanilla JavaScript…

it’ s not just vanilla JavaScript though. W dzisiejszych czasach mamy po prostu lepsze alternatywy.

Vanilla JavaScript najwyraźniej nadal ma swoje granice. Jeśli budujesz złożony interfejs użytkownika z dużą ilością logiki zaimplementowanej przez JavaScript, szybko kończysz w sytuacjach, w których zasadniczo musisz napisać jakiś kod spaghetti. Zarządzanie stanem DOM jest jednak trudne.

i nie tylko. Jeśli kiedykolwiek zdecydujesz się na ponowne zamówienie kodu HTML (lub wprowadzenie nowych elementów), regularnie napotykasz sytuacje, w których logika ruchu DOM traversal łamie się.

<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')

ten kod przestanie działać, jeśli zmienisz kod HTML w ten sposób.

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

i to samo byłoby prawdą w przypadku vanilla JavaScript traversal techniques.

oczywiście możesz napisać kod, który nadal będzie działał w powyższym scenariuszu. Ale może wtedy pęknąć w innych okolicznościach. Albo kończysz z dość długim łańcuchem metod poruszania się, aby bezpiecznie wybrać to, co planujesz manipulować. Staje się to trudniejsze tylko wtedy, gdy ręcznie tworzysz lub usuwasz elementy DOM za pomocą jQuery.

Jeśli kiedykolwiek miałeś przypadek użycia, w którym musiałeś dynamicznie dodawać i usuwać elementy-powiedzmy w oparciu o jakąś tablicę JavaScript zawierającą dane-znasz ból, który jest z tym związany podczas korzystania z jQuery lub vanilla JavaScript. Pozostaw w spokoju, jeśli chcesz pracować z tymi elementami (np. Dołącz słuchacze kliknięć lub Style).

# frameworki na ratunek!

jest na to poprawka!

frameworki JavaScript, takie jak Angular, React (ach, to właściwie biblioteka – wybaczcie Reactom) lub Vue na przykład.

wszystkie te frameworki mają jedną zasadniczą różnicę w porównaniu do jQuery (i vanilla JavaScript): nie piszesz kodu, aby ręcznie poruszać się po drzewie DOM.

zamiast tego stosujesz podejście deklaratywne.

Co to znaczy?

cóż, oto jak można bezpiecznie wybrać i manipulować treścią HTML z wcześniejszego artykułu – tym razem za pomocą 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', },})

Jak widać, Vue wyraźnie kieruje się inną filozofią niż jQuery. To samo dotyczy Reacta i Angulara.

do reszty tego artykułu użyję Vue jako przykładów – po prostu dlatego, że ma bardzo ładną składnię i łatwo jest zacząć. Zaimportuj Vue do swojej strony internetowej i gotowe.

ale Angular i React również podążają za porównywalnymi podejściami. Jeśli chcesz dowiedzieć się więcej na ten temat, mam dla ciebie pomocne zasoby:

  • Angular – kompletny przewodnik
  • React – kompletny przewodnik
  • Angular vs React vs Vue

i oczywiście, jeśli chcesz zagłębić się w Vue, mam również zasoby na ten temat: Vue – kompletny przewodnik.

wszystkie one skupiają się na umożliwieniu po prostu oznaczania miejsc w DOM, w których zawartość ma być wyświetlana. Nie musisz opisywać drogi do tego miejsca – framework to wymyśli za Ciebie!

# ale rozwiązanie Vue jest dłuższe!

jeśli porównasz rozwiązanie jQuery z rozwiązaniem Vue, wyraźnie zobaczysz, że podejście Vue jest nieco dłuższe (pod względem napisanych linii kodu).

ale to był bardzo prosty przykład! Bardziej złożone przykłady szybko rosną w rozmiarze i, co gorsza, złożoność, jeśli chodzi o wymagany kod jQuery. Ale nie dla Vue (lub innych frameworków).

To dlatego, że ogólne podejście jest tak różne. Jeśli tylko opisz swoją strukturę danych, swoją logikę i sposób łączenia danych z DOM (Twoim szablonem, że tak powiem), nie musisz pisać tak dużo dodatkowego kodu, gdy kod HTML lub logika biznesowa stają się bardziej złożone.

dla jQuery to jednak inna sprawa. Jeśli chcesz dotrzeć do elementów, które są głęboko zagnieżdżone lub jeśli chcesz wykonywać złożone rzeczy, takie jak zapętlanie elementów, które mają zostać utworzone, szybko otrzymasz bardziej złożony (a także podatny na błędy) kod, który widziałeś wcześniej.

To da:

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

zagnieżdżone<div> elementy są klikalne, ahighlighted Klasa CSS zostanie dodana do dowolnego elementu po kliknięciu.

rozważ fragment Vue (i HTML), który osiągnie to samo:

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

nadal jest to jakaś linia kodów, której potrzebujesz, ale jest o wiele łatwiejsza do zrozumienia, utrzymania i edycji! Deklarujesz, jak powinien wyglądać Twój kod HTML, opisujesz swoje dane i zarządzasz stanemselected w kodzie JS.

magia dzieje się za pomocą tak zwanych dyrektyw-v-for (do zapętlania),v-on (do nasłuchiwania zdarzeń) iv-bind (do zmiany elementu HTML) wykonują tutaj całą pracę. React i Angular generalnie mają porównywalne rozwiązania, choć React nie używa dyrektyw. Nadal nie zmusi cię do ręcznego napisania całego kodu do wyboru i tworzenia elementów.

w miarę jak twoja (frontend) aplikacja internetowa rośnie i budujesz jeszcze bardziej złożony interfejs użytkownika, pokochasz takie deklaratywne podejście, które nie zmusza cię do nieskończonych, niemożliwych do utrzymania łańcuchów wywołańcss()$(...) IappendTo().

# czy jQuery jest przynajmniej mniejsze?

Vue oferuje wyraźnie inną składnię – robi wiele ciężkich rzeczy dotyczących dostępu do DOM i manipulacji dla Ciebie.

To musi mieć swoją cenę, prawda? jQuery z pewnością jest mniejszy, prawda?

cóż … nie. Nie o to chodzi.

od marca 2018 r.jQuery waży 29kb minified i gzipped, podczas gdy Vue ma 30KB minified i gzipped.a co z Reactem i Angularem?

React składa się z dwóch pakietów: ReactDOM i React. W połączeniu, musisz pobrać około 34kb minified + gzipped, aby go uruchomić.

Angular jest znacznie większy od tego, ponieważ Angular jest znacznie większym frameworkiem, który jest szczególnie odpowiedni dla dużych aplikacji korporacyjnych. W przypadku takich aplikacji wygra z jQuery nie ze względu na rozmiar pakietu, ale ze względu na cały ból, który cię oszczędza.

# więc … nigdy więcej nie używaj jQuery?

pytanie teraz oczywiście brzmi, Czy zawsze należy używać Vue, Angular lub React wtedy. Czy też istnieją przypadki użycia, w których używanie jQuery nadal ma sens?

ogólnie uważam, że czas jQuery dobiega końca. Przynajmniej w obecnej formie.

możesz jeszcze wybrać to dla banalnych przypadków ale dlaczego po prostu nie użyjesz do tego waniliowego JavaScript i nie zaoszczędzisz dodatkowych 30kbs + dodatkowej składni, do której musisz się dostać? Będziesz lepszym web developerem, jeśli i tak znasz vanilla JS.

jQuery oczywiście nadal widzi wiele zastosowań w wielu starszych aplikacjach internetowych i pozostanie tam przez dłuższy czas.

Jeśli potrzebujesz pracować nad takimi aplikacjami internetowymi, prawdopodobnie na razie nie znajdziesz sposobu na obejście jQuery, a nauka tego może być nadal czymś wartym twojego czasu.

wiele popularnych pakietów innych firm również nadal opiera się na jQuery-Bootstrap, frameworku CSS, robi to na przykład (niestety robi to nawet w swojej najnowszej wersji – 4.x). Konieczność dodania dodatkowej zależności z powodu takiego pakietu jest irytująca, dlatego osobiście zawsze staram się dowiedzieć, co dokładnie jQuery robi dla danego pakietu. Po otrzymaniu tej informacji możesz odbudować funkcjonalność za pomocą vanilla JS lub innego frameworka i z powodzeniem pozbyć się jQuery.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.