Ajax selainpohjaisten sovellusten laatimisessa. Nico Hiort af Ornäs

TEKNILLINEN KORKEAKOULU Tietotekniikan osasto Tietotekniikan tutkinto-ohjelma Ajax selainpohjaisten sovellusten laatimisessa Kandidaatintyö Nico Hiort af Ornäs Ohjelmistotekniikan laboratorio Espoo 2008

TEKNILLINEN KORKEAKOULU Tietotekniikan osasto Tietotekniikan tutkinto-ohjelma Tekijä: Nico Hiort af Ornäs Työn nimi: Ajax selainpohjaisten sovellusten laatimisessa KANDIDAATINTYÖN TIIVISTELMÄ Päiväys: 6. huhtikuuta 2008 Sivumäärä: 5 + 32 Pääaine: Ohjelmistotekniikka Koodi: T3001 Vastuuopettaja: Markus Koskela Työn ohjaaja: Esko Nuutila Selainpohjaiset sovellukset käyttävät hyväkseen Ajax-toimintamallia, joka koostuu useasta eri tekniikasta ja standardista. Tälläisiä tekniikoita ja standardeja ovat muun muassa HTML, CSS, JavaScript, DOM ja XMLHttpRequest. Näiden tarkoituksena on parantaa verkkosivujen asynkronista viestintää selaimen ja palvelimen välillä. Asynkroninen viestintä mahdollistaa keskustelun palvelimen kanssa taustalla, niin että tietty osa sivusta voidaan päivittää ilman että koko sivua tarvitsee ladata uudelleen. Yksi yleinen ongelma sovellusten kanssa, jotka käyttävät hyväkseen Ajaxtoimintamallia, on ollut se, että niiden kehittäminen on ollut hyvin vaikeaa. Useat selaimet toteuttavat Ajaxin käyttämiä tekniikoita eri tavoilla. Tämän takia on kehitetty useita eri Ajax-ohjelmistokehyksiä, jotka helpottavat kehittäjän työtä piilottamalla selaimien toteutuksien eroavaisuudet. Tässä työssä käsiteltiin Ajax-toimintamallia ja sen käyttämiä tekniikoita. Tämän jälkeen tutustuttiin kolmeen tunnettuun Ajaxohjelmistokehykseen, minkä jälkeen niitä vertailtiin keskenään. Työn tavoitteena oli tutkia, minkälaisiin selainpohjaisiin sovelluksiin mainitut Ajax-ohjelmistokehykset sopivat parhaiten. Vertailun jälkeen huomattiin, kuinka radikaalisesti Ajax-sovelluksien toteuttaminen tuli helpommaksi, kun apuna käytettiin Ajax-ohjelmistokehyksiä. Avainsanat: Ajax, Web 2.0, XMLHttpRequest, JavaScript-kirjasto Kieli: Suomi i

Alkulause Tämä kandidaatintyö on kirjoitettu lukuvuoden 2008 keväällä. Työ on laadittu Teknillisen korkeakoulun ohjelmistotekniikan laboratoriolle. Haluaisin erityisesti kiittää kandidaatintyöni ohjaajana toiminutta opett.tutk. Esko Nuutilaa, joka antoi hyödyllistä ja rakentavaa palautetta kandidaatintyöni kirjoituksen aikana. Espoossa 16. huhtikuuta 2008 Nico Hiort af Ornäs ii

Käytetyt lyhenteet AFL AJAX BSD CLA CSS DOM HTML HTTP MIT RIA W3C XHTML XML YUI Academic Free License Asynchronous JavaScript and XML Berkeley Software Distribution Contributor License Agreement Cascading Style Sheets Document Object Model Hypertext Markup Language Hypertext Transfer Protocol Massachusetts Institute of Technology Rich Internet Application World Wide Web Consortium extensible Hypertext Markup Language extensible Markup Language Yahoo! User Interface iii

Sisältö Alkulause Käytetyt lyhenteet 1 Johdanto 1 2 Ajax-toimintamalli 3 2.1 Taustaa................................ 3 2.2 Historia................................ 5 2.3 Rich Internet Applications...................... 6 2.4 Käytetyt tekniikat.......................... 7 2.4.1 XHTML ja CSS........................ 7 2.4.2 JavaScript........................... 8 2.4.3 XMLHttpRequest (XHR).................. 8 2.4.4 DOM.............................. 11 2.5 Tiedonsiirtoformaatit......................... 12 2.5.1 XML.............................. 12 2.5.2 JSON............................. 12 2.5.3 Muut.............................. 12 2.6 Haitat................................. 13 3 Ajax-ohjelmistokehykset 14 3.1 Taustaa................................ 14 3.2 Valintakriteerit............................ 15 iv ii iii

3.3 Vertailukriteerit............................ 16 3.4 Prototype............................... 17 3.4.1 Ajax-ominaisuudet...................... 18 3.4.2 Koodauskäytännöt...................... 18 3.4.3 Lisäosat............................ 19 3.4.4 Selaintuki........................... 19 3.4.5 Dokumentaatio........................ 20 3.4.6 Yhteisö............................ 20 3.5 The Dojo Toolkit........................... 20 3.5.1 Ajax-ominaisuudet...................... 21 3.5.2 Koodauskäytännöt...................... 21 3.5.3 Lisäosat............................ 22 3.5.4 Selaintuki........................... 22 3.5.5 Dokumentaatio........................ 23 3.5.6 Yhteisö............................ 23 3.6 The Yahoo! User Interface Library (YUI).............. 24 3.6.1 Ajax-ominaisuudet...................... 24 3.6.2 Koodauskäytännöt...................... 24 3.6.3 Lisäosat............................ 25 3.6.4 Selaintuki........................... 25 3.6.5 Dokumentaatio........................ 26 3.6.6 Yhteisö............................ 26 3.7 Ohjelmistokehyksien vertailu..................... 27 4 Yhteenveto 30 Kirjallisuutta 31 v

