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/

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).

CSS Sprites

Na tento týždeň som si pripravil jednoduchý zlepšovák pri používaní Sprites napísaný v LESS. Podstatou CSS Sprites je, že miesto ukladania obrázkov jednotlivo, ich nasukáte do jedného veľkého súboru. Kratšie sa to vysvetliť hádam ani nedá. Pre úplne pochopenie by bolo asi najlepšie vidieť nejaký hotový sprite, takže tu je. Môžete si pomyslieť, že to je somarina, alebo dokonca, že to nie je efektívne, ale opak je pravdou. Poďme si vysvetliť výhody:

1. Oveľa menej HTTP requestov – až pri parsovaní HTML prehliadačom sa začnú sťahovať jednotlivé obrázky. Vaša stránka sa so Spritami načíta rýchlejšie
2. Menšia veľkosť. 20 png obrázkov má totiž dohromady väčšiu veľkosť, než jeden veľký obrázok
3. Prístupnosť. Obrázky sa totižto načítajú až keď sú potrebné. Toto je dedičstvo od dôb z pomalým internetom. Pre nás to však znamená, že ak chcete v menu po prechode myšou zmeniť obrázok pozadia, musíte počkať, kým sa načíta (začne sa načítávať až potom že naň nadídete myšou). Dá sa to riešiť aj inak, ale Sprites sú nato priam ideálne

Sprites majú však aj jednu veľkú nevýhodu. Ak chcete pridať novú ikonu, musíte ju vložiť do súboru. Je len na vás, či zvolíte postup postupného pridávania, alebo na konci projektu zabalíte všetky ikony do Spritu.

Keď ste už správne navnadený na používanie škriatkov (takýto preklad mi dal translator) môžem vám ukázať ako sa používajú. Je to strašne jednoduché. Používa sa totižto atribút background-position. Povedzme, že by sme chceli zobraziť prvú ikonu:

.icon
{
background: url('sprite.png') 0 0 no-repeat;
width: 16px;
height: 16px;
}

No nie je to jednoduché? Dobre skúsme si dať ikonu č.2:

.icon
{
background: url('sprite.png') -16px 0 no-repeat;
width: 16px;
height: 16px;
}

Takýmto spôsobom sa môžeme dostať k ľubovoľnej ikone. Poďme ďalej – predstavme si LESS.

LESS

Less je parádne rozširuje možnosti CSS. Nájdete ho na stránke projektu http://lesscss.org a v súčastnosti vyžaduje len pridanie JavaScriptovej knižnice (predtým bolo potrebný inštalovať knižnice na server). Prečo je ale LESS zaujímavé?

1. Dokážete vytvárať premenné. Túto schopnosť oceníte nielen vtedy, keď používate na viacerých miestach rovnaké farby/veľkosti
2. Umožňuje vytvárať jednoduché funkcie. Túto schopnosť veľmi často oceníte, hlavne keď píšete moderné CSS3 zápisy. Nižšie bude ukážka.
3. Vytvárate stromové zápisy s dedičnosťou. Priam kľúčový element, ktorý vám umožní vytvárať vzhľad naozaj efektívne.

Viac informácií, spôsob inštalácie a použitie nájdete na stránkach projektu (link pod nadpisom). Poďme horeuvedené spojiť dokopy a pozrime sa nato, ako môžeme vykresľovať Sprites efektívnejšie.

Showtime

Cieľom tohtotýždňového “scriptu” je uľahčiť si vyrátavanie pozície. Chceme CSSku jednoducho povedať: “Daj mi z piateho radu tretiu ikonu.” Začnime tým, že si vytvoríme premenné, kde si uložíme veľkosť našich budúcich ikon. Tieto veľkosti závisia od konkrétneho Spritu. Glaphyicons (obrázok) používajú rozmer 24x24px.

@sprite_w : 24px;
@sprite_h : @sprite_w; /* výška je rovnaká ako šírka */

Teraz poďme na samotnú funkciu. Rozmer vyrátame v podstate jednoducho. Ak chceme, 1. ikonu, tak jej pozícia (background-position) je 0. Ak chceme, aby sa zobrazila druhá, potrebujeme aby sa obrázok posunul o 24px doľava a následne si z neho zobrazíme štvorec 24×24. Ak chceme 3 ikonu, tak výpočet je v podstate jednoduchý – 24 * 2 (šírka ikonu * počet ikon stojacich pre ňou) odrátame od nuly (aby sme dostali záporné číslo a teda posun vľavo). Výsledná funkcia teda bude vyzerať nasledovne:

.sprite( @image, @y, @x )
{
background: url( '@{image}' ) ( 0 - ( @x - 1) * @sprite_w ) ( 0 - ( @y - 1 ) * @sprite_h ) no-repeat;
width: @sprite_w;
height: @sprite_h;
}

Už nám stačí len porozumieť ako sa to používa, tak poďme nato:

.icon1
{
.sprite('glyphicons-halflings.png', 1, 1); /* z prvého radu prvá ikona */
}

.icon2
{
.sprite('glyphicons-halflings.png', 2, 5); /* z druhého radu piata ikona */
}

Je to parádne, že? Teším sa na vás opäť o týždeň.

Viac informácií:
LESS – http://lesscss.org/
CSS Sprites – http://css-tricks.com/css-sprites/ , http://www.w3schools.com/css/css_image_sprites.asp

