Frameworki JavaScript – słowo wstępne.

Framework - JavaScript - development

Poziom podstawowy

Do tej pory opisaliśmy większość kluczowych aspektów i cech języka JavaScript, w tym programowanie obiektowe, DOM, AJAX. Pojawiały się różne przykłady praktyczne.

Najwyższa pora na kolejny, niezwykle ważny krok: biblioteki i frameworki JavaScript (oraz AJAX). Właśnie tutaj pojawia się prawdziwa frajda (i znaczna oszczędność czasu).

Frameworki JavaScript

Chcemy krótko przedstawić rozwiązania, z którymi w mniejszym bądź większym stopniu mieliśmy do czynienia. Następnie sukcesywnie je opisywać, pokazując najważniejsze cechy, przykłady i triki, by w końcu publikować zarówno tutoriale jak i narzędzia oraz rozwiązania bazujące właśnie na frameworkach JavaScript.

Przejdźmy więc do konkretów.

Prototype JavaScript Framework

Ciekawa i rozbudowana biblioteka JavaScript, tworzona już od ładnych kilku lat. Zawiera wiele znakomitych rozwiązań wspomagających operacje na DOM, programowanie AJAX, i inne. Przy okazji jest to pierwszy framework JavaScript, który sam szerzej stosowałem w projektach.

Przykładowo:
– $() – funkcja „dolara” jest używana jako skrót do metody getElementById. By odwołać się do obiektu DOM w stronie HTML:

$("moj_element").style.display = "none";

Ta, jak i inne funkcje występują także w innych bibliotekach.

– $F() – zwraca wartość pola formularza. Na przykład dla elementu text zwróci wartość tego pola:

$F("id_elementu_formularza");

– $$() – funkcja podwójnego dolara jest silnikiem selektorów CSS. Można używać takich samych selektorów jakich się używa w arkuszu stylów.

Na przykład, jeśli chcemy się odwołać do tagu <a> o klasie foobar, napiszemy:

$$("a.foobar");

Funkcja zwróci kolekcję pasujących elementów.

Obiekt AJAX oferowany przez Prototype, jest przenośny między przeglądarkami. Posiada dwie główne metody: Ajax.Request() i Ajax.Updater().

Przykład – Ajax.Request:

var url = "http://www.foobar.com/path/script.php";

var myAjax = new Ajax.Request(url, {
    parameters: {
        imie: $F("imie"),
        wiek: $F("wiek")
    },
    onSuccess: function(t) {
        alert(t);
    },
    onFailure: function(t) {
        alert('Error....');
    }
});

Strona WWW biblioteki Prototype.

Biblioteka script.aculo.us

Jest udostępniana na Licencji X11, a bazą dla tej biblioteki jest Prototype JavaScript Framework, więc często są one spotykane razem. Aculo.us rozszerza Prototype JS o animacje oraz różne efekty wizualne, czy też o elementy interfejsu użytkownika na bazie obiektowego modelu dokumentu DOM.

Strona WWW script.aculo.us.

jQuery

Potężna (ale nie ogromna czy powolna – wręcz przeciwnie) oraz dojrzała biblioteka programistyczna dla języka JavaScript. Wśród całej gamy cech m.in. znacznie ułatwia korzystanie z typowych operacji JavaScript (w tym manipulację drzewem DOM), znakomicie wspiera AJAX.

Pozwala osiągnąć interesujące efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX. Istnieje ogromna ilość wtyczek (pluginów) i skryptów opartych o jQuery. Wszystkie efekty osiągnięte z pomocą jQuery można osiągnąć również bez jej użycia. Jednak kod z użyciem „jQ” jest nieporównywalnie krótszy, mniej skomplikowany i przenośny, oraz nowoczesny.

Strona WWW biblioteki jQuery.

jQuery UI