Luku 1 Johdanto Selainpohjaiset sovellukset ovat yleistyneet räjähdysmäisesti viimeisten kolmen vuoden aikana. Tämän buumin edelläkävijänä on ollut Google, joka on vuosien varrella kehittänyt useita selainpohjaisia sovelluksia. Näitten sovellusten joukkoon kuuluvat muun muassa Gmail (http://mail.google.com), Google Maps (http://maps.google.com) ja Google Docs (http://docs.google.com). Selainpohjaiset sovellukset käyttävät hyväkseen Ajax-toimintamallia, joka koostuu useasta eri tekniikasta ja standardista. Tämän toimintamallin avulla voidaan lähettää asynkronisia viestejä selaimelta palvelimelle. Käytännössä tämä tarkoittaa sitä, että osa WWW-sivusta voidaan päivittää ilman että koko sivua ladataan uudelleen. Tämänkaltainen toimintamalli tekee WWW-sivuista nopeampia ja käytettävämpiä. Selainpohjaiset sovellukset lisäävät tästä syystä vuorovaikutteisuutta käyttäjän ja palvelimen välillä. Eräs ongelma selainpohjaisten sovellusten kanssa on ollut se, että niiden kehittäminen on ollut hyvin haastavaa. Useat selaimet toteuttavat Ajaxin käyttämiä tekniikoita eri tavoilla. Tämän takia on kehitetty useita Ajax-ohjelmistokehyksiä, jotka helpottavat kehittäjän työtä piilottamalla selaimien toteutuksien eroavaisuudet. Ajax-ohjelmistokehyksiä on kehitetty viimeisten vuosien aikana erittäin paljon. Eri ohjelmistokehyksiä on olemassa satoja. Tässä työssä tarkastellaan pelkästään niitä Ajax-ohjelmistokehyksiä, jotka toimivat JavaScriptin avulla käyttäjän selaimessa. Tämänkaltaisia Ajax-ohjelmistokehyksiä kutsutaan myös JavaScriptkirjastoiksi. Tässä työssä tutustutaan kolmeen tunnettuun JavaScript-kirjastoon, minkä jälkeen niitä vertaillaan keskenään. Tämän työn tavoitteena on tutkia, minkälaisiin selainpohjaisiin sovelluksiin kyseiset JavaScript-kirjastot sopivat. 1

LUKU 1. JOHDANTO 2 Kandidaatintyön rakenne on seuraavanlainen: Luvussa 2 käsitellään Ajax-toimintamallia ja sen käyttämiä tekniikoita. Luvussa 3 tarkastellaan yleisesti Ajax-ohjelmistokehyksiä ja tutustutaan kolmeen tunnettuun Ajax-ohjelmistokehykseen. Luvussa 4 tehdään yhteenveto.

Luku 2 Ajax-toimintamalli Tämän luvun pääpaino on Ajaxissa ja sen käyttämissä tekniikoissa. Tässä luvussa esitellään myös erilaisia tiedonsiirtoformaatteja Ajaxille. XML on kehittynein tiedonsiirtoformaatti Ajaxia käytettäessä, mutta se ei ole suinkaan ainoa vaihtoehto. (Garrett, 2005) Luvun loppupuoli käsittelee Ajaxin haittoja ja hyötyjä. Tässä luvussa ei käsitellä Ajax-toteutuksia, eli erinlaisia kirjastoja ja työkaluja Ajaxille. Näitä käsitellään luvussa kolme. 2.1 Taustaa Ajax (Asynchronous JavaScript and XML) on termi, jonka Garrett (2005) keksi yli kolme vuotta sitten. Termi on suhteellisen uusi, mutta sen kattamat tekniikat eivät. Ajax ei ole tekniikka itsessään, vaan se on sekoitus HTML:ää, CSS:ää ja JavaScriptiä, joiden tarkoituksena on parantaa verkkosivujen asynkronista viestintää selaimen ja palvelimen välillä. Tämä tarkoittaa käytännössä sitä, että perinteisestä verkkosivusta on tulossa työpöytämäinen interaktiivinen verkkosovellus. (Garrett, 2005) Yksi esimerkki tällaisesta sovelluksesta on Googlen tarjoama Google Docs (http://docs.google.com) -palvelu, joka vastaa hyvin paljolti tavallista työpöytämäistä tekstinkäsittelyohjelmaa. Verkkosivujen asynkroninen viestintä selaimen ja palvelimen välillä ei ole myöskään mikään uusi keksintö. Tähän ovat pystyneet Flash-sovellukset ja Java-sovelmat jo aiemminkin. (Batra, 2007) Nämä tekniikat tarvitsevat kuitenkin asennettavan lisäosan selaimeen, toisin kuten Ajax, joka ei tällaista tarvitse. Ajaxin käyttämät tekniikat ovat jo sisäänrakennettuna käyttäjän selaimessa. Asynkroninen viestintä mahdollistaa keskustelun palvelimen kanssa taustalla, niin että tietty osa sivusta voidaan päivittää ilman että koko sivua tarvitsee 3

LUKU 2. AJAX-TOIMINTAMALLI 4 ladata uudelleen. Tämä tekee verkkosivuista nopeampia ja käytettävämpiä sekä lisää vuorovaikutteisuutta käyttäjän ja palvelimen välillä. (Roodt, 2006) Kuvasta 2.1 nähdään konkreettisesti mitä termillä asynkroninen viestintä tarkoitetaan. Tässä työssä tullaan käyttämään tätä termiä usein, joten on hyvä, että lukijalle ei jää epäselväksi, mitä termillä tarkoitetaan. Kuva 2.1: Garrett (2005) tekemä vertailu synkronisesta ja asynkronisesta viestinnästä selaimen ja palvelimen välillä. Ajax käyttää hyväkseen seuraavia tekniikoita: XHTML merkintäkielenä

LUKU 2. AJAX-TOIMINTAMALLI 5 CSS muotoilukielenä XML tiedonsiirtoformaattina DOM sisällön muokkaamiseen ja tallentamiseen XMLHttpRequest-luokkaa asynkronisen viestin lähetykseen JavaScript-kieltä sitomaan yhteen yllämainitut teknologiat 2.2 Historia Tim Berners-Lee kehitti vuonna 1990 WWW:n (World Wide Web). Hänen ideanaan oli yhtenäinen verkko, jossa dokumentit pystyisi linkittämään toisiinsa ja jokaisella dokumentilla olisi oma URI (Uniform Resource Identier). Ensimmäinen versio HTML-standardista oli tarkoitettu juuri tähän. Standardi sisälsi pääasiallisesti komentoja dokumenttien formatointiin ja linkittämiseen. Standardia ei ollut suunniteltu rikkaitten Internet-sovellusten laatimiseen, vaan enemmänkin tekstuaalisen informaation esittämiseen. (Zakas et al., 2007) 1990-luvulla suurin osa Internetin käyttäjistä selasi WWW:tä modeemiyhteyksien avulla. Dokumenttien selaus osoittautui kuitenkin erittäin hitaaksi, minkä jälkeen todettiin tarve nopeammille ratkaisuille. Dokumenttien latausajan minimointi oli yksi edistysaskel päin Ajax-sovelluksia. HTML 4.0 -standardissa esiteltiin muun muassa kehykset (engl. frames), joiden avulla voitiin jakaa dokumentti moneen osaan. Kehyksien avulla pystyttiin päivittämään haluttu kehys dokumentissa, jolloin muita kehyksiä ei tarvinnut päivittää lainkaan. Tämä lyhensi jo huomattavasti dokumenttien latausaikaa. Kehykset ja JavaScript loivat yhdessä uuden tavan lähettää asynkronisia viestejä selaimelta palvelimelle. Tämä tapa perustui yhden tai useamman piilotetun kehyksen käyttöön. Piilotetun kehyksen ainoa tarkoitus oli aloittaa kommunikaatio palvelimen kanssa. Sen sijaan, että päivitettäisiin näkyvä kehys, päivitettiin mieluummin piilotettu kehys. Piilotettu kehys sisälsi yleensä tavallisen HTMLlomakkeen, joka lähetettiin palvelimelle. Kun palvelin oli palauttanut vastauksen piilotetulle kehykselle, sisälsi se vastauksessaan JavaScript-koodia, jonka tehtävänä oli ilmoittaa näkyvälle kehykselle, että tietoa oli vastaanotettu. HTML-standardissa esiteltiin myös uusi elementti nimeltä iframe. Tämän elementin avulla pystyttiin sisällyttämään dokumentti suoraan toisen dokumentin sisään. DOM sai myös läpimurtonsa samoihin aikoihin useissa sen ajan selaimissa. Tämän ansiosta pystyttiin JavaScriptin avulla luomaan uusia iframe-elementtejä

LUKU 2. AJAX-TOIMINTAMALLI 6 dynaamisesti ilman tarvetta muokata dokumentin HTML-koodia. Tästä syntyi myös yleinen tapa tehdä asynkronisia kutsuja selaimelta palvelimelle. (Zakas et al., 2007) Tämän jälkeen alkoi XMLHttpRequest-objektin aikakausi. 2.3 Rich Internet Applications RIA (Rich Internet Applications) eli rikkaat Internet-sovellukset ovat Web 2.0 -ajan WWW-sovelluksia. On olemassa useita eri tapoja tehdä tällaisia sovelluksia, joista Ajax on yleisin. Tämä aliluku käsittelee lähinnä sitä, minkälaisia sovelluksia saadaan aikaan Ajaxilla ja mitä hyötyjä ja haittoja niistä on verrattuna tavallisiin työpöytäsovelluksiin ja perinteisiin verkkosivuihin. Rikkailla Internet-sovelluksilla on työpöytäsovelluksiin nähden monia eri etuja. Niitä ei tarvitse erikseen asentaa, ja niitä voi käyttää suoraan selaimen avulla melkein miltä tahansa koneelta. Tämän takia sovellus on erittäin helppo ja nopea saada käyttöön. Käyttäjän tarvitsee vain avata selain ja mennä tarvittavalle WWW-sivustolle. Näin ollen käyttäjä ei ole enää riippuvainen omasta koneestaan, vaan voi käyttää sovellusta jokaiselta koneelta, josta löytyy selain. Verkon välityksellä toimivat sovellukset ovat hyödyllisiä myös itse sovelluksien kehittäjille. Yksi olennainen hyöty on se, että sovelluksesta on aina käytössä vain yksi varsinainen kopio, joka on sijoitettu WWW-palvelimelle. Sovelluksen voi vastedes päivittää helposti päivittämällä vain tämän kopion sovelluksesta, minkä jälkeen kaikilla käyttäjillä on käytössään uusin versio sovelluksesta. Rikkaat Internet-sovellukset aloittavat toimintansa yleensä siten, että sovellus ladataan kokonaisuudessaan käyttäjän selaimeen. Tästä eteenpäin selaimen muistissa asuva Ajax-moottori (engl. Ajax engine), joka prosessoi osan datasta palvelimen sijasta, keskustelee käyttäjänsä kanssa, kunnes sovelluksen tarvitsee saada lisää dataa palvelimelta tai lähettää kysely palvelimelle. Tällä tavoin yritetään parantaa palvelimen suorituskykyä siirtämällä datan prosessointia palvelimelta selaimelle ja minimoimalla tiedonsiirtoa selaimen ja palvelimen välillä. (Bozzon et al., 2006) Tämän toimintamallin ja perinteisten verkkosivujen eroavaisuudet selvenevät hyvin kuvasta 2.2. Tässä kuvassa on myös mukana XML-palvelin, joka on sijoitettu kuvan oikeaan osaan, Ajax-toimintamalliin. Datan antaminen käyttäjän selaimelle suoraan XML-muodossa helpottaa palvelimen kuormitusta, koska palvelimen ei tarvitse enää tehdä datalle mitään toimenpiteitä. (Diehl, 2007)

LUKU 2. AJAX-TOIMINTAMALLI 7 Kuva 2.2: Garrett (2005) tekemä vertailu perinteisestä ja Ajax-pohjaisesta websovellus mallista. 2.4 Käytetyt tekniikat 2.4.1 XHTML ja CSS XHTML on W3C:n standardoima WWW-sivujen merkintäkieli. Tämä kieli on HTML:n seuraaja. Näiden erona on se, että XHTML on muodoltaan XML:n näköistä. Molemmat kielet ovat hyvin yleisiä W3C:n standardoimia merkintäkieliä, joten ne soveltuvat hyvin myös Ajax-sovelluksiin. CSS on myös W3C:n standardoima kieli, joka on tarkoitettu (X)HTML-dokumenttien muotoilua ja tyylittelyä varten, mutta sillä voidaan myös tyylitellä muita XML-pohjaisia dokumentteja. CSS:n avulla voidaan vaivattomasti määritellä (X)HTML-dokumenttien ulkoasu käyttämällä erilaisia tyylimäärittelyitä. CSS:n avulla voidaan myös erotella dokumentin rakenne ja ulkoasu toisistaan. Tämänkaltainen erottelu tekee (X)HTML-dokumenteista luettavampia ja joustavampia. (Levering ja Cutler, 2006)

LUKU 2. AJAX-TOIMINTAMALLI 8 2.4.2 JavaScript JavaScript on oliopohjainen skriptikieli, jonka avulla voidaan tehdä verkkosivuista enemmän dynaamisia. JavaScript pohjautuu ECMAScript-standardiin. Monet eri selaimet tukevat JavaScriptiä ja tämän takia se soveltuu hyvin Ajax-sovelluksien käyttöön. JavaScriptiä käytetään Ajaxissa pääpainoisesti palvelupyyntöjen lähettämiseen selaimelta palvelimelle sekä sivujen muokkaukseen selaimessa. Asynkronisen viestinnän selaimen ja palvelimen välillä hoitaa XMLHttpRequest-objekti. JavaScriptillä päästään myös muokkaamaan (X)HTML-dokumentin sisältöä. Tämä hoituu helpoiten käyttäen DOM-rajapintaa. 2.4.3 XMLHttpRequest (XHR) XMLHttpRequest-luokka on standardoitu ohjelmointirajapinta, jota käytetään asynkroniseen viestintään selaimen ja palvelimen välillä. Asynkronisten viestien lähetys tarkoittaa käytännössä sitä, että selain pystyy lähettämään viestin taustalla ilman, että käyttäjä sitä huomaa. Näin ollen verkkosivut voivat saada uutta dataa sivuilleen ilman, että koko sivua tarvitaan ladata uudelleen. Monien selainten uusimmat versiot tukevat nykyään XMLHttpRequest-objektia. Näiden selainten joukkoon kuuluvat muun muassa Microsoftin Internet Explorer, Mozillan Firefox, Netscapen Navigator ja Applen Safari. (Paulson, 2005) Useat selaimista toteuttavat XMLHttpRequest-objektin eri tavalla. Tämän takia on kehitetty useita Ajax-ohjelmistokehyksiä, jotka helpottavat ohjelmoijan työtä piilottamalla selaimien toteutuksien eroavaisuudet. Microsoft oli toteuttanut jo vuonna 2000 XMLHttpRequestia vastaavan konseptin. Tämä toteutus oli ActiveX-objekti, joka kulki nimellä XMLHTTP. Vaikka toteutus ei ollut vielä päässyt standardiksi asti, tukivat useat selaimet tätä toteutusta. Kaksi vuotta myöhemmin, vuonna 2002, kehitti Mozilla oman toteutuksensa, XMLHttpRequest-objektin. Tämä objekti oli sisäänrakennettu selaimeen, minkä takia monet muutkin selainvalmistajat sisällyttivät sen selaimeensa. Kaikki modernit selaimet tukevat nykyään XMLHttpRequest-objektia, mukaan lukien Internet Explorer 7. (Zakas et al., 2007) XMLHttpRequest-objekti on rakenteeltaan hyvin yksinkertainen. Se sisältää tilamuuttujan, jonka avulla voidaan seurata missä tilassa lähetetty pyyntö on. Tämä tilamuuttuja esiintyy nimellä readystate ja sen mahdolliset arvot ovat esitetty taulukossa 2.1. (Anglin, 2007) XMLHttpRequest-objektista löytyy myös funktioita, jotka muuttavat tilamuuttujan tilaa. Näistä tärkeimmät ovat open() ja send(). Ensimmäinen funktio alus-

LUKU 2. AJAX-TOIMINTAMALLI 9 Taulukko 2.1: Tilamuuttujan readystate mahdolliset arvot XMLHttpRequestobjektissa. 0 Pyyntöä ei ole alustettu. 1 Pyyntö on alustettu. 2 Pyyntö on lähetetty. 3 Lataus meneillään. 4 Lataus suoritettu. taa objektin ja seuraava funktio lähettää pyynnön palvelimelle. Alla on esitetty yksinkertainen esimerkki siitä, kuinka JavaScriptillä voidaan lähettää asynkronisia viestejä selaimelta palvelimelle. Tämä esimerkki XMLHttpRequest-objektin käytöstä perustuu Anglin (2007) kirjoittamaan JavaScript-koodiin. // Määritellään muuttuja XMLHttpRequest-objektia varten var xmlrequest; // Yritetään saada viittaus XMLHttpRequest-objektiin if(window.xmlhttprequest) { xmlrequest = new XMLHttpRequest(); } else { xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); } // Lopetetaan suoritus mikäli selain ei tue XMLHttpRequest-objektia if (xmlrequest == null) { return; } // Alustetaan XMLHttpRequest-objekti annetuilla syötteillä xmlrequest.open("get", url, true); // Määritellään onreadystatechange-tapahtumafunktio xmlrequest.onreadystatechange = function(){ HandleAjaxResponse(xmlRequest); }; // Lähetetään jokin viesti palvelimelle xmlrequest.send(args);

LUKU 2. AJAX-TOIMINTAMALLI 10 readystate-tilamuuttuja ei ole ainoa XMLHttpRequest-objektista löytyvä attribuutti. Se sisältää myös pari muuta hyödyllistä attribuuttia, kuten responsetext ja responsexml. responsetext sisältää pyynnön palauttaman datan merkkijonon, kun taas responsexml sisältää datan XML-muodossa. Yksi tärkeä XMLHttp- Request-objektin attribuutti on myös onreadystatechange-tapahtumafunktio, jonka avulla voidaan valvoa milloin tilamuuttujan readystate tila muuttuu. Kun selain on vastaanottanut vastauksen palvelimelta, kutsutaan JavaScriptin avulla onreadystatechange-tapahtumafunktiota. Tässä funktiossa kannattaa varmistaa readystate-tilamuuttujan arvo, koska tätä funktiota kutsutaan aina sen jälkeen kuin readystate-tilamuuttujan arvo muuttuu. (Anglin, 2007) Alla on esitetty esimerkkitoteutus kyseisestä funktiosta. Tämä esimerkki perustuu myös Anglin (2007) kirjoittamaan JavaScript-koodiin ja on jatkoa edelliseen esimerkkiin, jossa määriteltiin onreadystatechange-tapahtumafunktion. function HandleAjaxResponse(xmlhttp) { } // Jos muuttujan readystate arvo on 4, // niin on viesti vastaanotettu palvelimelta. if (xmlhttp.readystate === 4) { } // Tarkistetaan, että HTTP Status koodi // ei ole virheellinen. var statuscode = xmlhttp.status; if ((statuscode < 200) (statuscode >= 300)) { // Viestin vastaanottaminen onnistui. // Suoritetaan jokin hyödyllinen toimenpide. processresponse(xmlhttp.responsexml); } else { } // Viestin vastaanottaminen epäonnistui. processerror(xmlhttp);

LUKU 2. AJAX-TOIMINTAMALLI 11 Seuraavassa luvussa näytetään myös muutamia esimerkkejä siitä, kuinka sama asia voidaan tehdä paljon helpommin käyttäen Ajax-ohjelmistokehyksiä. 2.4.4 DOM Tähän asti on nähty kuinka verkkosivu voi lähettää asynkronisen viestin selaimelta palvelimelle ja tämän jälkeen vastaanottaa viestin. Sen jälkeen kun on vastaanotettu viesti palvelimelta, halutaan viestin kanssa luonnollisesti tehdä jotain hyödyllistä. Useimmissa tapauksissa halutaan päivittää tietty osa (X)HTMLdokumentin sisällöstä. Tähän hätään kehitettiin jo 1990-luvun lopulla tekniikka, joka kulkee nimellä dokumenttioliomalli (engl. Document Object Model), eli DOM. Dokumenttioliomalli kuvaa dokumentin elementit olioina, jotka muodostavat hierarkkisen rakenteen. DOM on W3C:n standardoima ohjelmointirajapinta, jolla voi esimerkiksi JavaScriptin avulla päästä käsiksi XML-pohjaisen dokumentin sisältöön. (Paulson, 2005) W3C:n tavoitteena on kehittää dokumenttioliomallista standardi, joka olisi riippumaton selaimesta, selaimen ympäristöstä ja ohjelmointikielestä. (Wood, 1999) Edellisessä koodiesimerkissä kutsuttiin processresponse()-funktiota suorittamaan jokin tietty hyödyllinen toimenpide. Tällainen toimenpide voisi olla esimerkiksi toimenpide, joka päivittää tietyn osan (X)HTML-dokumentin sisällöstä. Tällöin voidaan mieluummin kirjoittaa: // Haetaan elementti tunnuksella "ajax-container" var element = document.getelementbyid("ajax-container"); // Päivitetään elementin sisältö muuttujalla xmlhttp.responsetext element.innerhtml = xmlhttp.responsetext; Molemmilla koodiriveillä käytetään hyväksi dokumenttioliomallia, ensimmäisellä rivillä käyttämällä funktiota getelementbyid() ja seuraavalla rivillä käyttämällä attribuuttia innerhtml. Tässä voidaan myös huomata, että XML ei ole tiedonsiirtoformaattina pakollinen. Esimerkissä käytetään attribuuttia responsetext, joka palauttaa datan tavallisena merkkijonona. Tähän merkkijonoon voidaan halutessa myös upottaa (X)HTML-koodia sekaan. Vaikka DOM on jo hyvin vanha standardi, eroavat nykyajan selaimien toteutukset toisistaan. (Woychowsky, 2006) Näistä eroavaisuuksista päästään jälleen kerran eroon Ajax-ohjelmistokehyksillä, jotka helpottavat ohjelmoijan työtä piilottamalla selaimien toteutuksien eroavaisuudet.

LUKU 2. AJAX-TOIMINTAMALLI 12 Koska osa sivusta päivitetään reaaliaikaisesti ilman, että koko sivua ladataan uudestaan, on erittäin tärkeää, että käyttäjä huomaa nämä muutokset. Tästä syystä useilla Ajax-ohjelmistokehyksillä on laaja valikoima erilaisia visuaalisia efektejä. Yleisiä efektejä ovat muun muassa erilaiset valaistukset ja korostukset sekä elementtien liikkuminen. (Roodt, 2006) 2.5 Tiedonsiirtoformaatit 2.5.1 XML XML (extensible Markup Language) on yksi tunnetuimmista tiedonsiirtoformaateista Ajax-sovelluksissa. Tämä ei ole mikään ihme, sillä viimeinen kirjain sanassa Ajax viittaa juuri tähän kieleen. XML on merkintäkieli, minkä syystä se sopii paremmin esimerkiksi dokumenttien tallentamiseen kuin tiedonsiirtoon. XML on hyvin suosittu tiedonsiirtoformaatti Ajax-sovelluksissa, koska se laajalti tuettu ja standardoitu merkintäkieli. W3C aloitti standardointityön jo vuonna 1996 ja sai standardin ensimmäisen version valmiiksi vuonna 1998. (Paulson, 2005) 2.5.2 JSON JSON (JavaScript Object Notation) on tiedonsiirtoformaatti, jonka Douglas Crockford on määritellyt (RFC 4627). Ajax-sovelluksissa JSON on yleensä tiedonsiirtoformaattina helppokäyttöisempi kuin XML. Tämä johtuu monista eri syystä. JSON on XML:ää yksinkertaisempi, selkeämpi ja kevyempi formaatti, ja näin ollen se soveltuu paremmin tiedonsiirtoon. JSON ei ole XML:n tapaan merkintäkieli, vaan se on tarkoitettu juuri käytettäväksi tiedonsiirtoon. (Crockford, 2006) JSON pohjautuu ECMAScript-standardiin ja se oli tarkoitettu alunperin JavaScriptin kanssa käytettäväksi. Ajax-sovelluksissa viestin saapuessa takaisin palvelimelta selaimelle saadaan kaikki tieto JavaScript funktioina ja objekteina. (Roodt, 2006) Tämä helpottaa olennaisesti ohjelmoijan työtä. 2.5.3 Muut On olemassa myös pari muuta mainitsemisen arvoista tapaa siirtää tietoa palvelimelta selaimelle. Yksi yleinen tapa on siirtää tieto joko tavallisena tekstinä tai HTML-formatoituna tekstinä. Tällöin voidaan helposti päivittää tietty osa

LUKU 2. AJAX-TOIMINTAMALLI 13 verkkosivun tekstistä. Vaihtoehtoisesti voidaan pyytää palvelimelta pelkästään JavaScript-koodia tai JavaScript-taulukoita. Tällöin voidaan suorittaa saapuneelle JavaScript-koodille funktiota nimeltä eval(). Tämä funktio evaluoi parametrissa annetun datan kuin se olisi tavallista JavaScript-koodia. eval()-funktion käyttäminen syötteen evaluoimiseen on tietoturvallisuussyistä hyvin vaarallista, sillä syötteestä voi löytyä vihamielistä koodia. Google Suggest (http://google.com /webhp?complete=1&hl=en) on esimerkki Ajax-sovelluksesta, joka käyttää hyväkseen JavaScriptin taulukoita tiedonsiirrossaan. 2.6 Haitat Internet-selainta ei ollut alun perin tarkoitettu alustaksi, jossa voisi suorittaa Ajax-sovelluksia. Selaimen pääasiallinen ja alkuperäinen tarkoitus oli olla yksinkertainen ohjelma HTML-dokumenttien lukemiseen. Tämän takia useimmat selaimet eivät vielä osaa tukea ominaisuuksia, joita Ajax-sovelluksilta vaaditaan. Tällaisia ominaisuuksia ovat esimerkiksi selaushistoria ja kirjainmerkit. Kun linkkiä painetaan Ajax-sovelluksessa, päivittyy vain tietty sivun osa, eikä koko sivua ladata uudelleen. Näin ollen selain ei ymmärrä, että on menty selaamishistoriassa askel eteenpäin, eikä näin ollen päivitä selaushistoriaa. Jos halutaan lisätä tämä päivitetty sivu kirjanmerkkeihin, ei selain tule myöskään ymmärtämään, että halutaan lisätä juuri tämä versio sivuista kirjainmerkkeihin. Tässä tapauksessa selain asettaa kirjainmerkkeihin mieluummin suoraan sen osoitteen, mikä löytyy selaimen osoitepalkilta, eli alkuperäisen sivun, jota ei olla päivitetty. Näihin ongelmiin on kehitetty tilapäisratkaisut (engl. hacks), joiden avulla ongelmista päästään eroon useimmilla selaimilla. On myös olemassa muita samantyyppisiä ongelmia, joiden kanssa sovelluksen kehittäjän tarvitsee olla varovainen. Tässä työssä ei käydä sen enempää läpi ongelmia tai rajoitteita, joita Ajaxsovellukset aiheuttavat.

Luku 3 Ajax-ohjelmistokehykset 3.1 Taustaa Ajax itsessään ei ole ohjelmistokehys tai tekniikka, vaan sen on enemmänkin suunnittelumalli Ajax-sovelluksien toteuttamiseen. Ajax-ohjelmistokehykset ovat ohjelmistokehyksiä, jotka auttavat ohjelmoijaa toteuttamaan Ajax-sovelluksia. Edellisessä luvussa mainittiin, että tietyt tekniikat toimivat eri tavoin eri selaimissa. Ajax-ohjelmistokehykset ovat juuri tästä syystä yleistyneet ja saaneet paljon huomiota kehittäjien keskuudessa. Ajax-ohjelmistokehykset helpottavat oleellisesti kehittäjien työtä piilottamalla selaimien toteutuksien eroavaisuudet. Edellisessä luvussa näytettiin myös kuinka asynkronisia viestejä voidaan lähettää selaimelta palvelimelle. Tässä luvussa esitellään myös miten sama asia voidaan tehdä paljon helpommin Ajax-ohjelmistokehyksien avulla. Termillä ohjelmistokehys tarkoitetaan valmista ohjelmistorunkoa, jota voidaan käyttää pohjana uuden sovelluksen toteuttamiseen. Tämänkaltainen ohjelmistorunko ei ole täydellinen ohjelmistotuote tai valmis suorituskelpoinen ohjelmisto, vaan runkoa pitää täydentää, jotta sovelluksesta voitaisiin tehdä käyttökelpoinen. (Jaakkola, 2006) Näin ollen ohjelmistokehykset nopeuttavat sovelluksien kehitystä, koska osaa sovelluksen koodista ei tarvitse kirjoittaa uudelleen. Useita Ajax-ohjelmistokehyksiä voitaisiin myös kutsua pelkiksi kirjastoiksi tai JavaScript-kirjastoiksi, koska ne tarjoavat vain kokoelman menetelmiä ja funktioita yleisten toimintojen suorittamiseen. Ne eivät siis tarjoa valmista runkoa, jota voitaisiin käyttää pohjana uuden sovelluksen toteuttamiseen. Tässä työssä käytetään kumminkin termiä Ajax-ohjelmistokehys, jolla viitataan sekä Ajaxohjelmistokehyksiin että JavaScript-kirjastoihin. Ajax-ohjelmistokehykset toteuttavat suurimman osan tarvittavista toimenpiteis- 14

LUKU 3. AJAX-OHJELMISTOKEHYKSET 15 tä, joita Ajax-moottori tarvitsee toimiakseen. Kuvassa 2.2 esiteltiin Ajax-toimintamallin periaate, mihin oli myös sijoitettu kyseinen Ajax-moottori. Ajax-ohjelmistokehykset voidaan jakaa ainakin kahteen ryhmään. Ensimmäinen ryhmä koostuu JavaScript-kirjastoista, jotka sijoittuvat kuvan 2.2 käyttäjän selaimessa ajettavaan Ajax-moottoriin. Toinen ryhmä koostuu taas ohjelmistokehyksistä, jotka ovat integroitu palvelimelle. Tässä työssä vertaillaan ainoastaan ensimmäiseen ryhmään kuuluvia Ajax-ohjelmistokehyksiä, koska nämä ohjelmistokehykset keskittyvät enemmän Ajax-ominaisuuksiin kuin toiseen ryhmään kuuluvat ohjelmistokehykset, jotka käsittelevät myös esimerkiksi tiedon hakua palvelimelta. 3.2 Valintakriteerit Ajaxian.com (2007) teetti kyselyn, jossa mitattiin kuinka moni kehittäjä käytti mitäkin Ajax-ohjelmistokehystä. Kysely sisälsi listan, jossa oli listattu yli 240 Ajax-ohjelmistokehystä. Tästä syystä vertailua ei voida suorittaa näin monelle ohjelmistokehykselle, vaan joukosta joudutaan karsimaan suurin osa pois. Tässä työssä tehty vertailu tulee pääasiallisesti perustumaan saatavilla olevien kirjastojen dokumentaatioihin sekä muihin tehtyihin tieteellisiin vertailuihin. Tästä syystä yksi valintakriteereistä tulee olemaan Ajax-ohjelmistokehyksen suosio. Ajax-ohjelmistokehyksen tulee olla sen verran suosittu, että siitä löytyy tarpeeksi vertailukelpoista materiaalia. Taulukossa 3.1 on esitetty edellä mainitun kyselyn suosituimmat Ajax-ohjelmistokehykset. Taulukko 3.1: Suosituimmat Ajax-ohjelmistokehykset. The Dojo Toolkit 11,8% Ext JS 22,5% jquery 29,3% Mootools 14,3% Prototype 34,1% Script.aculo.us 22,3% Yahoo! User Interface Library 13,0% Edellisessä aliluvussa esiteltiin jo yksi valintakriteeri Ajax-ohjelmistokehyksille. Sen on oltava käyttäjän selaimessa ajettava JavaScript-kirjasto. Tämän lisäksi on JavaScript-kirjaston käytettävä myös jotakin avoimen lähdekoodin lisenssiä, jotta vertailu eri kirjastojen välillä voidaan suorittaa ilman kustannuksia. Kaikki taulukon 3.1 Ajax-ohjelmistokehykset täyttävät nämä kaksi edellä mainittua

LUKU 3. AJAX-OHJELMISTOKEHYKSET 16 kriteeriä. Script.aculo.us eroaa muista siinä, että se on lisäosa Prototype Ajaxohjelmistokehykselle. Tässä työssä ei valitettavasti ole tarpeeksi aikaa vertailla kaikkia taulukon 3.1 ohjelmistokehyksiä. Näin ollen valitaan vain kolme kappaletta vertailuun. Ensiksi valitaan Prototype, koska se on taulukon 3.1 suosituin ohjelmistokehys. Prototypen yhteydessä käsitellään myös lyhyesti Script.aculo.us-ohjelmistokehystä, koska se on myös erittäin suosittu lisäosa Prototype Ajax-ohjelmistokehykselle. The Dojo Toolkit on myös kiinnostava kohde, koska sillä on pari isoa yritystä takanaan antamassa virallista tukea, kuten esimerkiksi IBM ja Sun Microsystems. Valitaan The Dojo Toolkit myös mukaan vertailuun. Yahoo! User Interface Library (YUI) on suhteellisen uusi kirjasto, verrattuna kahteen edelliseen. Tästä huolimatta on kirjasto jo saanut paljon suosiota. Sen takana on myös yksi iso yritys, nimittäin Yahoo, joka on panostanut erittäin paljon kyseiseen kirjastoon. 3.3 Vertailukriteerit Tärkeimmät vertailukriteerit valituille Ajax-ohjelmistokehyksille ovat seuraavat: Ajax-ominaisuudet Koodauskäytännöt Lisäosat Selaintuki Dokumentaatio Yhteisö Ensiksi katsotaan valittujen ohjelmistokehyksien Ajax-ominaisuuksia. Tässä katsotaan kuinka kirjastolla voidaan lähettää asynkronisia viestejä selaimelta palvelimelle. Samalla selvitetään mitä kaikkia tiedonsiirtoformaatteja kirjasto tukee. On myös kiinnostavaa tietää löytyykö kirjastosta joitakin muita valmiiksi toteutettuja Ajax-ominaisuuksia, kuten esimerkiksi jaksottaisten asynkronisten viestien lähetys. Seuraavaksi katsotaan minkälaisia koodauskäytäntöjä kirjasto käyttää. Tässä vilkaistaan itse kirjaston lähdekoodia ja selvitetään kuinka helppolukuista kirjaston lähdekoodi on. Mikäli ohjelmistokehyksestä ei ole saatavilla mitään dokumentaatiota, on lähdekoodin oltava mahdollisimman helppolukuista, jotta kirjaston

LUKU 3. AJAX-OHJELMISTOKEHYKSET 17 käyttäminen olisi mahdollisimman helppoa. Samalla otetaan myös selvää ovatko kirjaston nimeämiskäytännöt loogisia ja jos kirjasto käyttää paljon globaaleita muuttujia. Globaaleitten muuttujien käyttöä tulisi välttää mahdollisimman paljon, koska muuten eri kirjastot ja muut JavaScript-koodit voivat olla käyttökelvottomia toistensa kanssa. Koska asynkronisten viestien lähetysten yhteydessä käytetään paljon tapahtumankäsittelijöitä, on tärkeätä, että kirjastossa on tapahtumankäsittely toteutettu järkevästi. Tässä katsotaan myös kuinka tapahtumankäsittely on toteutettu kirjastossa. Tämän jälkeen katsotaan paljonko kirjastosta löytyy eri lisäominaisuuksia, kuten esimerkiksi drag-and-drop-ominaisuus. Mitä enemmän lisäominaisuuksia kirjastosta löytyy, sitä arvokkaamman se tekee kirjastosta. Useat kirjastot tarjoavat myös paljon eri toiminnallisuutta. Tästä syystä useammat kirjastot ovat jaettu osiin, jotta vain tiettyä toiminnallisuutta voi käyttää, ilman että koko kirjastoa on pakko käyttää. Jos kirjastosta käytetään vain paria toimintoa, olisi toivottavaa, ettei koko kirjaston lähdekoodia tällöin lähetettäisi loppukäyttäjän selaimeen. Ajax-sovelluksen selaintuki on yksi tärkeimmistä kriteereistä. Sovelluksen tulisi luonnollisesti toimia mahdollisimman monessa eri selaimessa. Tässä yhteydessä mainitaan ne selaimet, joita kirjasto tukee virallisesti. On myös hyvin tärkeätä, että kirjastosta on olemassa dokumentaatiota. Dokumentaation tulisi tietysti olla myös ajan tasalla. Ohjelmistokehyksen lisäarvoa nostaa myös se, jos ohjelmistokehyksestä on esimerkiksi kirjoitettu kirjoja, laadittu demonstraatioita tai kirjoitettu koodinäytteitä. Nämä auttavat ja nopeuttavat kehittäjää kirjaston tutustumisessa. Avoimien lähdekoodien sovelluksilla on tärkeätä, että niillä on aktiivinen yhteisö, jotka vievät kirjastojen kehitystä eteenpäin. Kirjaston lisäarvoa nostaa se, jos kirjastolla on esimerkiksi aktiivinen keskustelupalsta, wiki tai IRC-kanava. Positiiviseksi asiaksi luetaan myös se, että ulkopuolisilla kehittäjillä on jokin vaivaton tapa osallistua kirjaston kehitykseen. 3.4 Prototype Prototype JavaScript Framework tai lyhyemmin Prototype on Sam Stephensonin kehittämä JavaScript-kirjasto, joka tuli tunnetuksi Ruby on Rails ohjelmistokehyksen kautta. Ruby on Rails on sisältänyt Prototype JavaScript-kirjaston kaikissa versioissaan jo jonkin aikaa. Sam aloitti Prototypen kehityksen jo vuoden 2005 helmikuussa, joten kirjasto on jo erittäin vanha. Monet muut JavaScript-kirjastot käyttävät myös pohjanaan Prototype JavaScript-kirjastoa, kuten esimerkiksi Script.aculo.us ja Rico. (Lerner, 2007b) Tässä tullaan keskittymään ainoastaan Pro-

LUKU 3. AJAX-OHJELMISTOKEHYKSET 18 totype ja Script.aculo.us JavaScript-kirjastoihin, joista jälkimmäinen on tarkoitettu graasten käyttöliittymien toteuttamiseen. Prototypen virallinen verkkosivu löytyy osoitteesta http://www.prototypejs.org/. 3.4.1 Ajax-ominaisuudet Prototype JavaScript-kirjasto tarjoaa kaksi tärkeätä funktiota, joilla voidaan lähettää asynkronisia viestejä selaimelta palvelimelle. Ensimmäinen funktio on yleiskäytännöllinen funktio nimeltä Ajax.Request(), jota voidaan käyttää moniin eri tarpeisiin. Toinen funktioista on funktio nimeltä Ajax.Updater(). Sitä käytetään lähinnä tietyn DOM elementin päivittämiseen. Alla on esitetty esimerkki funktion Ajax.Request() käytöstä. new Ajax.Request('/some_url', { method: 'get', onsuccess: function(transport) { processresponse(transport.responsetext); }, onfailure: function() { processerror(); } }); Prototype JavaScript-kirjasto tarjoaa myös muita hyödyllisiä Ajax-ominaisuuksia. Yksi hyödyllinen ominaisuus on jaksottaisten asynkronisten viestien lähetys, jota voi käyttää funktion Ajax.PeriodicalUpdater() avulla. Kirjasto tukee myös kahta eri tiedonsiirtoformaattia XML:n lisäksi. Tiedonsiirtoformaattina voidaan käyttää JSON:ia ja JavaScriptiä. Kirjasto havaitsee automaattisesti mikäli käytetään jälkimmäistä, jolloin se uudelleenohjaa datan funktiolle eval(). (Stephenson, 2005) 3.4.2 Koodauskäytännöt Prototype tarjoaa virallisilla verkkosivuilla kaksi versiota lähdekoodistaan. Ensimmäinen versio soveltuu tuotantokäyttöön ja toista versiota voidaan käyttää kehittämään kirjastoa eteenpäin. Kummassakaan versiossa ei olla sen kummemmin kommentoitu koodia, mutta muuten molemmat versiot ovat suhteellisen helppolukuisia. Yksi kirjaston kritisoitu ominaisuus on se, että kirjasto laajentaa monia JavaScriptin standardeja objekteja prototype-määritteen avulla. Kirjaston uusin versio

LUKU 3. AJAX-OHJELMISTOKEHYKSET 19 ei enää laajenna Object-tyyppiä, mutta se laajentaa edelleen Array-tyypin. Kirjasto voi näin ollen tehdä muusta koodista tai muista kirjastoista käyttökelvottomia. On kumminkin suhteellisen helppoa tehdä omasta koodista yhteensopivaa Prototypen koodin kanssa, mutta jos halutaan käyttää useampia JavaScriptkirjastoja, voi eri kirjastojen yhteensovittaminen olla erittäin haastavaa. (Mc Parlane, 2005) Tästä syystä kannattaa Prototype JavaScript-kirjaston kanssa käyttää kirjastoja, jotka perustuvat Prototype JavaScript-kirjastoon. Edellä mainitut laajennukset tekevät koodin kirjoittamisesta paljon mukavampaa. Prototype tarjoaa myös mahdollisuuden objektien periyttämiselle ja muita funktioita, joiden avulla päästään helposti muokkaamaan dokumenttien elementtejä. (Stephenson, 2005) Tästä syystä koko kirjastoa onkin kutsuttu useaan otteeseen loistavaksi taideteoksi. (Mc Parlane, 2005) Kirjaston tapahtumankäsittely on toteutettu erillisen Event-luokan avulla. Sen avulla voidaan helposti lisätä tapahtumantarkkailijoita elementeille. 3.4.3 Lisäosat Kirjasto on hyvin oliosuuntautunut, ja tästä syystä kirjaston eri ominaisuudet ovat jaettu eri objekteiksi. Kirjasto on erittäin käyttökelpoinen JavaScript- ja Ajax-sovelluksien toteuttamiseen. Kirjastolla ei ole mitään virallisia lisäosia, mutta on olemassa monia muita JavaScript-kirjastoja, jotka pohjautuvat Prototype JavaScript-kirjastoon. Eräs yleisimmistä kirjastoista on Script.aculo.us. Tämä kirjasto yhdessä Prototypen kanssa tekee Prototypestä erittäin hyödyllisen. Script.aculo.us tarjoaa yleisesti käytettyjä eektejä ja animaatioita graasten käyttöliittymien toteuttamiseen. Näitä ei ole olemassa kovinkaan montaa, mutta kaikki ovat erittäin konguroitavissa. (Roodt, 2006) 3.4.4 Selaintuki Prototype JavaScript-kirjaston virallisilla kotisivuilla mainitaan, että seuraavat selaimet tukevat kirjaston käyttöä: (Stephenson, 2005) Internet Explorer 6.0+ Firefox 1.5+ Safari 2.0+ Opera 9.25+

LUKU 3. AJAX-OHJELMISTOKEHYKSET 20 Erittäin monet viralliset ja suuret yhtiöt, kuten esimerkiksi nasa.gov ja cnn.com käyttävät myös hyväkseen kirjastoa, joten voidaan olettaa, että kirjasto toimii hyvin monissa selaimissa. 3.4.5 Dokumentaatio Prototype JavaScript-kirjaston kehittäjiä kritisoitiin ennen huonon dokumentaation määrästä. (Roodt, 2006) Kirjaston virallisilta sivuilta voi nykyään löytää paljon dokumentaatiota kirjaston käytöstä. Viralliset verkkosivut tarjoavat kattavan API-dokumentaation, jossa jokaisesta funktiosta löytyy lyhyehkö selitys ja koodiesimerkki. Tämän lisäksi sivuilta löytyy myös artikkeleita ja demonstraatioita, jotka auttavat kehittäjää nopeasti tutustumaan ohjelmistokehykseen. Joulukuussa vuonna 2007 julkaistiin myös yksi kirja, joka käsitteli vain Prototype ja Script.aculo.us JavaScript-kirjastoja. Kirja kulkee nimellä Prototype and script.aculo.us: You never knew JavaScript could do this! ja sen on kirjoittanut yksi Prototypen ja Script.aculo.us:n kehittäjistä, Christophe Porteneuve. 3.4.6 Yhteisö Ensisilmäyksellä näyttäisi siltä, että kaiken kehityksen takana on vain noin kymmenisen aktiivista kehittäjää. Nämä kehittäjät ovat kylläkin avustaneet kirjaston kehitystä eniten, mutta ulkopuolisten kehittäjien on myös helppo osallistua kehitykseen. Ulkopuoliset kehittäjät voivat helpoiten myötävaikuttaa kirjaston kehitystä lähettämällä virallisten sivujen kautta bugiraportteja tai koodipätkiä. Prototype tarjoaa myös keskusteluryhmiä ja IRC-keskustelukanavan, jotka edesauttavat yleisten ongelmien ratkaisujen löytämistä. 3.5 The Dojo Toolkit The Dojo Toolkit on ohjelmistokehys, joka on tarkoitettu JavaScript- ja Ajaxpohjaisten sovellusten toteuttamiseen. Alex Russell aloitti kirjaston kehitystyön jo vuonna 2004, eli ennen kuin Garrett oli julkaissut artikkelinsa Ajaxista. Kirjaston taustalla pyörii yksi yleishyödyllinen yhteisö (engl. non-prot organization) nimeltä The Dojo Foundation, joka tukee monia avoimen lähdekoodin ohjelmistokehyksiä, joista The Dojo Toolkit on yksi. (The Dojo Foundation, 2008) Dojo JavaScript-kirjastolla on monia isoja yrityksiä takanaan antamassa virallista tukea. Tällaisia yrityksiä ovat muun muassa IBM ja Sun Microsystems. Djan-

LUKU 3. AJAX-OHJELMISTOKEHYKSET 21 go, joka on yksi erittäin tunnettu palvelinpuolen ohjelmistokehys käyttää myös hyväkseen Dojo JavaScript-kirjastoa. The Dojo Toolkitin virallinen verkkosivu löytyy osoitteesta: http://www.dojotoolkit.org/. (Lerner, 2007a) 3.5.1 Ajax-ominaisuudet The Dojo Toolkit tarjoaa kaksi perusfunktiota, joilla voidaan lähettää asynkroninen viesti selaimelta palvelimelle. Nämä funktiot ovat dojo.xhrget() ja dojo.xhrpost(). Alla on esitetty esimerkkitoteutus funktiosta dojo.xhrget(). dojo.xhrget ({ url: '/some_url', load: function (data) { processresponse(data); }, error: function (data) { processerror(); } }); Tästä huomataan, että asynkronisia viestejä voidaan lähettää melkein samalla tavalla kuin Prototype JavaScript-kirjaston kanssa. Prototypen tapaan, tiedonsiirtoformaattina voidaan käyttää myös JSON:ia. Dojo JavaScript-kirjasto tarjoaa paljon Ajax-ominaisuuksia. Yksi ominaisuus, mitä Prototype JavaScript-kirjastosta ei löytynyt, oli iframe:n käyttö XmlHttp- Requestin sijasta. Kirjasto päättää automaattisesti milloin on kannattavinta käyttää iframe:a XmlHttpRequestin sijasta. 3.5.2 Koodauskäytännöt Kirjastosta on saatavilla pari eri tuotantoversiota. The Dojo Foundation tarjoaa myös versionhallintajärjestelmän, josta kehitysversion lähdekoodista voi hakea. Vaikka koodia onkin paljon, on itse kehitysversion lähdekoodia myös kommentoitu selkeästi. The Dojo Toolkit sisältää huikean määrän toimintoja ja tästä syystä koko kirjasto on jaettu erillisiin paketteihin. Paketointijärjestelmän paketit muistuttavat hyvin paljon Java-kielen paketteja, joissa kehittäjän täytyy määritellä mitä paketteja hän haluaa käyttää. (Roodt, 2006) Kehittäjän täytyy ensiksi sisällyttää

LUKU 3. AJAX-OHJELMISTOKEHYKSET 22 dojo.js JavaScript-tiedosto dokumenttiinsa ja tämän jälkeen hän voi saada enemmän toimintoja käyttöönsä kutsumalla funktiota dojo.require(). (The Dojo Foundation, 2008) Tämänkaltainen toimintojen erottelu tekee Ajax-sovelluksista kevyempiä, koska käyttäjän ei tarvitse ladata koko JavaScript-kirjastoa omaan selaimeensa. Kirjasto tarjoaa erittäin tehokkaan tavan toteuttaa tapahtumankäsittelyt. Tämän lähestymistavan avulla voidaan lisätä tapahtumia objekteihin, ilman että itse objekteja muokataan. (Roodt, 2006) Dojo tekee myös itse JavaScriptin kirjoittamisesta helpompaa. Sen sisältämä langpaketti sisältää monia yleishyödyllisiä funktioita, joista esimerkiksi yksi helpottaa taulukkojen iteroimista. Tätä funktiota voitaisiin soveltaa seuraavasti: (Lerner, 2007a) // Suoritetaan funktio iterationfunctionname() jokaiselle // taulukon arrayname alkiolle dojo.lang.foreach(arrayname, iterationfunctionname); 3.5.3 Lisäosat The Dojo Foundation tarjoaa kaksi lisäosaa The Dojo Toolkitille. Ensimmäinen näistä on Dijit, joka tarjoaa paljon visuaalisia komponentteja. Nämä komponentit ovat suunniteltu niin, että ne olisivat mahdollisimman esteettömiä. Tämä tarkoittaa sitä, että myös esimerkiksi ruudunlukuohjelmat (engl. screen readers) voivat käyttää Ajax-sovelluksia, jotka ovat suunniteltu näillä komponenteilla. Toinen The Dojo Foundationin tarjoamista lisäosista on DojoX, joka tarjoaa ominaisuuksia, joita ei usein löydä muista JavaScript-kirjastoista. Lisäosan avulla voidaan annetusta datasta tehdä erilaisia diagrammeja ja taulukoita. Tämän lisäksi lisäosalla voidaan piirtää SVG- tai VML-pohjaista vektorigraikkaa. Ajax-sovelluksesta voidaan myös tehdä toimintakelpoinen oine-tilassa. Nämä ovat vain muutamia esimerkkejä siitä, mihin lisäosa pystyy. (The Dojo Foundation, 2008) The Dojo Foundation tukee myös paria muuta ohjelmistokehystä, mutta nämä eivät ole lisäosia The Dojo Toolkitille, vaan ne ovat itsenäisiä ohjelmistokehyksiä. 3.5.4 Selaintuki Dojon virallisilla kotisivuilla mainitaan, että seuraavat selaimet tukevat kirjaston käyttöä: (The Dojo Foundation, 2008) Internet Explorer 6.0+

LUKU 3. AJAX-OHJELMISTOKEHYKSET 23 Firefox 1.5+ Konqueror 3.5+ Safari (uusin versio) Opera (uusin versio) Jotkut toiminnot saattavat myös prototypen tapaan toimia muilla selaimilla. Safarin ja Operan tapauksessa virallista tukea luvataan vain uusimpaan versioon. Kun jommasta kummasta selaimesta julkaistaan uusi versio, ei edellinen versio saa enään virallista tukea. Näin ollen on myös hyvin todennäköistä, että kirjasto toimii myös vanhemmissa versioissa. 3.5.5 Dokumentaatio Kirjaston viralliset verkkosivut tarjoavat runsaasti dokumentaatiota. Kirjaston verkkosivuilta on muun muassa saatavilla yksi kattava verkkokirja, jota kuka tahansa voi lukea ilmaiseksi. The Dojo Foundation tarjoaa myös kirjastolleen API-dokumentaation, koodiesimerkkejä ja demoja. Dokumentaation laatu näyttää olevan saman laatuista kun Prototypen, mutta itse dokumentaatiota on luonnollisesti paljon enemmän kirjaston suuren koon takia. (The Dojo Foundation, 2008) Alex Russell, joka aloitti kirjaston kehitystyön, on julkaissut kirjan nimeltä Dojo: The Denitive Guide. On myös olemassa pari muutakin kirjaa, jotka käsittelevät pelkästään kyseistä kirjastoa. 3.5.6 Yhteisö The Dojo Foundation tukee monia vapaan lähdekoodin projekteja, joista The Dojo Toolkit on yksi. The Dojo Foundation on saanut myös taakseen monia isoja yrityksiä, kuten esimerkiksi Sun Microsystems. Nämä yhtiöt tukevat eri projekteja sekä rahallisesti että teknisesti. Tässä yhteydessä teknisellä tuella tarkoitetaan sitä, että yrityksellä on henkilöstöä, joka osallistuu itse ohjelmistokehyksen kehitykseen. Myös ulkopuoliset henkilöt voivat avustaa kirjaston kehitystä esimerkiksi raportoimalla bugeja. Mutta jos ulkopuoliset tahot haluavat saada omaa koodiaan johonkin The Dojo Foundationin tukemaan projektiin tarvitsee heidän allekirjoittaa CLA The Dojo Foundationin kanssa. (The Dojo Foundation, 2008) Kirjastolla on myös omat sähköpostilistat, keskustelupalstat ja IRC-kanava. Tämän lisäksi kirjastolla on myös oma bugien raportointijärjestelmä.

LUKU 3. AJAX-OHJELMISTOKEHYKSET 24 3.6 The Yahoo! User Interface Library (YUI) Yahoo! User Interface Library tai lyhyemmin YUI JavaScript-kirjasto sai alkunsa vuonna 2005, jolloin Yahoo!:n työntekijät alkoivat kehittää JavaScript-kirjastoa. Seuraavan vuoden helmikuussa kirjastosta julkaistiin ensimmäinen versio, joka oli kaikkien vapaasti ladattavissa. Kirjaston viralliset verkkosivut löytyvät osoitteesta http://developer.yahoo.com/yui/. 3.6.1 Ajax-ominaisuudet Asynkronisen viestin lähetys onnistuu kirjastolla suhteellisen helposti Funktiolla YAHOO.util.Connect.asyncRequest voidaan lähettää asynkroninen viesti selaimelta palvelimelle. Alla on esitetty esimerkki funktion käytöstä: (Yahoo! Developer Network, 2008a) YAHOO.util.Connect.asyncRequest( 'GET', '/some_url', { success: function(o) { processresponse(o); }, failure: function(o) { processerror(); } } ); YUI:n avulla voidaan myös lähettää asynkronisia kutsuja, jossa käytetään tiedonsiirtoformaattina JSON:ia. 3.6.2 Koodauskäytännöt YUI:n lähdekoodi on selkeätä ja koodia on myös kommentoitu tarpeeksi. Näin ollen omien muutoksien lisääminen itse kirjastoon on myös suhteellisen helppoa. Toiminnallisuus on myös jaettu selkeisiin paketteihin. Jokaisella paketilla on myös oma README-tiedosto, jossa on mainittu kaikki muutokset, mitä pakettiin on tehty. Tämä tekee kirjaston päivittämisestä helpompaa. Jos kirjastoa päivitetään

LUKU 3. AJAX-OHJELMISTOKEHYKSET 25 ja tästä syystä jokin sivun osa lakkaat toimimasta, pystytään nopeasti selvittämään mikä toiminto kirjastossa on muuttunut. Yleisenä koodauskäytäntönä on usein ollut se, että globaaleja muuttujia tulisi välttää. Tästä syystä YUI JavaScript-kirjasto käyttää hyväkseen vain yhtä globaalia muuttujaa nimeltä YAHOO. Tämän globaalin muuttujan avulla pääsee käsiksi kaikkiin kirjaston tarjoamiin ominaisuuksiin. (Roodt, 2006) Tapahtumankäsittely kirjastossa tapahtuu enemmän tai vähemmän samalla tavalla kuin Dojo JavaScript-kirjastossa. 3.6.3 Lisäosat Kirjastosta löytyy laaja valikoima yleishyödyllisiä toimintoja. Jokaiselle päätoiminnolle ollaan annettu oma luokkansa tai pakettinsa. Näitä ovat esimerkiksi Drag & Drop, Menu ja Resize. Kirjasto ei ole pelkästään JavaScript-kirjasto, vaikka suurin osa kirjastosta onkin JavaScript-koodia. Kirjasto tarjoaa myös neljä eri CSS tiedostoa, kuten esimerkiksi Reset CSS ja Fonts CSS. Reset CSS standardoi CSS-määritykset useimmille selaimille, ja Fonts CSS yrittää näyttää fontit samalla tavalla kaikissa selaimissa. 3.6.4 Selaintuki YUI JavaScript-kirjasto on vertailluista kirjastoista se, joka määrittää kirjastonsa selaintuen kaikista selkeimmin. Taulukossa 3.2 on esitetty mitkä selaimet tukevat kirjastoa milläkin käyttöjärjestelmällä. Taulukon ensimmäinen sarake viittaa käyttäjän käyttämään selaimeen ja taulukon ensimmäinen rivi viittaa käyttäjän käyttöjärjestelmään. Merkintä A-grade tarkoittaa sitä, että kirjasto tukee kyseistä selain-käyttöjärjestelmä -yhdistelmää. Kirjasto käyttää tämän merkinnän lisäksi myös merkintöjä C-grade ja X-grade, mutta nämä eivät ole niinkään kiinnostavia tämän vertailun toteuttamiseen. Ristimerkki selaimen nimessä tarkoittaa, että virallista tukea annetaan vain selaimen uusimmalle versiolle. (Yahoo! Developer Network, 2008b) Yahoo! seuraa aktiivisesti selainten kehitystä. Aktiivisen seurannan kohteena on nyt muun muassa Firefox 3 ja Internet Explorer 8. Mitä enemmän uusia versioita selaimista julkaistaan, sitä vähemmän vanhoja versioita tuetaan. Yahoo!:lla on myös selkeät tulevaisuuden suunnitelmat siitä, mitä selaimia tullaan virallisesti tukemaan tulevaisuudessa. (Yahoo! Developer Network, 2008b)