AngularJS ja datakytkentä


2014-05-26, 08:21 Kirjoittanut Panu Horsmalahti

Valtaosa Webistä on siirtymässä yksinkertaisten staattisten dokumenttien tarjoamisesta monimutkaisiin applikaatioihin. Avainsanoja ovat dynaamisuus, reaaliaikaisuus, yhden sivun applikaatiot ja responsiivisuus. Applikaatioiden pitää pystyä päivittämään ruudulla näkyvä data reaaliaikaisesti palvelimelle, josta muutoksen pitää välittömästi lähteä kaikille muille selaimille. HTTP REST rajapintojen lisäksi otetaan käyttöön jatkuvasti auki olevia WebSocket-yhteyksiin.

JQuery ratkaisi aikoinaan eri selainten välisiä rajapintaeroja, ja teki JavaScriptin käytöstä tehokasta. Se ei kuitenkaan tarjoa työkaluja mallin ja näkymän synkronointiin. Tätä synkronointia kutsutaan datakytkennäksi (data binding). Datakytkentä on suhteellisen nuori ratkaisu, ja termistä on puhuttu webissä noin neljän vuoden ajan. Perusidea on yksinkertainen. Applikaation tila tulee pitää mallissa, josta jollain tapaa muodostetaan näkymä. Tietoa ei replikoida moneen paikkaan, ja mallin muuttaminen johtaa välittömästi näkymän muuttumiseen. Mallia pitää myös pystyä muuttamaan näkymästä käsin, esimerkiksi jos näkymässä on tekstikenttä.

Datakytkentään löytyy nykyään lukuisia frameworkeja, kevyistä datakytkentään erikoistuneista skripteistä valtaviin monoliitteihin. Näistä selvästi suosituin on Googlen AngularJS. AngularJS ei tarjoa pelkästään datakytkentää, vaan antaa applikaatiolle selkeän perusarkkitehtuurin. Tärkein käsite on skooppi, (scope), joka toimii mallina. AngularJS applikaatioissa eri komponentit luovat omat skooppinsa, jonne säilötään mallin data. AngularJS ohjelmat koostetaan lähinnä kontrollereista, direktiiveistä ja palveluista.

Kontrollereita käytetään skoopin tilan asettamiseen, ja eri komponenttien kytkemiseen toisiinsa. Direktiiveillä luodaan näkymä mallista. Palveluilla haetaan ja käsitellään dataa, ja joiden avulla uudelleen käytetään ja organisoidaan applikaation koodia.

Eri datakytkentäkirjastoissa yksi tärkeimpiä eroja on datakytkennän toteutus. Ongelma on siinä, että JavaScriptissä ei voi kuunnella muutoksia olioon. Tulevaisuudessa JavaScriptin ES7-standardi tulee tarjoamaan työkalut toteuttamaan datakytkentä tehokkaasti.

AngularJS on valinnut ratkaisuksi ns. "dirty checking" algoritmin. Framework käy läpi koko mallin, ja vertaa onko malliin tullut muutoksia. Tämän etuna on se, että datakytkentään ei tarvita erityistä syntaksia, ja AngularJS sopii hyvin yhteen muiden JavaScript-kirjastojen kanssa. Haittapuolena on tehokkuus. Kun mallissa alkaa olla yli kaksi tuhatta oliota, sivu alkaa hidastumaan. Lisäksi joissakin tapauksissa pitää erikseen aloittaa mallin käyminen läpi muutosten huomaamiseksi.

Ember.js on valinnut toisen ratkaisun, asettajien ja palauttajien käytön. Mallin oliot pitää luoda Emberin omilla rakentajilla, eikä Ember.js tue suoraan tavallisten JavaScript-olioiden datakytkentää. Tehokkuushyödyt ovat kuitenkin merkittävät, koska koko mallia ei tarvitse käydä läpi muutoksen huomaamiseksi. Tämä ratkaisu ei siis ole yleiskäyttöinen, eikä esimerkiksi olioon voi lisätä propertyä siten, että malli huomaisi sen ilman erityistä syntaksia.

Knockout.js käyttää myös samankaltaista "observable" ratkaisua. Erona on lähinnä se, että Knockout.js päivittää näkymän jokaisen muutoksen jälkeen, kun taas Ember.js päivittää näkymän kerran montaa muutosta kohti, joka on paljon tehokkaampaa.

Facebookin React on saanut paljon huomiota web-kehittäjien keskuudessa. Heidän ratkaisunsa tulee pelialgoritmeista. Sen sijaan, että yrittäisi sitoa näkymää ja mallia toisiinsa, React kääntää koko näkymän jatkuvasti uudelleen omaan yksityiseen DOM:iin. Jos tässä DOM:issa huomataan muutoksia, päivitetään selaimen oikea näkymä.

Mikä datakytkentä framework pitäisi sitten valita? Valinta riippuu tietenkin applikaation tarpeista, koska eri frameworkit toimivat erilaisissa käyttötarpeissa hyvin. Jos on rajoitetusti aikaa evaluointiin, kannattaa aloittaa AngularJS:stä ja Reactista. Kun datakytkennän ottaa alusta alkaen huomioon web-kehityksessä, saadaan palveluiden käytettävyys nostettua uudelle tasolle.

Linkkejä:


comments powered by Disqus