W maju 2011 w Warszawie odbyła się konferencja „Falsy Values – a true JavaScript event”, na którą pojechałem wraz z Kamilem Kluskiem. Impreza była podzielona na dwie części – w ciągu pierwszych dwóch dni odbywały się warsztaty, w ostatni dzień konferencja. Organizacja jak i poziom merytoryczny stały na dobrym poziomie. Poniżej przybliżam te, w których udało nam się wziąć udział.

 

Dzień I:

  • Tom-Hughes Croucher node.js
  • Kornel „porneL” Lesiński, Peter „kuvos” van der Zee Game Development
  • Damian „ferrante” Wielgosik Introduction to JavaScript
  • Radek Litman / Michał Budzyński Desktop applications with Javascript

Dzień II:

  • Tantek Çelik HTML5/CSS3
  • Andrea Giammarchi ECMAScript 5
  • Christian Johansen TDD/JavaScript testing

Christian Johansen – TDD/JavaScript testing

Warsztaty prowadzone były przez Christiana Johansena (blog:
http://cjohansen.no/
) który jest znakomitym specjalistą w dziedzinie TDD w JavaScript, w zeszłym roku ukazała się jego książka Test-Driven JavaScript Development, jest autorem biblioteki SinonJS i nieopublikowanej jeszcze BusterJS. Ponadto Christian potrafi dzielić się swoją wiedzą na żywo prowadząc warsztaty.

Warsztaty Christian podzielił na trzy etapy. Część wprowadzająca – w trakcie krótkiej prezentacji omówione zostały podstawy, czyli czym są testy jednostkowe, czym jest TDD, dlaczego je warto wdrażać i jak do niego podchodzić.

Na przykładzie implementacji w JS funkcji z PHP strftime prowadzący pokazał, jak można zacząć przygodę z TDD. Punkt startu oparty został o funkcję console.log – okazało się, że można rozpocząć pisanie testów nawet bez dedykowanych narzędzi.

Date.prototype.strftime = function (format) { 

//date formats code

}

var date = new Date(2009, 11, 5);

console.log(date.strftime("%Y") == "2009");

Ten trywialny przykład posłużył do zbudowania prostej biblioteki i omówienia tak podstawowych pojęć jak „assertion”, „test function”, „test case” czy „test runner”. Dla osób które nie były zaznajomione z tematyką TDD, a na warsztatach było ich całkiem sporo, stanowiło to świetne wprowadzenie.

Następnie Christian przedstawił zarys TDD w JavaScript i omówił narzędzia dostępne na rynku. Biblioteki uruchamiane w przeglądarce: JSUnit (pierwsza biblioteka JS z 2001 roku), YUI Test (narzędzie tworzone w znacznej mierze przez programistów Yahoo), Jasmine , Dojo , QUnit (framework używany przy rozwoju jQuery ). Pokazał także swoją bibliotekę BusterJS, która aktualnie jest w fazie beta. Biblioteki hybrydowe (czyli biblioteki które mogą być uruchamiane także po za przeglądarką internetową) i serwerowe. Tutaj zobaczyliśmy:

  • BusterJS – który uruchamiany jest na node.js,
  • JSpec – można go uruchomić na node.js, Rhino, emulacja DOM realizowana jest przez en.js,
  • phantomjs – czyli rozwiązanie pośrednie, przeglądarka Google Chrome bez interfejsu.

W dalszej kolejności Christian pokazał narzędzie które z naszego punktu widzenia jest szczególnie interesują i pokuszę się o stwierdzenie, że stanowi nową jakość w podejściu do tematu testowania aplikacji frontendowych. Tym narzędziem jest JsTestDriver . Cóż w nim takiego rewelacyjnego? Otóż wszystkie wcześniej wymienione rozwiązania działają na zasadzie „weź zestaw testów i uruchom na wybranym środowisku”. Takie podejście ma kilka wad. Gdy środowiskiem jest przeglądarka to wadą jest trudność w automatycznym uruchamianiu testów i przechwytywania z nich wyników. W przypadku rozwiązań serwerowych wadę stanowi fakt, że albo emulują przeglądarki (czyli dostarczają jedynie „przybliżone” środowisko), albo odtwarzają działanie tylko wybranego silnika (też niekoniecznie gwarantując 100% odtworzenie środowiska).

JsTestDriver przynosi zupełnie inne podejście do tematu, które można określić „weź środowiska, weź zestaw testów i uruchom go na każdym środowisku”. Najlepiej obrazuje to rysunek z dokumentacji:

js-test-driver

(źródło:
http://code.google.com/p/js-test-driver/
)

