Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

jQuery 1.1

15 stycznia 2007

jQuery. Write less, do more.

Skaczę z radości.

Dzisiaj jQuery stuknął roczek i z tej okazji wypuszczono wersję 1.1 z licznymi usprawieniami, bugfiksami i ujednoliconym API. Dodatkowo strona doczekała się nowego designu a dokumentacja przybrała formę wygodnej Wiki. Nie mówiąc już o mojej ulubionej wersji dokumentacji - Visual jQuery.

Teraz trochę zdrowej propagandy - dlaczego musisz zainteresować się jQuery, jeśli korzystasz z JavaScript przy swoich projektach?

  1. Niesamowicie szybkie selektory CSS, za pomocą których odwołujesz się do fragmentów strony. Jeśli korzystałeś kiedyś z Behaviour, czeka Cię bezbolesna przesiadka - jQuery zna selektory CSS1, 2, 3 i podstawowy XPath.

  2. Dodawanie zdarzeń i wykonywanie kodu zaraz po tym jak element zostanie załadowany do DOM. Twoje strony nigdy nie były takie szybkie.

  3. Znana i łatwa do ogarnięcia składnia coś.zróbCoś.zróbCośJeszcze i sposób pisania kodu, który „po prostu pasuje” (chyba, że wolisz wszystko klasować). Nie martwisz się, że coś nie zadziała, że jakaś zmienna nie zostanie przekazana albo referencja do obiektu zniknie po drodze. Nie, to po prostu działa.

  4. Automatyczne iterowanie, kod jest przejrzysty jak nigdy dotąd - operujesz na grupach elementów, a piszesz jedną linijkę.

  5. Ujednolicone metody DOM działające we wszystkich przeglądarkach. Zero sprawdzania co odpowiada za pozycję myszy w IE, a co w Safari. Skup się na algorytmach.

  6. jQuery jest lekki jak piórko. Skompresowane 19KB, a wszystko nadal chodzi i nie ma błędów.

  7. Posiada otwartą architekturę wtyczek. Oznacza to, że nie musisz ładować ogromnej kobyły do przeglądarki, aby wykorzystać jej 10%. Potrzebujesz funkcjonalności pop-up albo ciasteczka? Podlinkuj plugin, są ich setki.

  8. Wokoło jQuery zgromadziła się ogromna społeczność zdolnych koderów, kreatywnych designerów i chętnych w udzielaniu pomocy, doświadczonych użytkowników. Dokumentacja, o której wspominałem plus ta społeczność przebija wszystko co możesz sobie wyobrazić w świecie bibliotek JS - pomoc przyjdzie zawsze.

Brzmi fanatycznie, brzmi arogancko, brzmi naiwnie. Jednak próbowałem wielu bibliotek, każda była pod jakimś względem kiepska. jQuery spełnia moje potrzeby znakomicie, Mappet powstał tylko dlatego, że mogłem skupić się na pomyśle, a nie setkach linii kodu operujących na DOM.

jQuery nadaje się zarówno do użycia na blogu, w aplikacji Ajax bądź komercyjnej stronie potrzebującej scrollera newsów w stylu Yahoo. Filozofia pisania kodu wydaje się mówić „po prostu zacznij kodować”. :-)

Informacje i hiperłącza

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 15 stycznia 2007 o 05:23

