describe( '#htmlspecialchars', function()
{
    it ('should replace chosen characters', function()
    {
        a('htmlspecialchars')->with('<')->should->be('&lt;');
        a('htmlspecialchars')->with('>')->should->be('&gt;');
        a('htmlspecialchars')->with('&')->should->be('&amp;');
        a('htmlspecialchars')->with('"')->should->be('&quot;');
        a('htmlspecialchars')->with('\'')->should->be('\'');
    });

    it ('should leave double quotes when flag ENT_NOQUOTES is set', function()
    {
        a('htmlspecialchars')->with('"', ENT_NOQUOTES)->should->be('"');
    });

    it ('should protect single quote when flag ENT_QUOTES is set', function()
    {
        a('htmlspecialchars')->with('\'', ENT_QUOTES )->should->be('&#039;');
    });

    // ...

});

sugar();

Výhody

Sugar.php je navrhnutý tak, aby ste mohli písať testy čo najrýchlejšie – žiadne volanie tried, len veľmi krátke funkcie. Tak isto sa snaží, aby každý test vyzeral ako veta, takže už len čítaním viete povedať, čo daný test robí. Zabaľuje jednotlivé testy do väčších celkov, čím zvyšuje celkovú prehľadnosť a tiež šetrí váš čas popisovaním každého jedného testu. Keď to zhrnieme:

• Písanie testov skoro ľudskou rečou
• Väčšia prehľadnosť kódu rozčlenením testov do skupín
• Kratší zápis
• Chytanie chýb
• Spätné dohľadanie chyby (error tracking)
• Možnosť spustiť len špecifické testy

Začíname so Sugar.php

Predstavme si, že testujeme model, ktorý sa stará o objednávky. Má niekoľko metód (create, read, update, delete) a pracuje s databázou. Začnime metódou create. Jej úlohou je vložiť novú objednávku do systému. Prvou vecou ktorú spravíme je volanie describe(). Describe slúži na popísanie aktuálne testovaných funkcií, v našom prípade funkcie create. Druhým parametrom je callback (úplne presne closure), ktorý obsahuje jednotlivé testy tejto funkcie.

require 'sugar.php';
require 'order_model.php'; // Model pre objednávky
require 'db.php'; // Trieda starajúca sa o DB, v kóde bude fungovať ako Active Record v Codeigniter

describe( '#create', function(){});

Teraz by sme radi vytvorili nejaké testy, tie vytvárame pomocou it(). V popise uvedieme, ako by sme chceli, aby sa funkcia správala, a ako druhý parameter uvedieme jednotlivé testy, ktoré overujú, že sa tak naozaj správa.

// ... requires

describe( '#create', function()
{
    it( 'should add new entry, when data are ok', function()
    {
        a( [ $model, 'create' ] )->with( [ 'seller_id' => 5, 'product_id' => 6 ] )->should->be->ok();

        $order = $db->get( 'order' )->result_array();

        a( $order )->should->have->length( 1 ); // V DB by mal byť iba jedna objednávka
        a( $order[0] )->should->have->properties( [ 'seller_id', 'product_id' ] );
        a( $order[0]->seller_id )->should->be( 5 );
        a( $order[0]->buyer_id )->should->be( 10 );
    });

    it( 'should add new entry, when product_id is missing', function()
    {
        a( [ $model, 'create' ] )->with( [ 'seller_id' => 5 ] )->should->fail();

        $order = $db->get( 'order' )->result_array();

        a( $order )->should->have->length( 0 ); // V DB by nemala byť ani jedna objednávka
    });
});

Ako je možné vidieť, jednotlivé testy sa zapisujú pomocou funkcie a(), do ktorej vložíme požadovanú hodnotu, a nato ďalej nabaľujeme požadovanú funkčnosť. Avšak druhý test nám neprejde. A to preto, lebo v DB bude jedna objednávka a to tá z prvého testu. Ak chceme aby sa nám nejaký kód, napríklad vyprázdnenie DB, spustil pred každým testom použijeme funkciu before_each(), ktorú napíšeme hneď za describe:

// ... requires

describe( '#create', function()
{
    before_each(function()
    {
        $db->truncate( 'order' ); // Vyprázdni tabuľku order
    });

    it( 'should add new entry, when data are ok', function()
    {
        a( [ $model, 'create' ] )->with( [ 'seller_id' => 5, 'product_id' => 6 ] )->should->be->ok();

        $order = $db->get( 'order' )->result_array();

        a( $order )->should->have->length( 1 ); // V DB by mal byť iba jedna objednávka
        a( $order[0] )->should->have->properties( [ 'seller_id', 'product_id' ] );
        a( $order[0]->seller_id )->should->be( 5 );
        a( $order[0]->product_id )->should->be( 6 );
    });

    it( 'should add new entry, when product_id is missing', function()
    {
        a( [ $model, 'create' ] )->with( [ 'seller_id' => 5 ] )->should->fail();

        $order = $db->get( 'order' )->result_array();

        a( $order )->should->have->length( 0 ); // V DB by nemala byť ani jedna objednávka
    });
});

Na podobnom princípe funguje after_each().

Closures

Môže sa stať, že vo svojich testoch budete potrebovať nejakú premennú “z vonku”. Môžete použiť globálne premenné, ale to by bolo zbytočné. Sugar.php totižto pracuje na systéme Closures. Neviem to preložiť, ale princíp je v tom, že closure sa správa ako funkcia ale berie ešte parametre “z vonku”, poďme si ukázať príklad (všimnite si use() pri volaní it()):

describe( '#read', function()
{
    $buyer_id = 10;

    it( 'should find order when after it was created', function() use( $buyer_id )
    {
        // ... create order

        a( [ $model, 'read' ] )->with( [ 'user_id' => $buyer_id ] )->should->be->ok();

        // .. another tests
    });
});