JsTestDriver jest serwerem napisanym w Javie, który hostuje testy jednostkowe, przeglądarki podłączają się do niego i na żądanie klienta uruchamiają zestawy testów. To właśnie jest rewelacyjne – z jednego miejsca, uruchamiany jest ten sam zestaw testów, na wielu prawdziwych przeglądarkach. Dla nas najistotniejsze jest to, że tym jednym miejscem może być system ciągłej integracji taki jak Hudson.

Andrea Giammarchi – HTML5

Andrea  jest autorem bardzo popularnego bloga WebReflection, aktualnie pracuje dla Nokii jako „Dev Leader/Senior Software Developer” odpowiedzialny za produkt OviMaps.

W trakcie warsztatów pokazał najpopularniejsze techniki optymalizacji kodu JavaScript. Szczególnie dla nas istotne wydają się dwie wskazówki:

1. Zamykanie aplikacji w własnej przestrzeni, poprzez stosowanie plików intro.js i outro.js

intro.js 

(function(window) {

//Kod aplikacji

outro.js

})(this);

2. Ulepszenie minimalizacji kodu poprzez przechowywanie właściwości złożonych obiektów w zmiennych lokalnych:

(function(window){ 

var

slice = window.Array.prototype.slice,
filter = window.Array.prototype.filter,
sort = window.Array.prototype.sort,
reverse = window.Array.prototype.reverse

;

alert(slice+' '+filter+' '+sort+' '+reverse);
}(this))

 

(function(a){alert(a.Array.prototype.slice+" "+a.Array.prototype.filter+" "+a.Array.prototype.sort+" "+a.Array.prototype.reverse)})(this);

Kod oryginalny: 234B
Kod zminimalizowany: 138B

(function(window){ 

var

Array = window.Array,

ArrayProto = Array.prototype,

slice = ArrayProto.slice,

filter = ArrayProto.filter,

sort = ArrayProto.sort,

reverse = ArrayProto.reverse

;

alert(slice+' '+filter+' '+sort+' '+reverse);

}(this))

 

(function(a){a=a.Array.prototype;alert(a.slice+" "+a.filter+" "+a.sort+" "+a.reverse)})(this);

Kod oryginalny: 238B

Kod zminimalizowany: 94B

 

Dzień konferencyjny

W wielkiej sali kina Femina odbyła się część konferencyjna imprezy. Składała się z sześciu czterdziestopięciominutowych prelekcji, przedzielonych kwadransami kawowymi podczas których można było powymieniać się doświadczeniami i zjeść ciastka Mrugnięcie okiem .

 

Douglas Crockford – Styling for Success

 