Kategorie: JavaScript & DOM

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Dodaj bloga do Technorati Favorites Dodaj bloga do Del.icio.us Blog należy do sieci 10przykazań.com

  1. na pewno przyda jak będę robił coś nowego :) spać nie możesz?

  2. Fajnie, że zacząłeś pisać więcej o JS. Niedługo będę się uczyć więc na 100% będę też tu częściej zaglądać w poszukiwaniu takich „smaczków”.

  3. Chyba pora się zmoblizować i wreszcie zająć tym na poważnie :-)

  4. Tak jak napisał @MuKuL, pisz więcej o JS / DOM ;)
    O tym to można czytać, a nie jakieś „expressions” ;)

  5. jQuery znam prawie od samego początku i jest inne od pozostałych frameworków/bibliotek JavaScript/AJAX... Sam twórca napisał gdzieś (bodajże na swoim blogu), że jQuery dzięki swojej prostocie (w sensie nauki i używania) to biblioteka dobra dla webdesignera (który jak wiadomo niekoniecznie musi dobrze czuć się w programowaniu)... Jak widać, jQuery coraz bardziej się rozwija – powoli zaczynam wdrażać go również u siebie i na pewno będę wykorzystywał jQuery (jak również pluginy do niego) do stron/aplikacji tworzonych przeze mnie w przyszłości…

  6. Piotr Usewicz 6 15 stycznia 2007, 11:13

    Eh, szczerze mowiac, aktualny Prototype niewiele rozni sie od tego co daje jQuery. Aczkolwiek, nie wiem jak z szybkoscia.

  7. Wojciech Zając 7 15 stycznia 2007, 12:42

    No, nieźle. Safari mi się wysypuje przy kliknięciu czegokolwiek na visualjquery.com ;-) To zdecydowanie nie budzi zaufania.

    Acz jQuery, owszem, czasem bywa praktyczny.

  8. Shaitan [D4] 8 15 stycznia 2007, 13:15

    Eh, szkoda, że nie umiem JS, przydałoby mi się w końcu…
    No, ale pocieszam się myślą, że tworzę strony działające w 100% u Peresa/M.Górnego :P

  9. Przy okazji robienia nowego szablonu, pobawiłem się tym i stwierdzam: jQuery wymiata, aż chce się pisać ( średnio znam JS, wole PHP ;) )

  10. Ja tam muszę się przesiąść: ze scipt.aculo.us na jQuery rzecz jasna :P bo to pierwsze zaczyna mnie denerwować ;]

  11. <blockquote>Eh, szczerze mowiac, aktualny Prototype niewiele rozni sie od tego co daje jQuery. Aczkolwiek, nie wiem jak z szybkoscia.</blockquote>
    Wystarczy, że plik z biblioteką jest kilkakrotnie mniejszy. :P

  12. Sam z niego korzystam.
    No co jak co, ale jQuery pojmie nawet ktoś tak upośledzony na punkcie programowania jak ja.

    Gdyby ktoś miał ochotę na zabawę – http://livio.i64.pl/xhtml/jq/jq.html

    Wiecie, co mi się w jQ nie podoba? Logo.
    Wygląda jak czerwona psia kupa.

  13. zapoznanie się z jQuery odkładałem z dnia na dzień, aż w końcu gdy kilka dni temu bliżej się przyjrzałem tej bibliotece to te kilka godzin wystarczyło aby wyrzucić do kosza prototype i script.aculo.us.

    dla mnie podstawowe zalety to : – waga (jak dołożyc jeszcze kompresej mod_deflate przez apache to zostaje jakieś 10kb, miodzik) – dokumentacja – duża liczba pluginów, dołączam sobei to co ja chce, a nie to co mi się narzuca (w JS przecież kazdy kb jest na wage zlota) – wybor elementow po selektorach css1-css3 i xpath (choc nad wydajnoscia mozna jeszcze popracowac: jackslocum.com/blog/2007/01/12/domquery-in-response-to-jquerys-response/) – metoda ready() – rozwiazany problem ladowania javascriptow po wczytaniu calego drzewa DOM dokumenty ale przed wczytaniem obrazkow (onLoad czeka na obrazki)

    w praktyce łączy w sobie to co najlepsze w Prototype, Scriptaculous i Behaviour, a zajmuje ok. 10 razy mniej niż one razem wzięte…

    polecam każdemu!

  14. [Piotr Usewicz]: „Eh, szczerze mowiac, aktualny Prototype niewiele rozni sie od tego co daje jQuery. Aczkolwiek, nie wiem jak z szybkoscia.”

    AFAIR rożni się – składnią. Składnia Prototype to niemalże typowy zagmatwany JS (gdzieś przeczytałem nawet że podobna jest do składni Ruby), tymczasem składnia jQuery jest bardziej „naturalna” (jak już pisałem we wcześniejszym komentarzu składnia jest łatwa do nauki) a podobne rzeczy da sie zaprogramować szybciej i krócej (w sensie ilości poleceń)...
    Przeczytaj raz jeszcze artykuł „Why jQuery’s Philosophy is Better”, który wskazał Piotr…

  15. Piotr Usewicz:
    Trochę o Prototype: Developer Notes for prototype.js
    i nie pisz więcej proszę, że Prototype jest podobne do jQuery bo to nieprawda…

  16. @Riddle
    tez sie ciesze :)
    Interface1.1 rowniez ujrzalo swiatlo dzienne….. w tym nowe efekty jak Transfer

    @Radzio

    „Ja tam muszę się przesiąść: ze scipt.aculo.us na jQuery”

    - chyba miales na mysli Prototype zamiast scipt.aculo.us :) ?

    odpowiednikiem scipt.aculo.us dla jQuery jest Interface (check it out: http://interface.eyecon.ro/) bez niego mamy do dyspozycji prawie takie same efekty jak pod golym Prototype czyli zadne :)

    samo jQuery to operacje na DOMie, atrybutach, prosty AJAX i iteracje….no i eventy (niezbednik jesli chodzi o web-app).......czy czegos wiecej potrzeba?

    fajne jest to ze kazda funkcja jQuery zwraca obiekt jQuery (oprocz tych ktore sie zaczynaja od kropki) wiec mozemy pisac kilometrowe lancuszki :).........a nawet jak zgubimy poczatkowy kontekst kilka razy to wystarczy tyle samo razy zrobic end() i juz jestesmy w domu :)

    niektore rzeczy mozna naprawde latwo zrealizowac

    $(”.klasa-kontenera-artykulu a[href^=http://]:not([href*=naszadomena])”).addClass(„linkexternal”); – ostyluje nam nasze linki wychodzace (jak na wikipedii)

    podobny efekt mozna osiagnac via CSS3 ale chyba IE6 gardzi nim, czyz nie? Riddle?

    re: jQ —- wszystko czego sobie mozna zyczyc to porzadek na stronie z pluginami …...

  17. Echhh… fajne to jQuery ale jakoś nadal nie mam przekonania do JS. Taki plugin np. Simple Form Validator: „Use both server side and JavaScript validators”. Super to wygląda ale co mi z tego, że ma walidację „server side” skoro jeśli ktoś wyłączy JS to leży moja walidacja – wpisuje sobie co chce i rejestruje bzdury w formularzu. Poprawcie mnie jak się mylę, ale to tylko takie bajerki nie mogące mieć zastosowania w poważnych projektach? A jak nafaszerowana skryptami w jQuery strona www ma się do dostępności? Chyba nijak?

  18. Piotr: Rzecz w tym, że jQuery w przeciwności do typowego JS nie wstawia się do np. a href=”„ onclick=„jquery.cośtam” ... Wszystko jest w pliku (plikach) zewnętrznym *.js i jQuery samo „wyszukuje” odpowiednie elementy i „dokleja” do nich żądaną akcję... Dzieki temu po wyłączeniu JS strona dalej robi swoje – co najwyżej bez „efektów”, które zaprogramował webdeveloper…

  19. Ale czy to jest onclick czy zewnętrzny plik, efekt jest ten sam – przestaje działać jeśli ktoś wyłączy JS. Może i dla efektów specjalnych to się nadaje, ale do walidacji w ogóle.

  20. Dzisiaj rozpocząłem eksploracje jQuery.

    Dzięki riddle za naprowadzenie. Świetny framework, który oszczędza naprawde mnóstwo czasu! :)

  21. PIotr: Racja, żadna strona (albo prawie żadna) nafaszerowana „nowoczesnymi technologiami” będzie kulała pod względem dostępności… Chociaż większość z tych „technologii” można zrobić tak, aby nie przeszkadzały użytkownikom (np Flash)... Jeżeli chodzi o JS to są w sieci różne rozwiązania próbujące rozwiązać niedostępność tegoż – też jestem za tym, aby strona była jak najbardziej dostępna – ale powiedzmy sobie uczciwie – ilu użytkowników wyłącza JS w swojej przeglądarce (bo domyślnie JS jest przecież włączone)? Odstetek? Promil?

  22. Piotr – a co z przeglądarkami, które JS nie obsługują? Nie zapominaj o takich ludziach jak Peres/M. Górny (nie używa Xów, tylko Lynx itp.), którzy lubią sobie za wszelką cenę utrudniać życie

  23. Dlatego mówię uparcie: tylko bajerki. Wtedy wiadomo – maniacy wyłączający JS tyle że ich nie zobaczą – ich strata. Ale trzeba dbać równolegle o to, aby i bez tego strona zachowała funkcjonalność. Przykład z walidacją podałem celowo, bo niby fajnie opracowany a niefunkcjonalny zupełnie w poważniejszych projektach bo w tym wypadku nie tyle że na własne życzenie ktoś wyłączy bajery ale wpisze np. „dupa” zamiast maila czy NIPu i to mi wejdzie do bazy a to już lipa :) Pozostaje wtedy walidacja AJAX jak jest a za nią czysta po stronie klienta ale to chyba trochę na okrętkę?

  24. Riddle czy mi sie wydaje, czy na swoim blogu tez korzystasz z prototype’a? ;)

  25. A widziałeś w jaki prymitywny sposób? :-) Poza tym ten szablon powstał w maju… ;)

  26. spoko ;)
    generalnie przejrzalem, poczytalem i stwierdzilem, ze w najblizszym projekcie trzeba bedzie potestowac, pouzywac, poszpanowac ;)
    jQuery mi sie spodobal :P

  27. jQuery jest świetny, dzięki, że zachęciłeś mnie do jego używania :)

  28. A ja dziękuję za linka do tej dokumentacji. JQuery się bawiłem, a teraz dzięki temu wróciłem z zapałem do pracy ;).

  29. Bosko, całą wieloplatfromowość szklak trafia, jeśli platforma nie jest jedynie słuszna :D Właśnie wlazłem na Twojego mapeta i dziwię się po co coś, co wyświetla obrazek. A brat mówi, że w niektórych przeglądarkach jest tam jakieś po lewej narzędziowe :D

  30. fascynujące, wreszcie ujednolicone wymiarowanie css’owe , w przeglądarkach (chyba :) dopiero testuje .

  31. Jeśli chodzi o paginację, to oczywistą sprawą jest, że sama javascriptowa walidacja jest mało skuteczna, dlatego należy zadbać, o to aby mieć także obsługę walidacji po stronie serwera. Osobiście warunki dla pól przekazuje w modelu i na ich podstawie generuje sobie funkcje walidujące w javascripcie. Jesli ma ktoś wyłączone js, to mimo wszystko walidacja skutecznie zadziała w kontrolerze podczas dodawania danych z formularza.

    pozdrawiam.

Dodaj komentarz

Do formatowania komentarzy używaj Textile (HTML nie działa). Szczególnie jeśli wklejasz większe fragmenty kodu. W razie niepewności użyj podglądu komentarza.

Wypowiedzi obraźliwe, infantylne oraz nie na temat będą moderowane – pisząc postaraj się zwiększyć wartość dyskusji.

Komentarze nie służą do wysyłania wiadomości albo informowania o błędach, itd. Chcesz coś mi napisać – skontaktuj się.