Kokeiltuani ensin Meteoria minusta on tullut Derby.js:n suuri ystävä. Kyseessä on siis JavaScript-framework, jolla voi pienellä vaivalla koodata reaaliaikaisesti toimivia HTML5-sovelluksia. Derby-sovellus osaa käsitellä yhteistä dataa ja lähdekoodia sekä palvelimen että selaimen puolella hyvin läpinäkyvästi.

Tässä kuitenkin muutama jippo, joilla voi helposti ampua itseään jalkaan Derbyllä koodatessa, ellei ole tarkkana.

Derbyn toimintaperiaate

Derbyn perusidea on, että ensimmäisellä sivulatauksella palvelimen puolella oleva JavaScript-sovellus generoi HTML-sivun perinteiseen tapaan. Sen jälkeen käyttäjän klikkaillessa linkkejä muita sivuja ei enää haetakaan palvelimelta, vaan ne generoidaan selaimen puolella käyttäen samaa JavaScript-koodia ja sivupohjia kuin palvelimellakin.

Tämän lisäksi Derby synkronoi MongoDB-tietokantaan tallennetut tietomallit automaattisesti selaimen ja palvelimen välillä. Tietokantaan tehdyt muutokset päivittyvät heti näkyviin sivulle ilman koko sivun lataamista uudelleen. Samaten kaikkien CSS- ja JavaScript-tiedostojen muokkaaminen päivittyy reaaliajassa selaimeen heti kun uudet versiot tallennetaan palvelimelle.

Sivupohjien {{muuttujat}} ja {sidokset}

Ensimmäinen Derbystä kantapään kautta oppimani asia oli, että HTML-sivupohjissa {{nimi}} tarkoittaa eri asiaa kuin {nimi}. Tiivistettynä kyse on siitä, että {{nimi}} laajentuu vain kertaalleen kyseisen muuttujan sisällöksi. Sen sijaan {nimi} taas luo dynaamisen sidoksen, joka päivittää kyseisen muuttujan "lennossa" sivupohjaan aina sen arvon muuttuessa.

Nyrkkisääntö on, että tietomalleja käsitellessä käytetään aina {sidoksia}. Tällöin tietomallin muuttaminen päivittää uuden arvon automaattisesti sivupohjaan. Jos sivua renderöidessä taas käytetään staattisia parametrejä, jotka eivät ole tietomallin osana, sivupohjassa käytetään {{muuttujia}} niiden osalta.

Derby ei yleensä valita mitään vaikka {{muuttujat}} ja {sidokset} sekoittaisi keskenään, joten niiden kanssa on syytä olla tarkkana. Virheen huomaa lähinnä siitä, että sivun sisältö ei päivity vaikka sen pitäisi.

Piste {.sidoksen} alussa

Toinen hämäävä ominaisuus Derbyssä liittyy tietomallien luuppaamisen {#each}-rakenteella. Joku Handlebars-sivupohjiin tottunut (kuten minä) saattaisi tehdä tällaisen rakenteen:

<ul>
    {#each articles}
        <li>{title}</li>
    {/each}
</ul>

Ylläoleva rakenne kyllä luuppaisi läpi kaikki artikkelit otsikoineen, mutta yksittäisen artikkelin otsikon muokkaaminen ei päivittyisikään listaan reaaliajassa. Derby nimittäin vaatii käyttämään pistettä sidoksen alussa, kun kyse on suhteellisesta nimipolusta:

<ul>
    {#each articles}
        <li>{.title}</li>
    {/each}
</ul>

Tämä kesti aika pitkään huomata ja ehdin kehitellä omissa projekteissani jo erilaisia workaroundejakin siihen, ettei sisältö tahtonut päivittyä. Oikein koodattuna sivupohja kuitenkin toimii ja jokainen muutos päivittyy siihen saman tien.