Takto jednoducho. Samozrejme use() akceptuje viac parametrov.

Testujeme funkcie a metódy

Okrem bežných hodnôt môžeme so Sugar.php testovať aj priebeh funkcií – či zlyhali alebo či vrátili očakávaný výstup. Používame k tomu kľúčové slovo .with(). Do a() vložíme názov funkcie a do with() vložíme parametre. Vyzerá to ako kód vyššie:

a('htmlspecialchars')->with('<')->should->be('&lt;');

Ak chceme testovať metódu nejakého objektu, vložíme callbackový zápis.

a( array( $object, 'method' ) )->with( 'hello' )->should->be( 'hello' );

Záver

Zvyšok je už o skladaní funkcií dokopy. Popis a použitie jednotlivých funkcií nájdete na stránke projektu: https://github.com/tomasbonco/sugar.php.

Čo sú automatizované testy?

Poznáte to – napíšete kód, potom ho spustíte, nastavíte nejak premenné (prípadne vstupy), počkáte si na výsledok a overíte, či sa zhoduje s tým, čo máte v hlave. No a myšlienka je v tom – prečo to nezautomatizovať? Prečo nenapísať, aký výsledok z funkcie očakávate pri daných nastaveniach? A preto vznikli testy. Popravde, vysvetlil som to tak rýchlo, až sa pýtam sám seba, či to potrebovalo vlastný nadpis :).

Výhody testovania

Život je príliš krátky, na písanie testov.
– hlupák

Testovanie má hneď niekoľko výhod:

1. Viete, na čom ste – viete na koľko % máte daný script hotový, či funguje, alebo nie. Ak prechádza všetkými testami, môžete si byť istý, že s celkom bude dobre zapadať.
2. Šetrí to čas – horeuvedený citát je asi najčastejší protiargument, s ktorým sa stretávam. Avšak je mylný. Ručné testovanie prebieha niekoľko sekúnd a môže trvať aj niekoľko minút, zatiaľ čo automatické testy trvajú pár milisekúnd. Ak script obsahuje chybu, testami nato príde okamžite. Ak sa ku scriptu vraciate, s tým, že potrebujete upraviť nejakú funkciu, akú máte istotu, že neohrozíte, nejakú inú kritickú časť projektu? S dobre napísanými testami, máte 100% istotu. Testy vám ušetria skutočne hromadu času.
3. Radosť z programovania – váš script práve prešiel všetkými testami, možno neveríte ale je to super pocit!
4. Dokumentácia – najhoršie na dokumentácií je, keď je stará, alebo nie je. Lenže testy sa píšu spolu s kódom (alebo pred ním), takže nemôžu byť staré. Ak nimi script prechádza, stačí sa na ne pozrieť a viete, ako ho používať.
5. Triedi myšlienky – pri písaní testov si v hlave utriedite, čo potrebuje a ako to chcete použiť.

Ako ich písať?

Ako som už spomenul, moje začiatky neboli práve slávne, testy som pchal do funkcie a testoval, či mi do nej chodia premenné v správnom tvare. Dnes už viem, že to nemá riešiť test, to má riešiť samotná funkcia. Testy slúžia na otestovanie veľkých celkov – funkcií a tried. Testy simulujú ich volanie z vonku na štandardné (očakávané) ale aj chybné vstupy a overujú, či sa testovaná jednotka zachovaná tak, ako chceme. Veľmi dobrou radou je písať testy ešte pred samotným kódom. Tak si utriedite v hlave, ako to má fungovať, viete, ako overíte výsledky výstupov a rovnako vám to pomáha aj v motivácií, pretože viete, že 3 metódy v danej triede už máte hotové a ďalšie 2 vám ešte treba spraviť. Každý test by mal byť celok, nepredpokladajte spustenie jedného testu po druhom. Každý test by si mal inicializovať to, čo potrebuje a vyčistiť, s čím pracoval.

Problémy s testovaním

Niekedy nie je jednoduché písať testy. Napríklad v prípade komunikácie medzi Serverom->Klientom (AJAX, …). V takom prípade je veľmi dobrým nápadom, simulovať odpoveď servera. V JS sa to môže vyriešiť napríklad prepísaním funkcie obsluhujúcej AJAX tak, aby vracala predom pripravené odpovede, pre potreby testovania. Ušetríte tým čas strávený čakaním na serverovú odpoveď a tiež pripravíte script na prácu s dobrou aj zlou odpoveďou.

Tiež som narazil na problém s ukladaním dát. Funkcia ukladá dáta a treba overovať, č ich správne uložila a pracovať s týmito dátami ďalej. Náročná vec na testovanie. Problém, ktorému som čelil bola práve databáza. Ak by som použil tú, na ktorej som skúšal svoju aplikáciu, musel by som ju buď po každom teste zmazať, čo je neprípustné, alebo by som musel testy písať veľmi opatrne, s ohľadom na existujúce dáta, čo naozaj nie je dobrý nápad. Riešením bolo vytvoriť novú databázu, za účelom testovania. Táto mohla byť zakaždým vymazaná, zatiaľ čo pôvodná ostala nedotknutá.

Čím testovať?

Verím tomu, že pre každý jazyk už existuje nejaký dobrý nástroj na testovanie. Pre moje účely mi v C++ veľmi dobre vystačil Catch. Pre JavaScript používam Mocha. Pre C som si napísal svoj vlastný testovací script. Podľa čoho určujem, či je to dobrý nástroj? V prvom rade komunitou. Čím väčšia komunita nástroj využíva, tým viac sa s ním stretnete. Používať práve najpoužívanejší testovací nástroj vám umožní čítať testy ostatných rýchlo a tiež môžete predpokladať, že je overený. Druhým veľkým kritériom je jednoduchosť použitia, niekedy je na škodu mať príliš veľa funkcií, inokedy vám niektoré funkcie chýbajú, môže sa tiež stať, že testy sa zapisujú neuveriteľne komplikovane. S testovacím nástrojom budete pracovať veľa, zvoľte si taký, s ktorým sa vám bude pracovať dobre. V poslednom rade pozerám na dokumentáciu. Aby ste vedeli využiť silu testovacieho nástroja, potrebuje mu rozumieť a to sa bez dobrej dokumentácie nedá.

