Wpis ten jest kopią mojego postu z bloga creativemobile.pl.
Technologie webowe od zawsze były kuszące. Uatrakcyjniają nasze witryny, pozwalają na bogate interakcje użytkowników ze stroną, zadziwiają swoimi możliwościami a tempo ich rozwoju jest niezwykłe. A gdyby tak nauczyć się samemu nimi operować i tworzyć zupełnie nowe rzeczy? Siadamy więc przed komputerem, czytamy czasopisma, książki itp. i odkrywamy, że praktycznie wszędzie siedzi ten „dziwny” JavaScript (JS). Społeczności, fora i grupy uginają się więc od pytań w stylu: „Aj łud lern, aj łud low tu noł dżawaskrypt, pliz help mi” a osoby, które zadają te pytania często w ogóle nie wiedzą o jaki język chodzi. Na temat JavaScriptu napisano już wiele, wiele dobrych artykułów, ale także i wiele złych lub nawet jeszcze gorszych. Chciałbym więc zebrać swoje doświadczenia drogi czytelniku i pokazać Ci, że nie taki diabeł straszny jak go malują a umiejętne posługiwanie się tym językiem sprawia dużą przyjemność i przynosi profity.
Wpis ten był moim debiutem na blogu CreativeMobile, a przedstawione w nim przemyślenia wynikają ze stanu mojej wiedzy w tamtym czasie. Z pewnością nie uniknąłem niefortunnych sformułowań, ale jest to dla mnie wielki krok (choć pewnie niewielki dla ludzkości) i zrobię wszystko by moje przyszłe wpisy były jeszcze lepszej jakości. Zaczynamy!
Początek nauki programowania jest zawsze najtrudniejszy i jeżeli nie uda się go przeskoczyć to bardzo szybko cały zapał zostanie rzucony w kąt. Wspominam o tym, ponieważ uważam, że JavaScript nie jest dobrym językiem na początek naszej drogi z programowaniem. Co prawda bardzo łatwo w nim zacząć, ale bez znajomości dobrych wzorców, bardzo szybko będziemy tworzyć w nim programistyczne „potworki”, które apetytem na pamięć będą w stanie dorównać kilkuletniej grze. Przede wszystkim aby go zrozumieć należy pojąć naturę tego języka, a nie jest to łatwe dla osoby, która nie miała do czynienia z różnymi paradygmatami programowania. Ja swoją przygodę z programowaniem rozpocząłem od języka Pascal, potem pojawił się C++, następnie Java i w końcu na mojej drodze stanął JavaScript. Gdyby nie duże zainteresowanie tematem to zakończyłbym poznawanie tego języka na walidacji formularzy, bo na tym opiera się większość kursów, które można znaleźć w sieci. Nie opisują one dokładnie języka, skupiają się na konkretnym celu, który nawet nie zbliża się do programowania obiektowego. Jest to spowodowane w dużej mierze przeszłością JSa, który dopiero za sprawą takiej technologii jak AJAX czy też nowych „smaczków” piątej wersji HTMLa, jest odkrywany „na nowo”.
Złe dobrego początki
JavaScript jest stosunkowo młodym językiem programowania. Wikipedia podaje nam 1995 jako rok pojawienia się JSa, jest więc młodszy od takich dziadków jak C++ czy SmallTalk i za rówieśników może przyjmować takie języki jak PHP czy Ruby. Również Java pochodzi z tego okresu a warto ją tutaj wymienić ze względu na fakt, że JavaScript jest bardzo często mylony z tym językiem przez swoją nazwę. Jednakże jedyne podobieństwo między nimi to niektóre elementy składniowe, wzorowane jeszcze na starym dobrym języku C. I to tyle na temat Javy, która nie zagości już w dalszej części wpisu, aby nie igrać z bystrym czytelnikiem. Powiedzieliśmy o roku pojawienia się, to może teraz coś o samym twórcy. Brendan Eich, bo o nim mowa, jest jednym z dyrektorów Mozilli, a JSa napisał w 10 dni. Tak, dobrze przeczytałeś drogi czytelniku, 10 dni. Złośliwi twierdzą nawet, że pisał go na kacu, no cóż… biorąc pod uwagę ilość złych konstrukcji języka może jakieś ziarenko prawdy w tym jest. W każdym bądź razie w pierwszych latach swojego istnienia język ten służył głównie do dodawania, jak się często okazywało, zbędnej interaktywności w witrynach. Mieliśmy zalew rotatorów treści i obrazków, mnóstwo animowanych zegarków i całej masy dziwnych rzeczy, które latały za kursorem. Oczywiście początkowo był efekt „wow”, ale potem wszystkie te elementy określane mianem DHTML zaczęły irytować i praktycznie poza rozwijanymi w różne strony menu nie było śladu po JS na poważnych stronach. Do tego brak standaryzacji języka zupełnie przekreślał możliwość tworzenia rozbudowanych skryptów dla wielu przeglądarek, głównie ze względu na różnice implementacji wielu elementów.
Witryny, a może aplikacje?
Dużym zwrotem w świecie JSa i momentem od którego popularność tęgo języka nie przestała zwalniać, było pojawienie się technologii AJAX (i nie mam tu na myśli receptury na płyn do naczyń). AJAX pozwala na asynchroniczną komunikację z serwerem, dzięki czemu można np. aktualizować konkretne elementy witryny bez przeładowania całej strony. Zdecydowanie oszczędza to transfer danych i ilość informacji przesyłanych w sieci. Obecnie ciężko spotkać witrynę, która nie korzysta z AJAXa i to na tej technologii w dużej mierze polega tworzenie tzw. „One page application”. Są to aplikacje webowe, które wykorzystują tylko jedną stronę a treść i wszelkie komponenty są pobierane/aktualizowane w sposób asynchroniczny. Brzmi jak idealne rozwiązanie dla aplikacji mobilnych? Pewnie, że tak, ale zanim do tego dojdziemy trzeba jeszcze wspomnieć o pewnym hamulcu, który przez długi czas dawał o sobie znać.
Brzydkie, złe, „niebieskie e”
Internet Explorer – nazwa ta spędza sen z powiek wielu osobom, które zajmują się nie tylko programowaniem w JavaScripcie ale także pozostałymi elementami frontendu, jak np. tworzeniem szablonów w oparciu o arkusze CSS. Tempo rozwoju tej przeglądarki wołało kiedyś o pomstę do nieba i było „trochę” szybsze niż wypuszczenie na rynek przez Microsoft nowego Windowsa. Z tego też powodu wiele nowych rzeczy dodanych do standardu języka nie mogło zostać wykorzystanych przez programistów, ponieważ IE odmawiał posłuszeństwa. Ale nie tylko nowych, twórcy tej przeglądarki wielokrotnie udowadniali, że wiedzą lepiej niż konsorcjum W3C jak pewne elementy mają funkcjonować i jakie powinny mieć API. Najbardziej dawała się we znaki wersja szósta IE, której proces wymazywania z naszego świata trwa do dzisiaj. Przez długi czas na taki stan rzeczy składała się nieświadomość większości użytkowników sieci, którzy nie wiedzieli, że mają wybór co do innej przeglądarki a „niebieskie e” określali mianem Internetu. Webmasterzy musieli się bardzo napocić żeby pomysły grafików można było przenieść jeden do jeden, co często kończyło się upraszczaniem projektów i braniem wolnego na kilka dni. Współcześnie jest lepiej, IE rozwija się zdecydowanie szybciej i nie ma już takiego problemu jak dawniej, ale nadal przeglądarka ta jest krok do tyłu od konkurencji (wystarczy spojrzeć na obsługę poszczególnych funkcjonalności na stronie caniuse.com). Dodatkowo nie udostępnienie wersji wyższej niż IE8 dla leciwego, aczkolwiek ciągle popularnego Windowsa XP, odciska się ciągle na tych, którzy chcieliby pokazać wszystkim możliwości HTML5, ale ciągle nie mogą. Do tej pory uczestnicząc w różnych projektach słyszę: „A minimalne IE, które bierzemy pod uwagę to?”. Konkluzja tej części jest taka, że nie ma róży bez kolca, ale projektowanie z uwzględnieniem IE uczy pokory… na pewno.
Frameworki, wszędzie frameworki
Kolejnym elementem układanki składającej się na popularność języka JavaScript są frameworki. Ułatwiają one prace poprzez dostarczanie gotowych funkcjonalności, często napisanych dla wielu przeglądarek, dzięki czemu oszczędzamy mnóstwo czasu rozpoczynając nowy projekt. Nie ma obecnie w świecie JSa osoby, która nie wiedziałaby co to jQuery. Wymieniam od razu jQuery, ponieważ istnieją już nawet młodzi programiści, którzy twierdzą, że znają jQuery ale nie znają JavaScriptu poważnie. JQuery zakorzenił się bardzo, ponieważ ma bardzo prostą, intuicyjną składnię i pozwala zapomnieć o różnicach w przeglądarkach (nawet w tym niedobrym IE). Nie nadaje jednak jasno określonej struktury dla aplikacji i stąd cała masa niezoptymalizowanych, dużych skryptów, pisanych w sposób proceduralny, w jednym pliku, który rośnie szybciej niż potrzeba zmian. W jQuery pisać też trzeba umieć i dlatego lepiej naukę zacząć od samego JavaScriptu, aby poznać strukturę języka. Co do innych frameworków, jest tego po prostu całe mnóstwo. Mamy frameworki wspomagające pracę ze strukturą strony takie jak jQuery czy Zepto, frameworki wspomagające tworzenie interfejsów użytkownika np. Topcoat i jQuery UI, frameworki wprowadzające architekturę dla aplikacji: Backbone, Ember czy AngularJS, frameworki dla urządzeń mobilnych: jQuery Mobile, Sencha Touch, Enyo etc. Ba, są nawet frameworki do gier np. CraftyJS czy Impact. Jednym słowem do wyboru do koloru, każdy ma swoje jak to mówią zady i walety i trzeba samemu je poznać aby zbudować własny „arsenał” do tworzenia aplikacji. Trzeba pamiętać jednak aby nie przesadzać i zawsze należy się zastanowić czy dany framework faktycznie będzie nam potrzebny, czy może potrzebujemy tylko jedną funkcjonalność, którą można napisać samemu.
Najbardziej niezrozumiały język programowania
Jak już wspomniałem na początku, JavaScript tylko z pozoru wydaje się językiem łatwym do nauki. Łatwiej w nim napisać prosty skrypt, który doda do siebie dwie liczby niż np. w Javie. Ale co z dużymi projektami? Okazuje się, że nie jest to już takie proste i nawet osoby znające już jeden język programowania dochodzą do momentu w którym staje się on dla nich koszmarem. Douglas Crockford w swojej książce „JavaScript. Mocne strony” wskazuje, że „JavaScript to surowy blok marmuru, który wymaga odpowiedniej pracy, aby ukazał swoje piękno”. Nazywany przez wielu asemblerem sieci, JavaScript bez znajomości jego dobrych stron staje się dosłownie asemblerem i jednocześnie ostatnią rzeczą w jakiej chcielibyśmy pisać nasze aplikacje. Możemy dalej pisać nasze walidacje formularzy i animowane zegarki, a możemy chcieć napisać coś dużo bardziej skomplikowanego, wtedy trzeba pamiętać o tych elementach języka, które narażają nasz kod na niespodziewane błędy i problemy w działaniu aplikacji. Pisząc w JavaScripcie trzeba zwrócić uwagę na następujące „smaczki” tego języka:
- zmienne globalne – tego potrafi być na prawdę dużo, w zależności od doświadczenia programisty. Zmienne globalne są składowymi globalnego obiektu window (lub też global w przypadku środowiska node.js).
- asynchroniczność – w dobie programowania w oparciu o AJAX trzeba wiedzieć, że na dane trzeba poczekać, w przeciwnym wypadku możemy się nieźle pogubić.
- zasięg funkcyjny – nowość dla osób pracujących w innych językach. Brak zasięgu blokowego sprawia, że nasze zmienne „wypływają” z bloków a zasięg tworzy funkcja.
- znaczenie this – o ile w przypadku innych języków programowania nie ma wątpliwości, że this wskazuje obiekt we wnętrzu którego się znajdujemy, o tyle w JSie ze względu na zasięg funkcyjny możemy się nieźle przejechać jeżeli this okaże się obiektem globalnym.
- automatyczne dodawanie średników – JS pozwala pisać instrukcje bez używania średników, ponieważ środowisko może je uzupełnić za nas. Czasami może to spowodować błąd, np. w przypadku takiego zapisu:
return {};średnik zostanie dodany za instrukcją return i funkcja nic nie zwróci. To jeden z bardziej kłopotliwych błędów do wykrycia, ponieważ możemy się o nim przekonać gdy już będzie za późno.
- falsy values – w JavaScripcie mamy kilka wartości, które dają logiczny fałsz. Są to: undefined, ciąg pusty „”, null, 0, NaN i false. Jest to zdecydowanie niebezpieczna ilość i trzeba uważać co sprawdzamy.
- magia porównań – dosłownie magia. Ma to związek z powyższym punktem, ale i nie tylko. Dla przykładu: sprawdzając operatorem typeof wartość NaN uzyskamy „number”. O słodka ironio.
- funkcje są obiektami – mogą więc posiadać własne metody oraz atrybuty, genialna rzecz.
- brak klas – chyba największy szok dla osób pracujących w innych językach stosujących paradygmat obiektowy. Obiekty nie są tworzone na podstawie klas a dziedziczenie odbywa się za pomocą prototypu, z obiektu nadrzędnego. Oczywiście istnieją funkcje konstruktory, które upodobniają tworzenie obiektów w sposób znany z innych języków, ale to tylko jedna z dróg tworzenia, a tych może być na prawdę wiele.
Umiejętne kontrolowanie powyższych elementów pozwala uniknąć niepotrzebnych problemów z aplikacjami. Każdy z nich jest na tyle „ciekawy”, że przynajmniej część z nich postaram się przybliżyć w przyszłych artykułach. Bardzo dobrym punktem startu do zapoznania się z niektórymi niezrozumiałymi elementami jest JavaScript Garden.
JavaScript to język na tyle elastyczny, że pozwala pisać w różnych paradygmatach programowania. Jego elementy pozwalają się nagiąć do tego stopnia, że możemy również łączyć te paradygmaty, wykorzystując tylko najlepsze cechy i odrzucając te, które sprawiają problemy. Możemy pisać obiektowo równocześnie wykorzystując funkcje anonimowe, możemy pójść w odwrotnym kierunku i pisać proceduralnie wykorzystując obiekty. Albo pójść jeszcze dalej i programować w oparciu o komponenty, przykładem może być framework Enyo lub CraftyJS.
Walka na froncie frontendu
Znajomość samego języka to za mało aby odnieść sukces. Potrzebna jest również wiedza na temat możliwości wiodących przeglądarek, a tych jest niemało. Mamy przeglądarki na tradycyjny pulpit, tutaj prym wiodą: Google Chrome, Mozilla Firefox, Internet Explorer, Safari i Opera. Są jeszcze przeglądarki mobilne, tych również jest sporo przy czym należy wspomnieć o wersji mobilnej Chrome’a i Firefoxa, Android Browsera czy też Safari. W przypadku urządzeń mobilnych duże znaczenie ma również wersja systemu operacyjnego (tak Androidzie, patrze w Twoim kierunku). Przeglądarki desktopowe oferują bardzo podobne możliwości i w zakresie obsługi języka różnią się niewiele, no przynajmniej jeżeli chodzi o najnowsze wersje, pomijam już kwestię IE. Twórcy prześcigają się w implementowaniu nowych elementów, ale konkurencja nie śpi i na tym polu programista JS może sobie pozwolić na bardzo dużo. Wydajność silników przeglądarek rośnie z każdą aktualizacją, dlatego nie krępujcie się tworzyć nawet gier pokroju Quake’a III. Inna sprawa ma się w przypadku urządzeń mobilnych, ponieważ ich wydajność nie jest jeszcze tak duża jak tradycyjnych komputerów osobistych. Kolejną rzeczą w przypadku mobile to okropne błędy domyślnych przeglądarek w starszych wersjach systemów Android i iOS. Temat zostanie przeze mnie dobitnie poruszony w przypadku artykułów dotyczących Phonegapa. Póki co zostawiam Was w błogiej nieświadomości, przyjemność trzeba sobie dawkować ekhm.
Jeden by wszystkimi rządzić, czyli dlaczego gra jest warta świeczki
Kiedyś mówiono o Javie jako o rozwiązaniu międzyplatformowym dla tworzonych aplikacji. Dziś to samo można powiedzieć o JavaScripcie, bo on jest po prostu wszędzie! Oprócz tradycyjnych desktopów mamy przede wszystkim urządzenia mobilne. Systemy takie jak BlackBerry 10, Windows 8 czy Firefox OS, potrafią uruchamiać aplikacje pisane w JSie praktycznie bez użycia żadnych dodatkowych obejść, są to aplikacje pierwszej kategorii, traktowane na równi z natywnymi. Pozostałe systemy operacyjne pozwalają uruchomić aplikacje webowe za pomocą takich technologii jak Phonegap czy Titanium. Dzięki środowisku Node.js możliwe stało się uruchamianie JSa z poziomu linii poleceń praktycznie w każdym systemie operacyjnym. Jednym z zastosowań Node.js jest noduino, pozwala to na obsługę mikrokontrolera za pomocą JSa, po prostu pięknie. Sterowanie dronem za pomocą JSa? Tak, to również jest możliwe. Jeff Atwood napisał kiedyś, że jeżeli coś może zostać napisane w JavaScripcie to będzie to napisane w JavaScripcie. Jest w tym sporo prawdy, ponieważ mamy już nawet pierwszy system operacyjny oparty w dużej mierze na JSie a jest nim Firefox OS. Ktoś nawet stworzył JavaScript w JavaScripcie, można to traktować jako żart ale udowadnia przy tym, że język jest kompletny. Powstają także coraz bardziej zachwycające gry w tym języku jak np. BananaBread, a Mozilla chce umożliwić łatwe przenoszenie znanych gier z pulpitu prosto do środowiska przeglądarki. Przyszłość klaruje się bardzo pozytywnie dla technologii webowych a programistów JavaScriptu będzie potrzeba coraz więcej (tym bardziej, że nie każdy go rozumie). Kiedyś nie do pomyślenia było ujrzeć ogłoszenia z pracą kierowaną bezpośrednio do frontendowca. Przeważnie był to programista PHP a znajomość JSa i technologii pokrewnych była mile widziana. Teraz wszystko się zmienia, programiści JSa to także programiści mobilni, to również programiści takich urządzeń jak telewizory, ponieważ i tam język ten odnalazł się doskonale. Pisanie jednego kodu dla wielu urządzeń jest bardzo kuszące i pozwala zaoszczędzić sporo kasy, a to już jest bardzo dobry powód aby spróbować, a nuż będzie smakowało.
Społeczność, która zadziwia
Jedną z najważniejszych rad jaką mogę polecić przy nauce nowego języka to szukanie autorytetów. Szczęśliwie na początku swojej przygody z JavaScriptem trafiłem na artykuły takich osobistości jak Douglas Crockford, Stoyan Stefanov, Nicholas Zakas, Addy Osmani, Paul Bakaus i wielu innych. Polecam śledzenie ich artykułów oraz książek, Ci Panowie Tworzą ten świat, pokazują jak można wykorzystać znane struktury w zupełnie nowy sposób i przedstawiają dobre wzorce programowania. Jest to zdecydowanie lepsza metoda nauki niż szukanie tutoriali w ciemno, tym bardziej, że większość jest na prawdę kiepskiej jakości. Również w naszym kraju udzielają się wysokiej jakości specjaliści, mogę śmiało polecić bloga Damiana Wielgosika a także Andrzeja Mazura. Polecam śledzić również społeczności tej technologii na Google+ oraz grup na facebooku (m.in. tutaj) aby być zawsze na czasie i poznawać nowe narzędzia, które publikuje społeczność. Popularność tego języka rośnie lawinowo o czym może świadczyć ten wykres: langpop.corger.nl. Przedstawione zostały na nim dane wyciągnięte z takich serwisów jak github.com i stackoverflow.com. Tak więc nie ma co czekać, uczmy się JavaScriptu i zróbmy to dobrze!
Przydatne źródła do dalszej nauki
Nie chciałbym Cie drogi czytelniku zostawić bez źródeł za pomocą których możesz pogłębić swoją wiedzę na temat języka JavaScript i poznać wiele innych narzędzi, które uprzyjemniają pracę z nim. Na początek polecam Superhero.js – to świetna kolekcja wartościowych artykułów na temat tego języka. Strona Douglasa Crockforda to również wspaniały zbiór artykułów i prezentacji. DailyJS pozwala na bieżąco śledzić nowości w świecie JSa. Jeżeli chodzi o książki to mam swoją świętą trójcę do której bardzo często wracam, a są to: JavaScript. Moce strony, JavaScript. Programowanie obiektowe, oraz JavaScript. Wzorce. Z samego czytania nie będzie jednak nic jeżeli nie zostanie ono podparte odpowiednią praktyką.
Od strony do strony, aż po aplikacje, w tym mobilne, twórz sobie nowe wyzwania i nie bój się porażek, nie od razu staje się mistrzem. To droga dużej cierpliwości i wymaga wielu wyrzeczeń jeżeli chcesz zająć się tym na poważnie. JavaScript to na prawdę zwariowany język. Znam osoby, które uważają go za slang i lubią z niego szydzić. Pokazuję im wtedy kolejną ciekawą a przy tym efektowną aplikację i uśmiecham się gdy otwierają oczy ze zdumienia ;).
Wpisem tym chciałem przybliżyć czytelnikowi język JavaScript i zachęcić do dalszego czytania, do eksperymentowania i tworzenia zupełnie nowych rzeczy, których barierą jest tylko wyobraźnia. Zapraszam do dyskusji. Ty też możesz zadziwić sieć, masz do tego narzędzie więc nie krępuj się i korzystaj!