Pierwszy wykład poprowadził sam „Master Yoda of JavaScript”. Na co dzień architekt JavaScript w Yahoo Inc., człowiek dzięki któremu mamy ustandaryzowany format JSON, członek ECMA TC39 (grupa robocza standaryzująca ECMAScript). Jest autorem znakomitej w swej przejrzystości i prostocie książki „JavaScript: The Good Parts” (na której egzemplarzu udało mi się zdobyć autograf, do której lektury gorąco zachęcam. Douglas jest znakomitym specjalistą o ogromnej wiedzy, a przy tym posiada duży dystans do środowiska w którym pracuje.
Podczas swojej prelekcji Douglas mówił o dobrym stylu programowania, wyjaśnił co i dlaczego jest dobrym stylem i zalecił aby zawsze pamiętać w jakim języku się programuje (czyli nie przenosić nawyków z jednego języka programując w innym). Pokazał kilka przykładów kodu który może być szczególnie problematyczny z względu na naturę języka JavaScript. Poniżej jeden z przykładów – z względu na „semicoln insertion” funkcja buildObjectLiteral zamiast obiektu zwraca undefined.

 
function buildObjectLiteral() { 

return

{

"someProperty": "hello"

};

}

Osoby które na bieżąco śledzą YUI Theater zapewne zauważyły, że prelekcja była nieco okrojoną wersją jednej z prezentacji z cyklu „Crockford on JavaScript”, niemniej było czystą przyjemnością móc wysłuchać legendy na żywo.

 

 

 

Odsyłacz:

http://webhosting.pl/Douglas.Crockford.czyli.guru.JavaScriptu.o.tym.ze.w.kodowaniu.wazny.jest.styl

 

Dmitry Soshnikov – ECMAScript 6

 

Dimitry określa się mianem „ECMAScript theorist” i podobnie jak przedmówca także uczestniczy w pracach TC39. Podczas tej prelekcji poznaliśmy nowe właściwości które mogą wejść do przyszłej specyfikacji języka opracowywanej w ramach projektu Harmony.

  1. Słowo kluczowe let, które ma zastąpić słowo var przy definiowaniu zmiennych. Słówo to wprowadza zasięg blokowy zmiennych (block scope), zatem zmienne zdefiniowane przy jego pomocy będą dostępne tylko w obrębie danego bloku np. tylko wewnątrz konkretnej pętli.
    let foo = 123;
  2. Stałe – mechanizm dostępny od dawna w wielu innych językach w końcu zagości w JavaScript.
    const foo = 123; const foo = function () {};
  3. Domyślne parametry fuknkcji – jeden z większych mankamentów składni JS’a zostanie poprawiony i nie będzie potrzeby używania klasycznej konstrukcji:
    var foo = foo || 'default'; //aktualnie uzywana emulacja
    const foo = function (param = 123) {};
  4. Destrukturyzacja (nie destrukcja!) – jeden z ciekawszych „ficzerów” który ma się pojawić w języku, pozwala na łatwe mapowanie struktur do zmiennych.
    let [x,y] = [10,20,30]; // x == 10, y == 20
  5. „Bye bye arguments” – pseudoobiekt arguments (który wyglądał jak tablica, ale nią nie był) zostanie zastąpiony przez tablicę rest, która będzie zawierała wartości przekazane do funkcji, po za listą zdefiniowanych argumentów. Jeżeli zdefiniujemy taką funkcję:
    function a(arg1, arg2) { return rest; }

    , a wywołamy ją w następujący sposób

    a(1,2,3,4,5);

    to na wyjściu otrzymamy tablice [3,4,5].

  6. Spread – kolejna zmiana przy przekazywaniu zmiennych do funkcji, zamiast argumentów będzie można przekazać obiekt lub tablicę
    function showUser(name, age, weight) {};
    let user = ['Alex', 28, 180];
    showUser(user);

    Skrócony zapis funkcji:

    [1, 2, 3].map(function (x) { return x * x; }); // [1, 4, 9]
    [1, 2, 3].map((x) \-> x * x); // [1, 4, 9]

    Obiekty Proxy – czyli obiekty które będą mogły reagować na zmiany w innych obiektach.

  7. System modułowy – aktualnie żeby zrealizować moduł trzeba napisać dość karkołomną konstrukcję wykorzystującą clousure, której czytelność jest dość przeciętna. Ma się to zmienić poprzez wprowadzenie słów kluczowych module, export, import.

Odsyłacze:

,
http://webhosting.pl/ECMAScript.i.nowosci.w.JavaScript.wywiad.z.Dmitry.Soshnikovem

 

Juriy „kangax” Zaytsev – Fabric.js – building a canvas library

Juriy opowiedział o swoich doświadczeniach przy opracowywaniu biblioteki graficznej Fabric.js, która pozwala na łatwą generację grafiki przy pomocy.
http://kangax.github.com/fabric.js/test/demo/

 

Tom Hughes-Croucher – node.js

Kolejny pracownik Yahoo spośród prelegentów, wprowadził nas w świat node.js. Zobaczyliśmy jak duże korzyści może przynieść użycie node.js zamiast standardowego stosu PHP/Python/itd. Według danych jakie zaprezentował zysk wydajności może wynieść nawet 650 razy – na podobnej konfiguracji standardowy serwer był w stanie obsłużyć ok. 1000 użytkowników, natomiast port aplikacji na node.js 650 tysięcy. Niestety z względu na ograniczenie czasowe i dużą ilość żartów, zdążył pokazać jedynie podstawowe techniki.

Odsyłacze:

http://nodejs.org/
,

http://webhosting.pl/Dlaczego.warto.zainteresowac.sie.Node.js.Wywiad.z.Tomem.Hughes_Croucherem

Zbigniew Braniecki – Javascript compilation

Zbigniew od dekady związany jest z projektem Mozilla, w 2001 roku założył polską grupę lokalizacyjna Aviary.pl, jest członkiem zarządu Mozilla Europe, od 2008 roku pracuje w Mozilla Corp gdzie aktualnie zajmuje stanowisko „Senior Community Ninja”
Jego przentacja to największa niespodzianka i moim skromnym zdaniem najlepsza prelekcja z całego dnia. Niespodzianka, gdyż zapowiadało się średnio – pierwotny temat wystąpienia jaki widniał w agendzie to „i18n in JavaScript”, jednak Zbigniew opowiedział o czymś znacznie ciekawszym czyli o JIT (Just-In-Time) Compilation.

Kompilowanie JIT skryptów JS polega na śledzeniu ich wykonania, w momencie gdy silnik wykonawczy wykryje, że dana funkcja jest często uruchamiana, zostaje ona w locie skompilowana do kodu natywnego i od tej pory, jak to określił prelegent, jest już „super fast, and by that I mean 1000 times faster”.

Zbigniew omówił obie aktualnie stosowane w przeglądarkach implementacje:

Method JIT – kompilator śledzi ilość wykonywania funkcji, w momencie gdy osiągnie ona odpowiedni próg wykonań jest kompilowana.

(Źródło Zbigniew Braniecki – prezentacja)

Tracing JIT – kompilator śledzi całość wykonywanego kodu i szuka w nim ścieżek najczęściej używanych, gdy odnajdzie taką ścieżkę to ją kompiluje. Metoda ta jest używana tylko w FireFoxie i z względu na trudności w implementacji tylko jako uzupełnienie metod JIT

(Źródło Zbigniew Braniecki – prezentacja)

Poniżej ilustracja obrazująca różnice w kodzie wynikowym obu metod:

(Źródło Zbigniew Braniecki – prezentacja)

Odsyłacze:

,

https://developer.mozilla.org/En/Nanojit
,
http://webhosting.pl/O.nowosciach.w.nadchodzacych.edycjach.Firefoksa.Rozmowa.ze.Zbigniewem.Branieckim.z.Mozilli

Brian LeRoux – PhoneGap

Brian to człowiek odpowiedzialny za wtfjs.com i crockfordfacts.com, na codzien pracuje jako SPACELORD w Nitobi Software, jest współzałożycielem projektu PhoneGap i autorem bibliotek Lawnchair i XUI.

PhoneGap to projekt którego celem jest dostarczenie środowiska do budowania mobilnych i wieloplatformowych aplikacji opartych na nowoczesnych standardach Web, które to określa się skrótem myślowym jako HTML5.

(źródło:
http://www.phonegap.com/
)

Idea działania PhoneGap jest prosta:

  1. Napisz aplikację zgodną z „standardami”.
  2. Zbuduj przy pomocy PhoneGap.
  3. Wdrażaj na wielu platformach!.

PhoneGap udostępnia natywne API urządzeń mobilnych programistom JavaScript (dokumentacja dostępna na stronie
http://docs.phonegap.com/
), mamy zatem dostęp do obsługi:

  • zdarzenia (deviceready, online, offline),
  • network api (detkcja typu połączenia WiFi,2G,3G, brak sieci),
  • dostęp do danych z sensorów telefonu: modułu GPS, akcelerometru, żyroskopu, kompasu, kamery, mikrofonu.

Brian pokazał nam środowisko w akcji, pisząc na żywo kilka prostych przykładów, które następnie uruchomił na telefonie z Androidem i na emulatorze iPhone’a. Cała prezentacja mogła była prowadzona merytorycznie, a do tego bardzo humorystycznie. Jako fanowi serii StarTrek, szczególnie spodobała mi się okrasa większości slajdów motywami z tej sagi kina science-fiction.

Odsyłacze:

,
http://webhosting.pl/PhoneGap.pisz.aplikacje.mobilne.z.wykorzystaniem.HTML.5.i.JavaScript.Wywiad.z.Brianem.LeRoux

Tantek Çelik – CASSIS

Tantek to kolejna znakomita osobistość która pojawiła się na konferencji. Człowiek znany głównie z popularyzacji otwartych standardów, mikroformatów, członek wielu grup roboczych W3C, w jego CV można znaleźć takie firmy jak Apple, Mircosoft, Oracle, Sun Microsystems. Śmiało można powiedzieć, że jest to weteran branży.

Jego prezentacja była najbardziej osobliwa z wszystkich na których do tej pory byłem. Podczas tej prelekcji miała miejsce światowa premiera projektu CASSIS. Nazwa to akronim od „Client And Server Scripting Implementation Subset”, projekt ten to eksperyment Tantek’a w czasie którego opracował podzbiór języka JavaScript który może być uruchamiany zarówno przez silnik JavaScript przeglądarki, jak i przez interpreter PHP. Cała magia rozwiązania sprowadza się do umiejętnego pisania kodu i sprytnych komentarzy, dzięki czemu raz napisana funkcjonalność może być uruchamiana na dwóch całkowicie różnych środowiskach.

Projekt w swojej naturze interesujący, jednak w naszych realiach może być traktowany tylko i wyłącznie w kategoriach ciekawostki, gdyż zupełnie nie nadaje się do zastosowanie w dużych projektach realizowanych przez zespoły złożonych z wielu programistów.

Odsyłacze:

http://tantek.com/
,

http://tantek.com/cassis.js
,

http://microformats.org

Podsumowanie

Kończąc ten wpis wypada mi pogratulować organizatorom konferencji – impreza stała na naprawdę światowym poziomie. Znakomici prelegenci i ogólny poziom merytoryczny – naprawdę warto było kupić bilety i jechać te paręset kilometrów pociągiem. Sprawna organizacja i warunki lokalowe. Do poprawy w przyszłej edycji jest łączność WiFi (z którą było różnie podczas warsztatów) i rozważyć wydłużenie do godziny czasu prelekcji (w kilku przypadkach prelegentom brakowało czasu). Z niecierpliwości wyczekuję następnej konferencji!

 

Krzysztof Osetek
starszy programista