Záver

Dúfam, že som vás navnadil k písaniu testov. V niektorom z ďalších blogpostov by som sa rád zameral na písanie testovateľného serverového kódu v JavaScripte.

$a = array( 'key' => 'value' ); // Nastavíme pole $a
$b = $a; // Skopírujeme pole $a do poľa $b
$a['key'] = 'value2'; // Zmeníme hodnotu 'key' v $a
echo $b['key']; // Vypíšeme hodnotu 'key' v $b

Ak hádate ‘value’, tak hádate správne. Ako však dosiahnuť, aby jedna premenná odkazovala na druhú, bola iba akousi ikonou? V PHP to nie je náročné, stačí pri priradzovaní (2. riadok) dať po rovná sa (=) znak ampersandu (&):

$a = array( 'key' => 'value' );
$b = &$a; // $b odkazuje na rovnaké miesto kde $a
$a['key'] = 'value2';
echo $b['key']; // value2

Ako to funguje na pozadí, vysvetlím o chvíľu, mám totiž ďalšiu otázku, čo sa stane v JavaScripte, keď napíšete nasledujúci kód?

a = { key: "value" };
b = a;
a.key = "value2";
console.log( b.key ); // value2

Na konzolu sa vypíše ‘value2′. Dôvod, prečo sa to deje, ako nadpis prezrádza, je, že JavaScript nekopíruje, JavaScript ukazuje. Nie vždy. Pokým čísla, reťazce a bool budú vždy skopírované, polia a objekty budú odkazované.

Prečo sa to deje? Ako to skopírovať?

Myslím si, že túto vlastnosť zdedil JavaScript po jazyku C/C++. Však nakoniec práve do C++ sa JavaScript kompiluje (platí pre V8). V jazyku C/C++ si vytvoríte premennú (nazvime ju a), ktorá je automaticky ukazovateľom, následne (nie nutne v rovnakom riadku) potrebuje vyhradiť kus pamäte na ktorú bude novo vytvorená premenná odkazovať. Premenná teda odkazuje na kus pamäte. Keď vytvoríte druhú premennú (b) a priradíte ju ku prvej ( b = a), tak sa skopíruje adresa na ktorú ukazuje a obe budú ukazovať na rovnaké miesto. A to je presne správanie, ktoré vidíme v JavaScripte, ale chválabohu nám aspoň odpadla tá práca s pamäťou. Lenže, ako dáta skopírujeme?

Ak to budete niekedy hľadať, nazýva sa to “deep copy”, ale ľudia radi hovoria o klonovaní. jQuery má nato funkciu $.extend, ale v súčastnosti sa ako najefektívnejší spôsob ukazuje zkonvertovať to do JSON a späť:

a = { key: "value" };
b = JSON.parse( JSON.stringify( a ));
a.key = "value2";
console.log( b.key ); // value

Funguje to pre objekty aj polia. Azda jediný problém by to teoreticky mohlo mať s cyklickými štruktúrami, ale aj to sa dá čiastočne riešiť.

Kedy to nefunguje?

Niekedy sa stáva, že sa ponáhľate a všetko vyzerá veľmi nádejne. Avšak práve vtedy sa niečo pokazí. V tomto prípade to pravdepodobne bude súvisieť s nasledujúcim kódom:

a = { key: "value" };
b = a;
c = b;
a = { another_key: "value2" } // Nastavíme a na inú hodnotu
console.log(a); // { another_key: "value2"}
console.log(b); // { key: value }
console.log(c); // { key: value }

Či už sa pokúsite a zresetovať  ( a = {}; ), alebo priradiť úplne inú hodnotu ( a = other_value; ), ocitnete sa v rovnakej situácií. Popíšme si prečo.

Na začiatku priradíme do a hodnotu, následne vytvoríme b, ktoré bude ukazovať na a, a potom vytvoríme c, ktoré bude ukazovať na b. Nie tak úplne. To, čo sa skutočne stane je, že b a c budú odkazovať na rovnakú pamäť ako a, nie na premennú a. Následne ale, vytvoríme novú pamäť s inou adresou (adresa je označenie nejakej konkrétnej časti pamäte), ktorú priradíme do a. A keďže b a c, neodkazujú na premennú a ale na tú adresu, na ktorú kedysi odkazovalo a, ich hodnota sa nezmení. Je to komplikované, preto radšej prikladám obrázok:

Google Chrome – nástroje pre vývojára

Možno ste to ani netušili, ale riešenie ste mali celý čas na očiach. Google Chrome totižto dokáže emulovať rôzne zariadenia, rôzne veľkosti displejov, dokonca môžete emulovať aj náklon zariadenia. Všetko to nájdete v Nástrojoch pre vývojára. K nim sa dostanete buď tak, že kliknete pravým tlačidlom myši a zvolíte poslednú možnosť “Preskúmať prvok”, alebo cez Nastavenia ->Nástroje -> Nástroje pre vývojárov (Ctrl+Shift+I), moja najobľúbenejšia metóda však je stlačiť F12.

V pravom hornom rohu si prosím všimnite tri ikonky, zprava – Pripnúť k oknu (to nás veľmi nezaujíma), Nastavenia a  nakoniec “Enable drawer”. Po kliknutí na túto nič nehovoriacu poslednú ikonku (prvú zľava), sa vám dole objaví nový panel. Zvoľte kartu “Emulation”, vyberte si zariadenie a kliknite na “Emulate”. Odporúčam ešte refreshnúť stránku, aby sa poslali aj správne hlavičky na server (a teda server zaslal verziu pre dané zariadenie). A to je všetko, verím, že tento krátky tip vám ušetrí veľa času a hlavne peňazí.

