js & jquery

Nie wiem, czy jQuery jest jakkolwiek lepsza od tych bibliotek z innych języków programowania, które są udane i wygodne (i relatywnie bardzo łatwe) do stosowania w swojej dziedzinie, przy czym -- jednocześnie -- praca w tej dziedzinie jest efektowna.

Ważne stwierdzenie: jQuery nie ulepsza samego JavaScriptu. No, odrobinkę to robi, ale robi to akurat... bardzo słabo. Istnieją biblioteki, które jednocześnie są mniejsze i znacznie bardziej ułatwiają nam poruszanie się po języku JavaScript (np. biblioteka Underscore.js).

jQuery za to rewelacyjnie sprawdza się podczas manipulacji drzewem dokumentu (DOM). Sęk w tym, że JavaScript jest obecnie najczęściej wykorzystany na stosunkowo prostych frontendowo witrynach, właśnie do manipulacji na DOM. Jakby tego było mało, dostępne w przeglądarkach API DOM, ustandaryzowane przez W3C, jest bardzo słabe i niewygodne. jQuery zapewnia dużo wygodniejszy i lepszy interfejs do manipulacji DOM. Jednocześnie, jQuery wypełnia luki w implementacji DOM, istniejące szczególnie w starszych przeglądarkach.

Proszę jednak pamiętać, że DOM to tylko jedna warstwa. Coś w rodzaju warstwy widoku.

W nietrywialnych aplikacjach JavaScriptowych dzieje się dużo, dużo więcej. Trzeba napisać normalną logikę, tak samo jak przy programowaniu w każdym innym języku.

Do jQuery istnieje spory zestaw wtyczek, które dostarczają nam gotowce. Walidacja formularzy, popupy/lightboxy, karuzele... Większość z tych rzeczy można bardzo prosto podpiąć pod naszą stronę. Faktycznie, nie potrzeba być specem od JavaScriptu żeby napisać $("#mójFormularz").validate() i ew. przekazać do metody kilka opcji. Ale to jeszcze nie znaczy, że "napisaliśmy własną walidację formularzy w jQuery". Nie, my po prostu odpaliliśmy gotowca i ew. lekko go skonfigurowaliśmy.

Problem powstaje, gdy twórcy danego gotowca nie przewidzieli czegoś, co my chcemy osiągnąć. Albo nie odwalili wcale takiej dobrej roboty. To się wbrew pozorom dzieje dość często. Popularne pluginy do jQuery nie są bardzo słabe, ale też często nie są zbyt dobre.

Co jeśli chcemy, by nasze tooltipy działały sprawnie nawet gdy użytkownik korzysta z klawiatury i klawisza TAB? Co jeśli to w takich tooltipach chcemy wyświetlać komunikaty o błędzie?Co jeśli chcemy, by po 10 sekundach od wysłania żądania ajaxowego wyświetlił się komunikat mówiący, że operacja trwa niespotykanie długo i umożliwiający ponowne wysłanie żądania? Co jeśli do naszej dynamicznej turbo-tabelki chcemy dodać pięćsetny wiersz, a nasze algorytmy -- choć tego nie widzimy -- mają złożoność O(n^3)? Co jeśli po wybraniu jednej opcji z selecta nr 1 chcemy zmienić opcje w selekcie nr 2?

Rety, ile już razy ludzie pisali o takich rzeczach na forum...

Za każdym razem, gdy przychodzi do napisania czegoś nieskomplikowanego, użytkownik jQuery nie znający dobrze JavaScriptu co najmniej mocno się poobija, programując przypadkowo. Jeśli aplikacja zrobi się odpowiednio duża, stanie się wkrótce niemal niemożliwa w utrzymaniu. Powtórzenia kodu będą potężne. Zamiast uwspólnić i uabstrakcyjnić system okienek, komponentów czy formularzy tak, by nowe instancje tych elementów można było składać z klocków (być może całkowicie automatycznie), za każdym razem rzeczy te będą pisane od nowa, na pałę, w N linijkach płaskiego, słabego "kodu jQuery".

Pracował ktoś kiedyś nad większymi projektami? Takimi na trzycyfrową liczbę roboczodni samego front-endu? Proponował ktoś z Was rozwiązania problemów biznesowych na tyle "nowatorskie", że nie ma na nie gotowców? Doszedł ktoś z Was kiedyś do wniosku, że wszystkie dostępne gotowce nawet do tak popularnej rzeczy jak wyświetlanie okienek ligthboxowych są w sumie niezbyt super i mało elastyczne?

Jeśli tak to wiecie, że nie da się zrobić tych rzeczy nie mając pewnej znajomości JS. Znajomości, która w naszej branży uchodzi już niestety za "potężną", mimo iż w rzeczywistości taka nie jest.

Taaak, każdy może napisać $(".cośtam").show() i cieszyć się z pięknej animacji rozsuwającej dany element i zmieniającej poziom jego przezroczystości. Osoba ta może nie mieć zielonego pojęcia o asynchroniczności metody .show(), hackach na różne przeglądarki jakich wymaga przezroczystość i wszystkich algorytmach, które tam siedzą. Algorytmach niespecjalnie super skomplikowanych, ale będących lata świetlne poza naszym zasięgiem, bo my nawet nie znamy języka, którego używamy (!).

Łatwość użycia rzeczy w stylu .show() świadczy o sile biblioteki. Ale nie czyni z nas osoby, która byłaby w stanie napisać cokolwiek, co czyniłoby z nas kogokolwiek innego niż najniższego możliwego klepacza kodu. To chyba oczywiste, prawda?

Oczywiście, problem powstaje, gdy po tym .show() chcemy coś zrobić i nie rozumiemy, czemu wywołanie umieszczone linijkę niżej jest wykonywane zanim jeszcze element się pokaże (*). Ale czy można naprawdę wytłumaczyć komuś, czemu tak się dzieje? Czy można mówić o asynchroniczności, o kontynuacjach i domknięciach, jeśli osoba ta funkcje anonimowe zna tylko z widzenia, z tutoriali, i nigdy się nad nimi nie zastanawiała?

Dużo osób prędzej czy później trafia na ścianę. Może wszyscy. Nie mogą zdebugować jakiegoś problemu lub zaimplementować dokładnie tego, co chce klient. Myślą, że są o krok, bo "robią coś prawie takiego samego". Ale oni tego nie robią, tylko wywołują odpowiednie, gotowe funkcje. A teraz trzeba napisać własną. I jest tragedia, bo to dwa zupełnie inne światy.

Może taka analogia...

Czy da się pisać w Swingu, nie znając Javy? :) Przecież Swing pracuje na warstwie będącej odpowiednikiem DOM w przeglądarce. Wspomagając się jakimś IDE typu RAD, z drag'n'dropem i w ogóle, można by pewnie zrobić w Swingu aplikacyjkę, która na pierwszy rzut oka wyglądałaby całkiem profesjonalnie! Tylko czy wtedy naprawdę jesteśmy programistami? Czy tylko tak się trochę bawimy?

Różnica jest taka, że jQuery jest wygodniejsze od Swinga i nie potrzebuje drag'n'dropa, oraz prawdopodobnie ma więcej darmowych wtyczek, większą bibliotekę gotowców.

(*) Pisałem tutaj akurat o .show(), ale tak naprawdę problemem była asynchroniczność. Przed chwilą na forum został napisany post, w którym użytkownik ma dokładnie ten problem: http://4programmers.net/Forum/Webmastering/200467-ajax_+_zakres_zmiennych_w_js?p=856931#id856931