Spotkanie to odbyło się już jakiś czas temu (w weekend 22-23 stycznia), jednak dopiero teraz zebrałem się, żeby napisać krótką relację. Warto o nim napisać, ponieważ jest bardzo ciekawą inicjatywą jednocześnie łączącą dwa bieguny: szkolenie prezentuje wysoki poziom i jest darmowe. W Warszawie spotkaliśmy się w kameralnym gronie 10 osób - w końcu miały to być warsztaty z czynnym udziałem wszystkich uczestników, a nie słuchanie wykładu.

DevMeetins w Warszawie - Programowanie gier w JavaScript

Szkolenie odbyło się w hotelu Hetman, do dyspozycji dostaliśmy małą salkę z projektorem. Prowadzącym szkolenie był Marek Pawłowski, a gościem specjalnym Michał Budzyński. Obecność tego drugiego pozytywnie wpłynęła na całe szkolenie, ponieważ często uzupełniał wiadomości, zadawał odpowiednie pytania, odpowiadał na inne, cały czas brał czynny udział w prezentacji.

Dzień 1


Wprowadzenie

Na początek Marek poprowadził odpowiedni wstęp do tematu. Przedstawił różne silniki i frameworki do tworzenia gier w JavaScript (Aves Engine, Effect Games). Opowiedział o swoich doświadczeniach przy tworzeniu przeglądarkowej gry Tanadu. Rozmawialiśmy o dobrych praktykach podczas pisania gier w JavaScript, poruszyliśmy takie tematy, jak minimalizacja requestów HTTP, DNS lookups, cache'owanie Ajaxa, trochę teorii o Node.js, czy wycieki pamięci w jQuery.
Ciekawą koncepcją jest na przykład linkowanie do zewnętrznego serwisu udostępniającego bibliotekę jQuery zamiast umieszczanie jej na własnym serwerze ze względu na fakt, iż użytkownik odwiedzający różne strony mógł wejść już na inną z tym samym mechanizmem, dzięki czemu cały plik trafił do cache'u przeglądarki i nie będzie pobierany ponownie, nawet przy pierwszej wizycie na naszej stronie.
Porozmawialiśmy o Pirates loves Daisies - robiącej spore wrażenie grze napisanej w HTML5. Była mowa o optymalizacji wydajności naszego kodu, a także o Ever Cookie - Javascriptowym API, dzięki któremu uzyskamy efekt niezniszczalnego wręcz ciasteczka po stronie użytkownika nawet, jeśli usunie on standardowe ciasteczka z przeglądarki.

Optymalizacja obrazków

W tym temacie omówiliśmy używanie sprite'ów, (nie)skalowanie obrazków w CSS, używanie base64 do wprowadzania grafik bezpośrednio do kodu, podział na poddomeny (np. img.domena.com) w celu zwiększenia wydajności i obejścia ograniczenia na małą ilość jednoczesnych requestów przeglądarki. Poruszyliśmy także kilka tematów związanych z czystym CSSem, jak na przykład unikanie skomplikowanych wyrażeń czy wybór linkowania zamiast importu. Na koniec było jeszcze trochę o minifikacji JavaScript, używaniu YSlow i Page Speed, oraz o bardzo ciekawym i przydatnym narzędziu o nazwie Sprite Me, które potrafi wygenerować sprite'a z używanych na danej stronie obrazków.

Animacje

W tym wątku Marek opowiadał o animacjach poklatkowych w Webkicie, czyli -webkit-animation oraz -webkit-transition, ponownie base64, canvas w IE9. Naszą zabawką był Sub Zero z Mortal Kombat, którego animowaliśmy na różne sposoby.

Performance

W wątku o wydajności omówione zostały Yahoo Best Practices, metody Repaint, Reflow i Flush, narzędzia takie jak Speed Tracer i dynaTrace, a także działania na elementach DOMu, używanie HTMLCollection, innerHTML, createDocumentFragment, korzystanie z JSPerf, narzędzia do testowania wydajności skryptów.

Dzień 2


Optymalizacja, komunikacja i architektura

Drugiego dnia zaczęliśmy od koncepcji long running JavaScript i memoizacji podczas wywołań funkcji. Było o Web Workers, koncepcji DRY (Don't Repeat Yourself) i KISS (Keep It Simple, Stupid), a także komunikacji poprzez REST, XMLHTTPRequest, XHR oraz JSON-P. Do tego doszło Web Socket, socket.io, Flash Socket, XHR-Polling, koncepcja MVC w JavaScript. Do tego Test Driven Development, czyli JS Test Driver, QUnit oraz YUI Test. Końcówka to już szybki przegląd dostepnych technologii i narzędzi do tworzenia gier: Adobe AIR, QT, Titanium Appcelerator, PhoneGap, Qooxdoo, Unify, ExtJS, Sencha Touch, WebGL.

JS Game Dev

Gościem specjalnym był wcześniej wspomniany Michał Budzyński, który opowiedział o tworzeniu gier w JavaScript jako takim, a także przedstawił swoje doświadczenia związane z tym tematem. Najpierw krótka historia tworzenia gier w JS, a później poszczególne przykłady. Michał opowiadał o Super Mario zmieszczonym w 14 kb kodu JavaScript, o tworzeniu gier na konkursy (np. GameON), o wielu ciekawych serwisach, które każdy chętny tworzenia tego typu aplikacji odwiedzić powinien. Zobaczyliśmy Open Odyssey, grę stworzoną na potrzeby Mozilla GameON 2010. Na koniec było trochę porównań: sprite vs gif, canvas vs dom, cookie vs local storage. Doszliśmy także do wniosku, że WebGL jest przyszłością sieci jeśli chodzi o aplikacje 3D działające w przeglądarce.

Podsumowanie

To były bardzo intensywne i treściwe dwa dni, profesjonalne szkolenie na bardzo wysokim poziomie. W ciągu 16 godzin nauczyłem się więcej, niż przez poprzedni miesiąc. Było sporo zadań, w których mogliśmy wykazać się swoimi umiejętnościami, a także poznać nowe, ciekawe rozwiązania. Wielkie dzięki kieruję do prowadzącego (Marek Pawłowski), organizatora (Piotr Zwoliński, Dev Meetings) oraz gościa specjalnego (Michał Budzyński), który świetnie uzupełniał prowadzone warsztaty. Życzę powodzenia w rozwijaniu idei darmowych, profesjonalnych szkoleń i szczerze zapraszam na kolejne edycje, bo warto!