Ta biblioteka jest rozszerzeniem jQuery o bogaty zestaw komponentów graficznych i widget’ów (np.: pobieranie daty i kolorów, drag&drop, zakładki, paski postępu, masa efektów graficznych i wiele innych), które w prosty sposób możemy zaimplementować w naszym serwisie WWW.

Strona WWW jQuery UI.

jQuery Mobile

Można odnieść wrażenie, że chodzi tu o mobilną wersję jQuery, ale nie zupełnie tak to wygląda. jQ Mobile to framework JavaScript, który rozszerza jQuery (podobnie jak ma to miejsce w przypadku jQuery UI) o dodatki przydatne a nawet potrzebne do tworzenia aplikacji WWW, działających z poziomu urządzeń mobilnych. Biblioteka wspiera obsługę m.in. typowych dla urządzeń mobilnych zdarzeń (events) czy elementów UI.

Strona WWW biblioteki jQuery Mobile.


Adobe Spry

Framework JavaScript i Ajax od firmy Adobe. Bardzo bogaty, posiadający wiele elementów, m.in: efekty (animacje, przenikanie, potrząsanie, itd), wsparcie do przetwarzania XML, JSON, HTML, XML, sporo widgetów.

Biblioteka polecana szczególnie dla designerów i programistów XHTML/CSS, gdyż pozwala na szybkie uzyskanie efektu przy minimalnym kontakcie z JavaScript.

Strona WWW biblioteki Adobe Spry.

MooTools

„My Object-Oriented Tools”, modułowa, ciekawa biblioteka JavaScript. Głównym plikiem, który stanowi jądro frameworka MooTools jest plik core.js.

Pozostałe biblioteki są opcjonalne. MooTools składa się z wielu modułów, taka budowa pozwala użytkownikom pobrać tylko części biblioteki, które zamierzają wykorzystać. Moduły te można podzielić podstawowo na:

– Core – zbiór funkcji użytkowych, niezbędnych dla pozostałych modułów,
– Class – podstawowa biblioteka do tworzenia klas,
– Natives – klasy natywne,
– Element – obsługa elementów struktury DOM,
– Effects – zaawansowane efekty API do animowania elementów,
– Remote – narzędzia do obsługi XMLHttpRequest, ciasteczek i JSON,
– Window – funkcje obsługi okna.

Strona WWW MooTools.

Dojo

The Dojo Toolkit to potężna (pod względem zarówno możliwości, jak i rozmiarów) biblioteka programistyczna dla języka JavaScript. Rozważana jako zestaw narzędzi, pod tym względem różni się od na przykład Prototype JS. Zawiera wiele komponentów jak system widget’ów i skórek, wspiera znakomicie AJAX i takie ciekawe funkcjonalności, jak przechowywanie danych po stronie klienta, jak i serwera.

Strona WWW biblioteki Dojo Toolkit.

YUI

Bogata, składająca się z wielu komponentów biblioteka open-source. Tworzona przez firmę Yahoo!, dostępna na licencji BSD.

Strona WWW biblioteki YUI Library.

Ext JS

Kolejny developerski kombajn, oferujący szeroką gamę możliwości. Dostępna na licencji GPL lub komercyjnej.

Strona WWW biblioteki Ext JS.

Podsumowanie

Trzy ostatnie biblioteki mogą nawet przytłaczać ogromem swoich możliwości. Jednak my jako programiści nie boimy się i bez uprzedzeń wybieramy najbardziej odpowiednie rozwiązanie dla naszych konkretnych zastosowań.

Naturalnie bibliotek jest znacznie więcej, ale o tych przedstawionych tutaj planujemy pisać w najbliższym czasie.

Analizując frameworki JavaScript, gołym okiem widać jak bardzo pomagają w typowych operacjach, dbając przy okazji o przenośność kodu JavaScript w przeglądarkach. A jeszcze zupełnie nie dawno było to sporym problemem, szczególnie próby zmuszenia kodu do poprawnej pracy w przeglądarce… (wiadomo której).

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn3Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.