V predchádzajúcom blogu som písal o svojej voľbe frameworku a o problémoch, ktoré ma postretli pri používaní Kraken.js. V tomto blogu by som rád dal návod, ako vyriešiť jeden z nich – prepojiť Kraken.js so Socket.IO. Tento problém som riešil zhruba týždeň voľným tempom (keďže mám skúškové). V prvom rade, čo je to Socket.IO?

Socket.IO

Socket.IO je knižnica, ktorá umožňuje komunikáciu clienta so serverom pomocou websocketov. Ak nie je možné použiť websockety, pokúsi sa celú komunikáciu presúvať na kanál, ktoré obe strany podporujú, čím zaručuje, že ak ste pripojený, správy dorazia. V dobe písania tohto blogu akurát vyšla verzia 1.0, takže celé riešenie bude už pre verziu 1.0. Na úspešnú komunikáciu potrebujete ako knižnicu Socket.IO pre klienta tak pre Node.js server. Princíp fungovania spočíva v tom, že na serveri vytvoríte websocket server, ktorý bude načúvať a posielať správy a na clientovi vytvoríte prostredie, ktoré  bude tiež načúvať a posielať správy. Avšak rád by som zdôraznil dva fakty. Websocket server rieši požiadavky sám a teda aj keď pošlete svoje správy v tvare URL (/person/get/17), váš Node.js server ich nebude analyzovať. Druhým faktom je, že Socket.IO ponúka len samotnú komunikáciu, s kým však komunikujete, musíte zistiť vy. Ako?  Aj o tomto je tento blog.

Zdroje

Zdrojov na túto tému je veľmi málo. Takže uvediem z čoho som čerpal a kam ma to až dostalo. Celý týždeň v kocke. Uvádzam to pre prípad, keby niekto používal iný framework, chcel si prečítať diskusie alebo mal pocit, že moje riešenie nie je ideálne (v tokom prípade treba určite zanechať komentár). A uvádzam tiež len to, čo považujem za kvalitné, teda nie všetko, čo som musel prečítať. Celý príbeh začína na Issue #39. Zdá sa to celkom jednoduché, takto vytvoríte server. Ako ale zistiť s kým hovoríte? Je to platný request? Je ten človek prihlásený? Tak na vyriešenie tohto problému odporúčam tento blogpost. Problém na ktorý tiež narazíte je, že kým Issue je pre Socket 0.9, tak riešenie je pre Express 2 (čiže nie pre Kraken, ktorý mimochodom beží na Express 3).

Server

V prvom rade je potrebné nainštalovať Socket.IO modul:

npm install --save socket.io

V druhom kroku upravíme index.js (nakoľko používam CoffeeScript, svoje riešenie uvádzam v CoffeeScripte). V úvode načítame knižnicu. Následne po vytvorení aplikácie previažeme Kraken so Socketmi, ako sme videli v Issue.

/index.coffee (index.js)

'use strict';

require 'coffee-script/register'

## Loading Socket.IO
## Making this global so it will be accessible from controller
global.io = new ( require 'socket.io' )

kraken = require 'kraken-js'
db = require './lib/database'
app = {}

...

if require.main == module

	kraken.create(app).listen (err, server)->

		console.error err.stack if err

		io.attach server    # Connecting to Krakenom

module.exports = app

Hotovo. Teda aspoň zdanlivo. Prichádza ťažšia časť – zistiť s kým komunikujeme. To prebieha nejako takto: Socket pošle svoje Cookies a s nimi aj session_id. Socket.IO overí, či sú platné a v prípad, že vyzerajú dobre, pozrie sa do už vytvorených sessions, či tam má session s daným ID. Session je relácia medzi užívateľom a serverom, ktorá si uchovávate informácie o užívateľovi (či je prihlásený, aké ma ID, alebo čo má v košíku). Zaniká zatvorením prehliadača, ale viete ju vypnúť (prípadne zmeniť) manuálne. PHP a Apache sa o to staralo samé na pozadí, s tým, že vždy bola dostupná premenná $_SESSION. V Krakenovi to nie je také jednoduché. Popravde získať aktuálne databázu aktuálnych sessions je aj pre mňa problém, preto som vytvoril tento Issue. Dokým dostanem nejakú rozumnú odpoveď od autorov, musíme použiť malý hack:

Update: Odpoveď som dostal, ale pre novšiu verziu Krakena, takže si myslím, že hack je stále na mieste:

/node_modules/kraken-js/lib/middleware/session.js

module.exports = function (settings) {
    var override, Store;

    override = util.tryRequire(settings && settings.module);
    if (override) {
        Store = override(express);
        settings.store = new Store(settings.config);

        global.sessionStore = settings.store; // This is our hack
    }

    return express.session(settings);
};

 Teraz keď už máme v globálnej premennej zoznam všetkých sessions, stačí znovu upraviť index.js a pridať nejaký middleware, ktorý sa o to postará:

/index.coffee (index.js)

app.configure = (nconf, next)->

    # Configure sockets

    io.use (socket, next)->

        return next("No cookie transmitted.", false) if ! socket.handshake.headers.cookie

        # Parse cookies and find our session_id

        session_id = require('express/node_modules/cookie').parse socket.handshake.headers.cookie
        session_id = require('express/node_modules/cookie-signature').unsign session_id['connect.sid'].substring(2), nconf.get("middleware").session.secret

        return next( 'Unknown cookie.', false ) if ! session_id

        # Find session_id in sessionStore

        global.sessionStore.load session_id, (err, session) ->

            next( 'Not valid session.', false ) if err or ! session

            ## Save session to socket, that way we can access user data later using socket.session
            socket.session = session

            next null, true

    next()

V poslednom rade, ešte musíme nastaviť secret. Secret je kód pomocou ktorého sa naše cookies “šifrujú”. A práve v 14 riadku sme to kontrolovali.
/config/middleware.json

{
    "middleware": {
        "session": {
            "module": "memory",
            "secret": "35cb2890c5560878c7199d88b92457776b7ecd9e" // Change this
        }
    }
}
// Source: https://github.com/lmarkus/Kraken_Example_Shopping_Cart/blob/master/config/middleware.json

Náš server je už pripravený, k dokonalosti nám ešte chýba nejaká tá samotná komunikácia:

'use strict';

module.exports = ( io )->

    io.on 'connection', ( socket )->		

        socket.emit 'hello'

        socket.on 'foo', ()->
            return 'foobar'

Klient

To najťažšie je už za nami, teraz si zlížeme smotanu vytvorím klienta. V prvom rade stiahnite socket.io pre klienta alebo použite cdn:

<script type="text/javascript" src="https://cdn.socket.io/socket.io-1.0.2.js"></script>

Teraz už len stačí vytvoriť napísať pár riadkov:

socket = io 'http://localhost:1339' # Change your port to match your server!

socket.on 'connect', ()->

    console.log 'Websockets established and running!'

socket.on 'hello', ()->

    console.log 'Hello sir!'

Hotovo

Pokiaľ ste všetko spravili správne, mali by ste po pripojení na server vidieť v konzole ‘Hello sir!’. Tento návod rieši problematiku prepojenia Socket.IO a Kraken.js, overenie platnosti cookies a načítanie session. Priestor na zlepšenie vidím ešte v tom, aby sa Sockety mapovali na Routing v Krakenovi. Čiže, aby sa dali zo socketu rovno volať controllery. Keď niekto budete mať hotové toto riešenie, určite sa oň podeľte. Tak isto všetky námety, ako zlepšiť kvalitu tohto riešenia rád uvítam v diskusií. Dúfam, že som nejednému z vás uľahčil život a možno aj vyjasnil, ako niektoré moduly fungujú.

Express.js

Express je snáď základný pilier celého vývoja webu v Node. Je to minimalistický framework a myslím, že nebudem preháňať ak poviem, že najpoužívanejší. Rozhodne odporúčam prečítať základy, porozumieť, ako funguje, pretože na ňom stavajú ďalšie frameworky. A práve tie ďalšie frameworky sú zaujímavé.

Sails.js

Sails.js vychádza z Expressu a bol to môj výber číslo jedna. Bol som z neho nadšený, pretože mal ORM, mal štruktúru priečinkov, tým, že od základu podporoval CRUD som vedel veľmi rýchlo vytvárať nové modely/controllery a naplniť ich dátami a v neposlednom rade sa mi páčila práca so socketami. Časom som však narážal na problém nedostatočnej alebo neexistujúcej dokumentácie. Sails využíva vlastné ORM – Waterline, ale nevedel som nikde nájsť ako do neho vložiť podobjekty, takže som ho musel prestať využívať a moje dáta teda pri ukladaní neboli validované. Ďalej som narazil na problém so socketmi – hoc sú v Sails zapracované vynikajúco, kým sa ich naučíte používať bude to stáť veľa snaženia a skúšania, hľadania a čítania. Mojím ďalším problémom bolo debugovanie. Vypisovať si všetko do konzoly, nepatrí medzi tie najlepšie spôsoby debugovania, ale dá sa to zvládnuť, dokým nepotrebujete analyzovať väčšie výpisy – veľké štruktúry. Keď sa to stane, opýtate sa – nejde to lepšie? Samozrejme, že ide! Ale nie so Sails. Hovorím konkrétne o riešení node-inspector, ktoré som ani napriek zisťovaniu čísel portov nemohol spojazdniť. Takže problémy sa nahromadili a ja som si povedal, že kým Sails sa mi páči, potrebuje nejaký čas, aby sa dopísala dokumentácia a vyriešili problémy. Dovtedy využijem iný framework.

Kraken.js

Prešiel som na Kraken. Kraken vytvoril tím, pracujúci v PayPal (alebo eBay). Povedal som si, že títo páni potrebujú stabilné, bezpečné a rýchle prostredie pre tvorenie aplikácií, rovnako ako ja, a majú prostriedky na jeho vytvorenie, tak prečo to nevyužiť? V prvom rade Kraken sa miestami nazýva frameworkom ale miestami prizná farbu – že on vlastne tak úplne framework nie je, je to trošku vylepšený Express. Kraken sa mi tiež zapáčil. Vyriešil problémy, ktoré som mal so Sails. Mongoose aj napriek tomu, že ocenenie za najlepšiu dokumentáciu nezíska, je dostatočne intuitívny. Moje dáta konečne boli 100% validované. Tak isto som (aspoň pocitovo) získal väčší priestor pre testovanie (rozumej unit testy, automatizované testy). Mal som spočiatku problém, ako otestovať jednotlivé modely, ale netrvalo dlho a vyriešil som ho (návod hodím najbližšie). Nakoniec, a čo ma veľmi potešilo bola možnosť konečne využiť node-inspector, takže konečne som mohol začať dobre debugovať. Po čase som však začal narážať aj na tienisté stránky. Kraken je dosť nízko položený, chcem tým povedať, že poskytuje základ, a keď chcete niečo naviac, tak si to musíte dorobiť sami. Sails podporoval písanie zdrojakov v CoffeeScripte. Kraken nie. Sails aj napriek biednej dokumentácií mal vynikajúcu podporu pre Socket.IO. Kraken nie, popravde, nenájdete o tom veľa návodov – ak vôbec nejaký a rozbehať to je naozaj problém. Všetky tieto veci minimálne spomaľujú vývoj, ale je to cena, ktorú treba zaplatiť za používanie Krakenu. Zatiaľ pri ňom ostávam a v ďalších blogoch sa budem venovať riešeniu týchto problémov.

Zhrnutie

V tomto krátkom blogposte, som sa zameral na Sails.js a Kraken.js. Bolo by nefér rozoberať iné frameworky – nemám s nimi skúsenosti, stručne som si nimi prešiel, keď som hľadal ideálny.

Zoznam väčšiny Node.js frameworkov: http://nodeframework.com/

Express.js: http://expressjs.com/
Sails.js: http://sailsjs.org/
Kraken.js: http://krakenjs.com/

S Node.js som predtým nepracoval. Áno, je to JavaScript, s ktorým pracujem už roky, ale aj napriek tomu, sú tu isté odlišnosti. Akým smerom budem ďalej blogovať? V prvom rade by som chcel hovoriť o svojej hre, ako postupuje vývoj, ale na druhej strane Node.js je nová technológia, každý týždeň prekonám nejaký problém, ktorý môže trápiť iných vývojárov a rád by som hovoril aj o tejto – technickej stránke projektu. To je zatiaľ všetko, v najbližšom čase budú vychádzať nové blogy, dúfam, že to bude zaujímavé čítanie.

Začíname znovu

Nuž po krátkej depresívnej chvíľke som si opäť spomenul na hru zo strednej školy. Vtedy som ju nevedel vytvoriť, ale dnes už áno. A keď som do nej domiešal nápady zo zrušeného projektu, dostal som obraz skvelej hry! Nie len skvelej, ale tak úžasnej, že možno zmení celý priemysel (treba trošku preháňať :)). Je to hra, ktorú ťažko popísať slovami: “Je to ako … ale inak”. A tak som opäť zašiel za kamarátmi a predstavil im novú hru (veľmi si týchto ľudí vážim a som im vďačný, že počúvajú všetky moje nápady). A tento nápad sa páčil každému. Začalo nové kolo plánovania – aké technológie, aké herné mechanizmy, aké funkcie, ako vyťažiť z nápadu čo najviac, čo sa bude robiť prvé, ako znížiť riziko neúspechu, ako to predávať. Proste veľa veľa premýšľania. Až som si povedal dosť – treba začať.

Done is better than perfect – alebo nie?

Keď vytvárate nejaký nový projekt, mali by ste sa týmto mottom riadiť. To, čo potrebujete, je čo najskôr uviesť produkt na trh. Nemusí byť dokonalý. Čím dlhšie ho totiž vyvíjate, tým je drahší, a čím neskôr ho uvediete na trh, tým väčšia to bude škoda, ak neuspeje. Okrem toho, keď sa snažíte o perfekcionizmus a necháte svoju bujnú fantáziu premýšľať o všetkých cool featurach, dostanete sa do večného kruhu, kde vkuse prerábate svoju prácu a nikdy nič na trh neuvediete, lebo to ešte nie je hotové/dokonalé. Nespočetne veľa projektov pohorelo práve na tom, že toľko nových a zbytočných funkcií implementovali, že sa nakoniec na míle vzdialili od pôvodného plánu a po niekoľkých rokoch vývoja vlastne nič nemali.

Oveľa lepší prístup je najskôr si celý nápad premyslieť, potom si napísať, čo sa bude kedy implementovať a držať sa toho. A že to nie je dokonalé? Nevadí! Keď to vypustíte na trh, a ukáže sa, že o váš produkt je záujem, dostane finančné prostriedky, ktoré vám umožnia ho vyšperkovať. Cieľom je, čo najskôr vypustiť verziu, ktorá sa môže predávať (aby ste vedeli, či o produkt vôbec je záujem).

Na druhej strane, čím neskôr sa na chybu príde, tým viac stojí jej oprava. A hoc je motto Done is better than perfect super, keby som sa ho slepo držal stálo by ma to veľa peňazí, takže som musel na chvíľu zvoliť iné start-up motto.

Adapt or die

Čas. Keď robíte hru snažíte sa ju urobiť rýchlu – nikto predsa nemá rád hry, ktoré sekajú, chcete hrať, nie čakať. A síce v trošku inej podobe, ale aj som tomuto problému čelil. Ako informovať hráča o zmene? Nakoľko posielanie správ by som outsourcoval, za každú správu by som platil. Príliš časté posielanie by spôsobovalo obrovskú záťaž na server a generovalo by veľa správ. Príliš pomalé posielanie by mohlo miestami spôsobovať hráčove nepohodlie. Treba optimalizovať. Prvé plány hovorili, že odkedy sa niečo stane (alebo malo by sa stať) až dokým sa to hráč dozvie prejdú max. 4 sekundy. Stačilo hráča informovať, že vec sa vykoná o nejaký čas + 4 sekundy, a nič by si nevšimol. Ale, prečo to nerobiť rýchlejšie? Uvedomil som si, že aj napriek tomu, že staviam na technológiách, ktoré používam roky, s optimalizovaním pre veľkú záťaž vážne nemám skúsenosti. Takže som začal hľadať spôsoby, ako čas skrátiť a podarilo sa mi ho skrátiť na 2 sekundy. Samozrejme vedel by som ho ešte skrátiť, ale 2 sek, by mali byť stabilné (nebola by to enormná záťaž na server). A tiež som vymyslel spôsob ako poslať o nekonečne mnoho správ menej, ale prinášalo to bezpečnostné otázky. Stále to nestačilo. Ak je možnosť ako to posielať rýchlejšie a efektívnejšie, chcem to vedieť už teraz. A keďže som ešte stále na vysokej škole, prečo to nevyužiť? Zhodou okolností mám v tomto semestri príbuzný predmet, takže som sa šiel spýtať o nejaké cenné rady. Nuž dostal som viac, než som čakal. Po týždni tvorenia základných pilierov hry, som si po troch vetách cvičiaceho uvedomil, že asi nepoužívam ideálnu technológiu. Ale to je predsa technológia, ktorú dobre poznám a dlho používam! Adapt or die.