(PS: Svoje feedbacky, námety a tipy môžete hádzať do komentárov)

Nie je to za napísaný text

Programovanie vo väčšine prípadov znamená zapisovať príkazy pre počítač, ktoré sa v určitej postupnosti vykonajú. A príkazov je mnoho. Hlavne, ak s tým začínate, máte dojem, že ich je príšerne veľa. Mohli by ste nadobudnúť názor, že programovať môže hocikto, kto sa naučí príkazy, no mýlite sa. Programovanie je podľa mňa spôsob myslenia. Inými slovami, dobrý programátor sa od zlého odlišuje okrem iného aj tým, akým spôsobom ku kódu pristupuje. Ak chcete aby počítač niečo vykonal, musíte mu zadať správne príkazy, v správnej postupnosti a nato musíte myslieť ako počítač. Aby som bol porozumený správne, tak sa pokúsim uviesť príklad z reálnejšieho sveta. Ak chcete, aby vás pes poslúchol, musíte rozmýšľať ako pes a teda, musíte si celú činnosť, rozsekať na drobné etapy, ktoré už pes pozná nato, aby vo výsledku vykonal činnosť, ktoré je pre neho nová. Predstavme si, že chcete aby vám z chladničky doniesol mlieko (ak si myslíte, že to je na psa veľa, tak si predstavte, že to požadujete od robota). Pes však nevie ako vám má priniesť mlieko z chladničky, avšak pozná dielčie postupy. Musíte na chvíľu rozmýšľať ako pes aby ste mu vedeli dať príkazy – choď rovno, otvor dvere, vyskoč, zober, prines, choď rovno, zatvor dvere, k nohe. To isté platí aj o programátoroch. Viete, aký má byť výsledok a musíte vymyslieť ako sa k nemu dostať. Príkazy sú len kamene na ceste.

Tak sa dostávame k druhému bodu – efektívnosti. Z bodu A do bodu B môžete urobiť rôzne veľa ciest. Ale od použitých príkazov závisí, či bude cesta z malých kamienkov, alebo dlažbový chodník. Čím viac riadkov napíšete, tým ťažšie sa v nich orientuje. Tým ťažšie je nájsť chybu a tým dlhšie trvá jej opravenie. Umenie programátorov, je nájsť čo možno najefektívnejšie, najjednoduchšie riešenie problému. A to je to začo platíte.

Programovanie je tvorivá činnosť, nie mechanická

Podľa rôznych návodov a ideí by sme mohli povedať, že programátori sú ľudia, ktorý len mechanicky pridávajú znaky do programu. Sú tieto návody zlé? Nie tak celkom. Písať kód neoddeliteľne ku programovaniu patrí, ale nato, aby ste ho napísali, musíte najskôr vymyslieť ako bude fungovať. Musíte prekonať množstvo prekážok, aby ste na konci len sadli a napísali program. Programátori sú zvyčajne na seba hrdí, keď vyriešia nejaký komplikovaný problém. Keď dokážu niečo, čo pred nimi nikto iní nespravil, prípadne to spravia lepšie. A to ma vedie v podstate ku hlavnej myšlienke celého dnešného príspevku.

Väčšina hodnoty je neviditeľná

To, čo vidíte vy je 50 riadkov kódu. Aké nehorázne! Za 50 riadkov kódu si pýtať 100 eur! Problém je, že nevidíte, čo tým 50 riadkom kódu predchádzalo. Iný programátor by to napísal na 250-500 riadkov – boli by ste spokojnejší? Za tými 50 riadkami kódu, ktoré napísať trvalo možno 5 min, sú hodiny rozmýšľania, skúšania a prepisovania, preto aby na konci bolo len 50 riadkov kódu.

Raz som sa ocitol v podobnej situácií. Môj spolužiak sa doma vymkol. Nanešťastie ani jeho otec si ráno nezobral kľúče, takže ma zavolal, či mu nepomôžem dostať sa o bytu. Skončilo to tak, že sme volali zámočníka. Zámočník prišiel do pár minút, a za 30 sekúnd otvoril byt, začo si popýtal 100 korún (dnes už 3.3 eura, vtedy dosť veľa). Otec môjho spolužiaka mu sa vyhovoril, že viac pri sebe nemá a dal mu iba 50 a potom sa čudoval, že ako môže niekto za 30 sekúnd práce pýtať až sto korún, zatiaľ, čo iný musia pracovať niekoľko hodín aby zarobili rovnaký obnos. Moja otázka znela: Boli by ste spokojnejší, keby vám dvere otváral niekoľko hodín? Nemyslíte si, že je priam super, že vám ich otvoril len za 30 sekúnd?

Záver

Niektorí považujú zdrojové kódy za umelecké diela. Neviem, či tomu prikladám až takú váhu, ale rozhodne to je tvorivá činnosť. Je to činnosť, ktorá sa rok od roka mení. A keď príde na finančnú odmenu, nesmieme zabudnúť na tú najvýznamnejšiu časť, hoc ju nie je vidieť. To je dôvod, prečo sú programátor “takí drahí” (to isté platí aj o designéroch).

Obrázok z: http://mindmillion.com/MONEY/euro-notes-euro-coins.htm