Webowy front-end rozwija się w zastraszającym tempie. Nie ma Cię w sieci tydzień i od razu mijasz się z premierą Yeomana. Jutro z kolei dowiesz się o tym, że gra Trigger Rally ma świetną grafikę i jest napisana, o tempora, o mores, w JavaScripcie! Jak odnaleźć się w konkurencji, w której zaczęto biec tempem Usaina Bolta, a na rekord świata codziennie nastawiają się miliony developerów?
Poznaj JavaScript i CSS3
Powiedzmy sobie wprost – przywołując jeszcze kilka analogii do biegu na 100 metrów – nie umiesz JavaScriptu i CSS3 – startujesz 10 sekund po innych. Weźmy JavaScript. To ten język, mimo pewnych braków, rozwija się dzisiaj najszybciej na świecie. I to nie na płaszczyźnie składni i tak dalej. Wokół JS-a powstał cały ekosystem. Zapomnij o tym, że 10 lat temu służył on tylko do prostych animacji. To już nieaktualne. Dziś buduje się modułowe aplikacje w jednym z wielu frameworków MVC. Używa się websocketów, dołącza Modernizr’a, a dane, w zależności od tego czy jesteśmy online czy offline, zapisujemy w localStorage lub w JSON-owej bazie np. MongoDB. Nie wypluwa się gotowego HTML-a parsowanego przez serwer – to JavaScript jest odpowiedzialny za system szablonów, który jest używany po stronie klienta. A propos, wiedziałeś, że LinkedIn zapisuje szablony swojej mobilnej wersji w localStorage, by jeszcze bardziej przyspieszyć czas ładowania?
Ostatnie 2-3 lata w developmencie to nieustanny, jeszcze bardziej intensywny niż kiedykolwiek indziej rozwój. W zasadzie te kilkadziesiąt miesięcy to całe lata świetlne, jeśli chodzi o to, jak diametralnie zmieniły się techniki i narzędzia. Wyliczankę nowości można zacząć dowolnie, bo na pierwsze miejsce w hierarchii ważności zasłużyło co najmniej kilkanaście projektów i idei.
Responsive design
Warto zauważyć przede wszystkim responsive design. W dobie urządzeń mobilnych zapewne wielokrotnie spotkałeś się z problemem dostosowania szerokości swojej strony do rozdzielczości ekranu. Responsive design to załatwia i sprawia, że nie musimy powiększać strony manualnie – obecnie da się dołączyć do HTML kilka plików CSS i podać reguły, kiedy mają być używane. Ekran o maksymalnej rozdzielczości 640px? No problem, max-width:640px i przeglądarka użyje stylów specjalnie dla urządzeń przenośnych do 640px. Wszystko dzięki media queries.
Node.js
Wracając na chwilę do JavaScriptu. Musisz koniecznie poznać node.js, platformę do tworzenia aplikacji sieciowych, która rewolucjonizuje myślenie o back-endzie. Zaufali już jej choćby Microsoft czy eBay. W node.js zrobisz back-end interaktywnej aplikacji opartej na web socketach, build system dla całego środowiska programistycznego, a po pracy… zaprogramujesz układ scalony lub mini helikopter. Dostęp do niskopoziomowych właściwości systemu okaże się zbawieniem, a w głowie od razu zaroi się od pomysłów.
Frameworki MV*
W JS dzieje się bardzo wiele, jeśli chodzi o nowe frameworki. Ponieważ przeglądarki w większości rozumieją querySelectorAll i addEventListener, świat nie kręci się już wokół jQuery i mootools. Nadszedł czas na poważną architekturę. Renesans przeżywają frameworki MV* (gwiazdka dlatego, że warstwa kontrolera jest w JS z reguły zbędna). W związku z tym koniecznie musisz poznać Backbone.js lub Spine.js. Zresztą… Jest tego więcej! Wejdź na todomvc.com i przyjrzyj się przykładowym aplikacjom TODO wykonanym w jednym z kilkudziesięciu frameworków MV* w JS. Na pewno znajdziesz coś dla siebie. Przy okazji, byłeś już na microjs.com?
AMD vs. CommonJS
Zabawa dla dorosłych zaczyna się na dobre, kiedy pomyślimy, jak obecnie dodaje się pliki JavaScript do dokumentu HTML i strukturyzuje je. O ręcznym dodawaniu <script></script> wewnątrz dokumentu pamięta już tylko Twoja babcia. Nadszedł czas takich rozwiązań jak RequireJS (z rodziny AMD – asynchronous module definition) czy webmake-modules (moduły CommonJS w przeglądarce). Dzięki temu pierwszemu nie tylko uporządkujesz swój kod w postaci modułów i zależności między nimi, ale także dynamicznie doładujesz je wtedy, kiedy będą potrzebne (a więc niekoniecznie musimy ładować cały kod aplikacji, skoro nie używamy pewnych ekranów). Webmake-modules to z kolei odpowiedź na sposób definiowania modułów przez RequireJS, który różni się od standardu CommonJS, a więc i node.js. Jestem jego ogromnym fanem, ponieważ dzięki niemu możemy pisać moduły tak, jak w node.js i każda przeglądarka je „zrozumie”. Koniecznie przyjrzyj się prezentacji Mariusza Nowaka!
Szablony Twoim przyjacielem
Coraz popularniejsze staje się też używanie systemu szablonów bezpośrednio po stronie JavaScriptu. Warto więc zainteresować się takimi projektami jak Mustache czy Handlebars.js. Kto by pomyślał te parę lat temu, że JS stanie się na tyle szybki, by parsować duże porcje template’ów?
Rewolucje w CSS3
W CSSie również cała gama zmian. Generuje się już w nim gradienty, a zaokrąglone rogi to kwestia jednej linijki (border-radius). Poza tym mamy animacje (do widzenia JSie!) czy transformacje 2D i 3D (zapewne widziałeś już polskiego impress.js?). Obramowanie elementów z kolei można złożyć wreszcie z samych obrazków, bez brudnych tricków. A to tylko wierzchołek góry nowych rozwiązań, które niesamowicie przyspieszyły development w ostatnich latach.
A co z grami
Programiści gier ucieszą się z kolei z powodu rozwoju WebGL na przeglądarki, a także możliwościom jakie daje Canvas i SVG. Dodatkowo, w kuluarach powstaje dużo fajnych API, jak choćby GamepadAPI, pozwalające komunikować się przeglądarce z joystickiem (lub innym tego typu kontrolerem)!
Zmiany, zmiany, zmiany!
Jest tego więcej. Spójrz tylko na CanIUse.com. Znajdziesz tam całą masę nowych API, które czekają tylko, abyś ich użył. Bo dziś front-end developer to nie tylko człowiek od semantycznego HTML i dobrego oraz łatwego utrzymania CSS-a. To także specjalista od wyłapywania i nauki developerskich nowości. On musi być na czasie, inaczej konkurencja ucieknie zbyt daleko.
Do biegu, gotowi, start!
PS. Widziałeś już najnowszy, w pełni otwarty system operacyjny na urządzenia mobilne, napisany w JS, HTML5 i CSS? Tak, mowa o Firefox OS!
Damian Wielgosik
Trener JavaScript, bloger o technologiach webowych na Ferrante.pl (kilkanaście tysięcy czytelników miesięcznie), organizator największych konferencji front-endowych w Europie (Front-Trends, Falsy Values), entuzjasta open-source i założyciel JavaScript.pl.