Začíname znovu

Po veľmi rýchlom zoznamovaní sa s novou technológiou, som zistil, že by bolo lepšie ešte zmeniť aj všetky ostatné doteraz používané technológie. Neostal kameň na kameni a celú svoju doterajšiu prácu som mohol rovno zahodiť. Teraz je týždeň druhý od momentu, čo som začal hru vyvíjať. Staviam ju na technológií, ktorú poznám 4 dni. Možno to znie divne, ale boli to dni strávené čítaním dokumentácií, pozeraním online seminárov a nakoniec tá technológia nevyšla úplne z holej lúky. Je to niečo, čo s radosťou využívam už dlho, akurát na mieste, kde som to ešte nepoužil. A aké to má výhody? V prvom rade a predovšetkým sa mi podarilo skrátiť čas na niekoľko desiatok milisekúnd. Spolu s tým prestala potreba outsourcovať posielanie správ a teda som ušetril hneď niekoľko tisíc dolárov (teda z pohľadu na budúcnosť samozrejme). Rovnako nová technológia by mala byť aj menej náročná na výpočtový výkon, takže som ušetril aj na serveroch. Samé plusy

Končí druhý týždeň, opäť programujem základné mechanizmy a aj napriek tomu, že škola si vyžaduje veľa času veľmi sa teším na ďalší vývoj.

Update – 18.1.2014

Nie dlho potom, čo som tento článok publikoval som narazil na dva oveľa elegantnejšie spôsoby.

1. Prepos App – vynikajúca malá aplikácia, ktorá kompiluje ako LESS, tak aj Coffeescript a hromadu ďalších. Vynikajúca voľba.
2. Skrz node.js – pracnejšia verzia, kde najskôr potrebujete nainštalovať node.js a cez NPM nainštalovať LESS plugin. V ďalšom kroku odporúčam nainštalovať si rozšírenie rovno do editora. Viac informácií nájdete priamo na stránkach LESS.

1. Aplikácie

Prvým riešením je použiť nejakú aplikáciu, ktorá to spraví za nás. Na internete som narazil na dve, veľmi zaujímavé aplikácie.

CodeKit - Je to aplikácia určená pre Mac OS X, vyzerá celkom slušne a ľudia si ju pochvaľujú
SimpLESS – Druhá aplikácia je per všetky platformy a má  roztomilý interface

Osobne som skúšal SimpLESS. Prostredie sa mi páčilo, bolo to celkom jednoduché ale mal som problém sparsovať Bootstrap. Vždy mi to hádzalo nejaké chyby, hoc v prehliadači mi to pekne fungovalo.

2. Webové stránky

Počas môjho Googlenia som narazil na stránku Lessify, ktorá pomocou PHP skompiluje  LESS. Bohužiaľ ani v tomto prípade som sa nedočkal žiadaného výsledku. Tu by mohla znieť rada, aby ste si sami prebehli Google, ale podľa mňa je to úplne zbytočné, existuje jedna úžasné ľahká cesta.

3. Google Chrome

Google Chrome v tomto prípade poskytuje jednu nehorázne dobrú featurku. Pointa je totiž v tom, že prehliadač predsa niekde musí mať uložený skompilovanú verziu súboru. A to miesto je Local Storage. Takže ako nato?

1. Otvorte si svoju stránku s LESS
2. Kliknite na ňu pravým tlačítkom myši a zvoľte “Preskúmať prvok”
3. Prepnite sa do druhej karty – “Resources”
4. Z ponuky napravo rozbaľte “Local Storage” (ja tam mám ešte položku Localhost)
5. Vidíte páry – Key – Value, nájdite ten svoj, a skopírujte pole Value do nového súboru
6. Skontrolujte si linky na obrázky (pozadí), na fonty a podobne
7. Uložte súbor

Je to jednoduchá procedúra, nevyžaduje žiadne špeciálne programy a máte istotu, že to čo vidíte, aj dostanete.

Záver

Trošku kratší príspevok, ale verím, že nápomocný.

Ako to funguje?

Animácie v JavaScripte robím pomocou frameworku jQuery. Je to veľmi jednoduché. Najskôr vyberiete prvok, ktorý chcete animovať, potom poviete čo sa má animovať a nakoniec ako dlho to potrvá. Ukážme si príklad kde budem animovať výšku:

<style> #mydiv { height: 50px; width: 50px; border: 1px solid blue; } </style>
<div id="mydiv"></div>
<script> $("#mydiv").animate({height:"400px"}, 500); </script>

Nakoniec ešte môžeme pridať ‘easing’ a teda spôsob prelínania. V základe sú len dva easingy a pre viac je potrebné používať plugin. Teraz skúsim vysvetliť princíp CSS3 animácie. Animácia nastáva pri zmene vlastnosti. Zmena vlastnosti môže nastať buď prejdením myšou ponad objekt, JavaScriptom alebo nejakým iným eventom. Bolo by zaujímavé zisťovať, čo všetko sa dá spraviť. Ukážme si nejaký príklad:

<style>
 #mydiv
 {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    height: 50px;
    width: 50px;
    border: 1px solid blue;
 }

 #mydiv:hover
 {
    height: 100px;
 }
</style>
<div id="mydiv"></div>

