jQuery używać czy nie? IGUraport#2

Kolejny tydzień pracy za mną, niestety nie tak owocny jak poprzedni. Jak by człowiek się nie starał i jak mocno by nie chciał, pewnych rzeczy przeskoczyć się nie da. Jednak znalazłem chwilę na głębszą refleksję i zgłębienie tematu jQuery.

Zacięcie przy blogu

Poniedziałkowe popołudnie zeszło przy blogu, pisałem przerabiałem kasowałem i tak w koło, w sumie to sam nie wiedziałem o czym chcę pisać.

Dopiero gdy doszedłem do wniosku że jeżeli będę na siłę pisał coś ciekawego, dobrze klikalnego w google i w najlepiej w formie poradnika to nie napiszę nic. Bo po prostu nie potrafię.

Dopiero w momencie kiedy zacząłem przelewać myśli na klawiaturę, edytor powolutku się zapełniał, a pisanie zaczęło sprawiać przyjemność.

Na koniec redakcja, poprawki, coś tam usunąć coś dodać i efekt końcowy który możesz podejrzeć tutaj, chyba nie wyszedł najgorzej.

Tydzień spotkań i obowiązków

Właściwie nie licząc poniedziałku w tym tygodniu miałem tylko 2 dni w których mogłem w pełni skupić się na moim dodatkowym zajęciu czyli programowaniu. Wtorek i Piątek.

W środę pośpiesznie kończyłem domek dla lalek żeby wyrobić się na czwartek kiedy to urodziny miała moja córka Ania. Koniec końcem wyszedł całkiem nieźle, choć gdybym robił go drugi raz to na pewno kilka rzeczy zrobił bym lepiej.

Dom dla lalek
Dom dla lalek

Oczywiście czwartek również zarezerwowany był dla solenizantki, podobnie jak większość soboty i niedzieli, kiedy to przybywali dziadkowie wujkowie i ciotki:)

Kod pisałem, lecz mniej niż zakładem

Mimo tych bądź co bądź bardzo przyjemnych, ale jednak pochłaniających sporo czasu zajęć, udało się wygospodarować kilkanaście godzin na realizację założonych celów.

Co prawda tylko 15 produktywnie wykorzystanych godzin, ale w takim tygodniu jak ten cieszy każdy mały kroczek przybliżający mnie do celu.

Po ukończeniu funkcjonalności zmiany avatara dostrzegłem że w obecnej formie aplikacja pozwala tylko na edycję ogólnych danych, dostępnych publicznie dla innych użytkowników i  zmianę wspomnianego już avatara.

Brakuje za to tak podstawowych funkcji jak zmiana adresu e-mail, zmiana hasła czy w końcu całkowite usunięcie konta z serwisu. Więc właśnie tym zająłem się w tym tygodniu, a z pomocą przyszło właśnie jQuery.

jQuery dlaczego nie używałem go wcześniej?

Do tej pory starałem się używać jQuery tylko w sytuacjach w których nie mogłem wykonać danej czynności w JavaScript.

Czyli w zasadzie służyło mi tylko do przyklejania górnego menu kiedy user przescrolluje kawałek strony, bo taki znalazłem wideo poradnik na początku mojej ścieżki programistycznej i tak już zostało

Cały czas tkwiłem w przekonaniu że używanie jQuery jest czymś złym, takim nieuczciwym pójściem na skróty, przez które moja strona będzie mniej profesjonalna. Coś jak wpisywanie kodów na broń w GTA albo na dolary w Simsach.

Na szczęście w mojej etatowej pracy często mam w ciągu dnia chwilę czasu na różne rzeczy niezwiązane z pracą. Zdecydowałem się więc zacząć czytać książkę która już dosyć długo miała u mnie status „do przeczytania”.

Mianowicie JavaScript i jQuery. Nieoficjalny podręcznikJuż kiedyś zacząłem ją czytać, ale zrezygnowałem po fragmencie w którym autor w kilku linijkach przybliża pojęcie kliknięcia myszą, po czym opisuje zadanie słowami „najedź odnośnik kursorem myszy i kliknij dwa razy lewy przycisk„… WTF?!

Tym razem zacząłem jednak od razu od rozdziału o jQery który nieco otworzył mi oczy w tym temacie.

Rób więcej pisz mniej

Jeżeli miał bym określić jQuery w kilku słowach to właśnie tak. Używanie biblioteki jQery to nie pobiegnięcie na skróty w martonie a bardziej kopanie koparką zamiast szpadla.

Kod który użyłem do zrobienia fragmentu strony pokazanego na wcześniejszym filmie (płynnie rozwijających się okienek, ze zmianą ikony plusa w minus i automatycznym zamykaniem poprzedniego okna jeżeli zostanie rozwinięte inne) wygląda tak:

<script>
//wykonaj po kliknięciu w jedną z opcji ustawień w ustawieniach użytkownika
$(".settings h5").click(function(e){
  var content=$(this).data("content");//kliknięty element
  var id="#"+content;//id okna do otwarcia
  var active=$(".settings .active");//aktualnie otawrte okno
  var icon_id="#icon_"+content;//ikona do zmiany
  var activ_icon=$(".icon-minus-squared-alt");//aktualna ikona
  active.slideToggle().removeClass("active");//zwiń otwarte okno
  activ_icon.removeClass("icon-minus-squared-alt").addClass("icon-plus-squared-alt");//zmień ikonę zamykanego okna
  //jeżeli kliknięto inne okno niż do tej pory otwarte
  if(active.attr('id')!=content){
    $(id).slideToggle().addClass("active");//rozwiń nowe okno i dodaj klase active
    $(icon_id).removeClass("icon-plus-squared-alt").addClass("icon-minus-squared-alt");// zmień ikonę z plus na minus
  }
});
</script>

10 linijek kodu, czas łącznie z testowaniem i poprawkami około 2 godzin. A ile zajęło by napisanie takiej funkcjonalności w czystym JavaScripcie?

Gdybym go dobrze znał to pewnie 10x tyle kodu i 3x więcej czasu, a przy mojej znajomości JS (czyli mocno podstawowej)  co najmniej drugie tyle na szukanie i testowanie rozwiązań znalezionych przez google, które pewnie i tak nie były by optymalne.

Używać czy nie?

Oczywiście to że do tej pory praktycznie nie używałem jQuery ma  też swoje plusy. Pisząc dość rozbudowane funkcje(jak na mnie) w czystym JavaScript  na pewno nauczyłem się dużo więcej niż gdybym od początku używał jQuery.

Wiem co to  DOM i jak on działa (i nie chodzi o ten w którym mieszkam;)), poznałem wiele JavaScriptowych funkcji i myślę że mogę powiedzieć iż znam jego podstawy.

Jednak jeżeli twoim priorytetem nie jest nauka czystego JavaScriptu a sprawne budowanie aplikacji webowych bez zastanawiania się jakich kombinacji funkcji użyć do danego zadania to decydowanie polecam jQuery.

Sam dopiero zaczynam pracę z tą biblioteką ale już zdążyłem poczuć jej moc i przyspieszenie jakie daje, więc ochoczo zabieram się za dalszą część książki i pisanie kodu z użyciem biblioteki jQuery.

 

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *