Już trochę czasu minęło od publikacji ostatniego kompendium wiedzy dla programisty, więc czas na nową dawkę dobrych i wartych poznania materiałów mogących pomóc w nauce programowania / webdeveloperki.
Dzisiejszym tematem przewodnim będzie JavaScript, o którym coraz to więcej się mówi, choć nie tylko JavaScript.
JS Libs Deconstructed
Naprawdę świetna strona prezentująca w przyjemnej do przeglądania formie źródła popularnych bibliotek, tj. :
Jest to o tyle fajnie zaprezentowane, że funkcjonalności są pogrupowane i logicznie uporządkowane (podobnie jak na stronie dokumentacji). Dodatkowo wszelkie wewnętrzne metody są podlinkowane do źródeł, gdzie następnie pokazywane jest „wnętrze” każdej funkcji jQuery czy prototype.
Co prawda większość IDE obsługuje kolorowanie składni czy możliwość przeskakiwania po funkcjach/metodach, jednak tutaj dochodzi porządek i grupowanie.
Niniejsza strona stanowi świetne źródło do nauki od najlepszych.
Underscore.js
Underscore.js to świetna biblioteka do JavaScript ułatwiająca pracę w tym wciąż nieidealnym języku. Jak opisują twórcy biblioteki, underscore.js dodaje ponad 60 nowych funkcjonalności niezwykle przydatnych przy pisaniu w JavaScript.
Większość z tych funkcji jest znana każdemu web-developerowi. Są to bowiem funkcje wykorzystywane w bibliotekach tj. jQuery czy Prototype. W dodatku nowsze przeglądarki powoli samodzielnie implementują poszczególne funkcjonalności.
Kilka zalet tej biblioteki:
- nie koliduje z innymi bibliotekami (jak jQuery czy Prototpype) – Underscore.js wydziela własną przestrzeń znakową (znaczek: _) i nie nadpisuje wbudowanych obiektów, tj. String, Object, Math czy innych.
- działa natywnie – jeśli wykryje daną funkcjonalność w nowszej przeglądarce to zadanie jest przerzucane na przeglądarkę (z reguły szybsze działanie), jeśli natomiast użytkownik korzysta ze starszej przeglądarki to funkcja zostanie zapewniona przez bibliotekę.
- niewielki rozmiar – wersja spakowana to zaledwie 3kb.
- posiada otwarty kod źródłowy wraz z testami oraz świetną dokumentację, czyli wszystko czego programista potrzebuje do szczęścia.
Funkcje oferowane przez Underscore.js:
- Collections
each, map, reduce, reduceRight, detect, select, reject, all, any, include, invoke, pluck, max, min, sortBy, sortedIndex, toArray, size - Arrays
first, rest, last, compact, flatten, without, uniq, intersect, zip, indexOf, lastIndexOf, range - Functions
bind, bindAll, memoize, delay, defer, throttle, debounce, wrap, compose - Objects
keys, values, functions, extend, clone, tap, isEqual, isEmpty, isElement, isArray, isArguments, isFunction, isString, isNumber, isBoolean, isDate, isRegExp, isNaN, isNull, isUndefined - Utility
noConflict, identity, times, mixin, uniqueId, template - Chaining
chain, value
Nazwy funkcji powinny mówić same za siebie, a jeśli nie mówią to zapraszam do dokumentacji, gdzie wszystko jest wyjaśnione na praktycznych przykładach :-).
CamanJS
Kolejna świetna biblioteka, tym razem odciążająca pracę serwera, przerzucająca operacje na plikach graficznych (niezwykle kosztowne dla serwera) na klienta (przeglądarkę)! Na szczególną uwagę zasługują praktyczne przykłady dostarczone przez autora biblioteki.
Czasami potrzebujemy udostępnić funkcjonalność edycji zdjęć – niewielki retusz, czasem zmiana rozmiaru, tworzenie miniaturek i inne – w niemalże co drugim projekcie wykonujemy takie operacje (zwłaszcza zmiany rozmiaru pliku graficznego). Dlaczego by więc nie przerzucić część tych operacji na przeglądarki? Na pewno serwer by się ucieszył :-)
Jak tłumaczą autorzy, Caman JS to inaczej Pure Javascript (Ca)nvas (Man)ipulation, czyli cała magia odbywa się za pośrednictwem coraz to popularniejszego elementu canvas.
Wadą w tym przypadku jest słabe wsparcie przeglądarek, przez co w mało którym komercyjnym projekcie można by wykorzystać tą bibliotekę:
- Google Chrome
- Safari 5+
- Firefox 4+
- Opera 10+
- Internet Explorer 9+
Hyphenator.js
Kolejna przydatna w praktyce JavaScript’owa biblioteka, tym razem umożliwiająca dzielenie wyrazów!
Choć nieczęsto dzielimy wyrazy pisząc do Internetu, gdyż każda zmiana czcionki powodowałaby konieczność redagowania tekstu, niemniej teraz to może się zmienić. Bowiem dzięki bibliotece Hyphenator.js nie musimy się już niczym martwić – dzielenie wyrazów zostanie przerzucone na przeglądarkę / JavaScript.
Czyli podsumowując, z Hyphenator.js możemy tworzyć teksty prosto, przyjemnie, szybko i zgodnie z zasadami pisowni.
Biblioteka oczywiście obsługuje wiele języków, w tym także polski. Przyznam się bez bicia, że nie miałem jeszcze okazji używać jej w praktyce, niemniej wszystko przede mną.
Btw. jako ciekawostkę dodam, iż CSS3 przewiduje wprowadzenie dzielenia wyrazów. Więcej informacji można znaleźć w oficjalnej dokumentacji. Pozostaje czekać na ten fjuczer, a tymczasem wspierać się biblioteką Hyphenator.js.
JSHint
Miałem opory czy wrzucać tutaj ten link, ale niech będzie – nie chce mi się tworzyć osobnego wpisu, a narzędzie to warto poznać!
A więc kolejna zabawka dla programistów JavaScript. Tym razem jest to narzędzie do walidacji poprawności kodu JavaScript. O dziwo biblioteka wychwytuje wiele ciekawych błędów, które nie są zgłaszane choćby przez przeglądarkę.
JSHint wskazuje więc mniejsze i większe błędy oraz problemy z kodem JavaScript oraz nakazuje stosowania dobrych zasad kodowania. Mówiąc wprost, JSHint sprawi, że Twój kod JavaScript będzie jeszcze ładniejszy, przyjemniejszy w odczycie i łatwiejszy przy dalszym rozwoju, jak i bezpieczniejszy (bez potencjalnych luk).
Jeśli więc wiesz czym jest refaktoryzacja kodu to na pewno ucieszy Cię istnienie takiego narzędzia jak JSHint.
Btw. warto na koniec dodać, iż JSHint jest forkiem innego popularnego narzędzia do poprawy jakości kodu – JSLint (także polecam!), którego autorem jest Douglas Crockford.
Artisan JS
Każdy kto próbował swoich sił w canvas doskonale wie ile należy się napracować by cokolwiek narysować w oknie przeglądarki.
Na szczęście wraz z rozwojem prac nad canvas, powstaje też coraz więcej bibliotek (wrapperów) ułatwiających i skracających pracę z tym elementem HTML5. Jednym z nich jest odszukany przeze mnie Artisan JS. Co prawda nie posiada wielu funkcji, ale na pewno lepiej wykorzystać tego typu bibliotekę, niż pisać wszystko samodzielnie.
1 2 3 4 5 6 7 8 9 10 | context.fillStyle = fill_color; context.strokeStyle = stroke_color; context.lineWidth = line_width; context.globalAlpha = alpha; context.shadowOffsetX = shadow_offset_x; context.shadowOffsetY = shadow_offset_y; context.shadowBlur = shadow_blur; context.shadowColor = shadow_color; context.fillRect(start_x, start_y, width, height); context.strokeRect(start_x, start_y, width, height); |
Powyższy kod z Artisan JS możemy zastąpić nieco prostszym:
1 | artisan.drawRectangle(target, start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y); |
Co prawda nie jest pięknym rozwiązaniem upychanie wszystkiego do argumentów funkcji. Dziwię się dlaczego autor biblioteki nie mógł stworzyć czegoś na wzór:
1 2 3 4 5 6 | artisan.drawRectangle(target, { start_x : 0, start_y : 0, width : 500, // ... }); |
Ale „lepszy rydz niż nic” :D
Artisan JS
A JavaScript library that aims to make in-browser drawing very, very easy.
FUEL – A simple, flexible, community driven PHP5.3 framework
Ok, żeby nie było samego JavaScript’u to na koniec zapraszam do zapoznania się z bardzo ciekawym, lecz jeszcze młodym frameworkiem – FUEL.
FUEL jest mega-prostym, szybkim i wygodnym w użyciu narzędziem do generowania prostych i nieskomplikowanych witryn.
Kod tego frameworka czyta się jak książkę. Niestety też posiada wady, jak niewielka liczba klas i dodatkowych bibliotek, co przy bardziej nietypowych projektach będzie wymagało od nas dopisywania nowych klas i funkcjonalności. Niemniej jednak do prostszych projektów framework ten nadaje się idealnie.
FUEL
strona projektu, dokumentacja techniczna, testy jednostkowe
I zonk.
Prototype Deconstructed odnosi się do cholera wie jakiej wersji. A już na pewno odwołuje się do starej dokumentacji, która jest mocno przestarzała.
Natomiast JSHint kiedyś używałem, ale odpadł po zmianie IDE.
To fakt:
– Prototype JavaScript framework, version 1.6.1 – najnowsza wersja: 1.7
– jQuery JavaScript Library v1.4.2 – najnowsza wersja: 1.5.1
Co nie zmienia faktu, że nadal warto przeanalizować kod tych bibliotek (zapewne niewiele zmian zaszło w nowych wersjach), a stronka jak JS Libs Deconstructed jest tutaj bardzo przydatna, przynajmniej dla mnie :-)
Bardzo ciekawe zestawienie, biorąc pod uwagę, że ostatnio dużo więcej piszę w JS niż w PHP, mam dzięki Tobie trochę witryn do przejrzenia ;-)
Jeśli chodzi o Underscore’a, to wolałbym żeby dał się skonfigurować, czy chcemy żeby rozszerzał prototypy natywnych obiektów, czy żeby (bądź jednocześnie) udostępniał swój obiekt.
Bo po to są prototypy żeby je rozszerzać. Jeśli piszemy bibliotekę ujednolicającą działanie różnych funkcji natywnych w różnych przeglądarkach, to nie po to żeby dołączenie tej biblioteki do kodu (w celu np. wsparcia starego IE) wymagało przepisania całego kodu.
Ale spojrzę w kod Underscore’a i zobaczę czy dałoby się to zmienić tak żeby sposób interakcji był konfigurowalny. Bo sam pomysł jest bardzo dobry i chodził mi długo po głowie – biblioteka rozszerzająca standardową JSową, ale bez DOMa (bo nie wszędzie jest potrzebny).
„ułatwiająca pracę w tym wciąż nieidealnym języku”
Nieidealny język? Sam język ma obecnie funkcjonalności tak duże, że patrząc na takie teksty jak powyżej, można zaryzykować twierdzenie, że jest to najbardziej niedoceniany język programowania na świecie.
@Analogowy Bit: niestety nie ma i nie będzie idealnych języków programowania, bo zawsze będzie można się do czegoś doczepić.
W tym jednak przypadku chodziło mi o bibliotekę Underscore.js i wskazanie, jak wielu przydatnych funkcji nie posiada JavaScript i że trzeba szukać własnych obejść / rozwiązań, podczas gdy moim zdaniem powinny być wbudowane w standard języka :-)
@Piotrek: ok, po to są prototypy by je rozszerzać, ale jak wskazałem powyżej, zrobiono zapewne osobną przestrzeń znakową by funkcjonalności nie kolidowały z innymi bibliotekami, tj. Prototype.
I nie chodzi tylko to, że to oni mogli sprawdzać czy dana funkcjonalność istnieje już w obiekcie, ale także o innych, którzy mogą o tym zapomnieć i przeciążać już istniejące metody rozszerzające standardowe obiekty. Wady podobne jak przy zmiennych globalnych.
@Kamil: Dlatego uważa, że to powinno być opcją, a nie standardem. To znaczy, że jeśli wiem co robię to włączam rozszerzanie prototypów.
A o zapominalskich też bym się nie bał, bo to już ich problem, że nie pamiętają :) W końcu chcemy mieć bibliotekę dla koderów, a nie dla niepełnosprawnych :D