Trošku dlhší zápis, avšak výsledok je perfektný. Keď prejdeme myšou ponad objekt spustí sa animácia, pri ktorej sa nám zanimuje výšku. Čo sme ale vlastne napísali? Prvý parameter je vlasnosť, ktorá sa animuje, v predĺženom zápise to je -webkit-transition-property. Ja som dal all a teda všetky vlastnosti, ale mohol som napísať len height. Takto môžete vytvárať rôzne animácie rôznych vlastností (urobíte sekundovú animáciu pre výšku, dvojsekundovú pre šírku).  Pre zápis viacerých vlastností používajte čiarku.

Druhý parameter je dĺžka animácie. Udáva sa v sekundách, záporné hodnoty sú neplatné a defaultná hodnota je 0. Predĺžený zápis je -webkit-transition-duration. Teraz prichádza finta:

-webkit-transition-property: height, width;
-webkit-transition-duration: 0.5s, 2s;

Tento zápis spôsobí, že výška sa bude animovať pol sekundy a šírka 2 sekundy. Posledný parameter je spôsob animácie. Možnosti sú nasledovné:

• linear – rovnomerný pohyb
• ease-in – má zrýchlenie na začiatku
• ease-out – má spomalenie na konci
• ease-in-out – má zrýchlenie na začiatku a spomalenie na konci
• cubic-bezier –  je opísanie pohybu pomocou beziérovej krivky. Odporúčam využívať http://cubic-bezier.com

Výhody CSS

Za jednu z najväčších výhod CSS animácie je, že môžete animovať prakticky čokoľvek veľmi jednoducho. To neplatí pri JS animácií. jQuery v základe nedokáže animovať farby. To isté platí aj o tieňoch (a môžete naraziť aj na iné vlastnosti). Takže napísanie animácie mocou CSS je oveľa jednoduchšie. Druhá výhoda je, že si môžete nastaviť svoj vlastný easing. Určite sa to bude dať urobiť v jQuery, ale ešte som sa v tom veľmi nehrabal. Určite to však nebude také jednoduché ako v CSS. Poslednou výhodou je kratší zápis.

Príklad

Nakoniec by som chcel ukázať jeden príklad. Podľa mňa je to vynikajúci nápad a vlastne kvôli nemu som sa začal CSS animáciami venovať. Vytváram knižnicu na uploadovanie obrázkov. Ako však dať užívateľovi vedieť, že sa obrázok načítava a pritom nerobiť to štandardným koliečkom? Napadlo ma animovať oranžový “tieň”. Naprogramoval som JS riešenie, avšak musím používať externé knižnice na farby (skúšal som aj meniť farbu tieňa) a knižnicu na animovanie tieňa. Tu je ukázaný princíp, je to dosť zjednodušené. Využívam 4 kroky, ale v praxi sa mi viac páči riešenie s 8 krokmi a menším tieňom. Chcem však ukázať na kontrast medzi CSS a JS riešením, preto aj tento príklad využite viac na inšpiráciu než na hotové riešenie.

<style type="text/css">

div
{
width: 100px;
height: 100px;
}

</style>

<div></div>

<button id="btn-1"> Start </button>
<button id="btn-2"> Stop </button>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><!-- jQUery -->
<script type="text/javascript" src="http://www.bitstorm.org/jquery/shadow-animation/jquery.animate-shadow-min.js"></script><!-- Animovanie tieňa: box-shadow -->
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script><!-- Easing funkcie -->

<script type="text/javascript">

    var interval;
    var time = 1000;
    var i = 1;

    $('#btn-1').click( function()
    {
        interval = setInterval( 'animateShadow()', time );
    });

    $('#btn-2').click( function()
    {
        clearInterval( interval );
        $('div').animate( { boxShadow: 'none' }, time*3, 'easeInOutExpo' );
    });

    function animateShadow()
    {
        switch ( i )
         {
            case 1:
                 shadow = '0px -10px 15px';
                 break;
            case 2:
                 shadow = '10px 0 15px';
                 break;
            case 3:
                shadow = '0 10px 15px';
                break;
            case 4:
                shadow = '-10px 0 15px';
                i = 0;
                break;
        }

        shadow += ' #ffa500';
        $('div').animate( { boxShadow: shadow}, time );

        i++;
     }

</script>

Zhruba to isté v CSS verzií vyzerá takto:

<style type="text/css">

@-webkit-keyframes slider {
    0% { box-shadow: 0 -10px 15px orange; }
    25% { box-shadow: 10px 0 15px orange; }
    50% { box-shadow: 0px 10px 15px orange; }
    75% { box-shadow: -10px 0 15px orange; }
    100% { box-shadow: 0 -10px 15px orange; }
 }

div
 {
    width : 100px;
    height : 100px;
    margin-left: 100px;
    float: left;
    border: 1px solid green;
 }

.anim
 {
    -webkit-animation: slider 5s infinite normal cubic-bezier(.3,.56,.46,.71);
 }

</style>

<div id="id-1"></div>

<button id="btn-1">Start</button>
<button id="btn-2">Stop</button>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $("#btn-1").click( function(){ $("#id-1").addClass('anim'); } );
    $("#btn-2").click( function(){ $("#id-1").removeClass('anim'); } );
</script>

Môžete si všimnúť ešte aj -webkit-keyframes a animácie. Ak by som chcel podporu Mozilly musel by som napísať @-moz-keyframes, pre Operu by to bolo -o- a pre IE -ms-.

Viac informácií

Ak vás táto téma zaujala viac informácií nájdete na:

• http://www.webkit.org/blog/138/css-animation/
• http://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/
• http://css3.bradshawenterprises.com/

Záver

Animovanie pomocou CSS3 je podľa mňa veľmi zaujímavá možnosť. Nepodporuje to iba IE (i keď od 10 by mal), ale predstavuje jednoduchší, prehľadnejší a krajší zápis. Pekné na tom je, že animujeme priamo v jazyku v ktorom design vytvárame. Dúfam, že som vám týmto článkom spravil chuť a teším sa opäť o “týždeň” (veľmi mi to nevychádza, keďže maturujem).