Sovelluskehityksessä käyttöliittymän rakentaminen ja käyttäjille näkyvien toimintojen toteuttaminen on yksi tärkeimmistä osuuksista, sillä hyväkin sovellus voi kaatua heikkoon käyttöliittymään. Java EE -sovelluskehityksessä on tarjolla useita erilaisia käyttöliittymäkehyksiä, jotka tarjoavat työkalut toimivan käyttöliittymän rakentamiseen, mutta käyttötarkoitukseen sopivan välineen valinta ei ole aina yksiselitteistä. Oli siis aika päivittää hieman tietoja erilaisten Java EE -käyttöliittymäkehysten osalta ja tutustua Vaadin 7:aan, Java Server Faces (JSF) 2:een PrimeFacesin kanssa ja Apache Wicket 6:een toteuttamalla yksinkertainen imgur-kuvaselaussovellus. Aikaisemmin olen kehittänyt sovelluksia käyttäen muun muassa Strutsia, JSF 1.2:sta ja Wicket 1.5:sta.
Java EE 6 -sovelluksia voi toteutta monella eri tekniikoilla ja tällä kertaa toteutin käyttöliittymäkerroksen usealla eri tavalla (Vaadin 7, JSF2, Wicket 6) ja pitäen taustapalvelut vakiona. Imgurin REST-APIn käsittelyyn käytin jokaisessa sovelluksessa Apache CXF:ää rajapinnan lukemiseen ja GSONia JSON-sanoman muuntamiseen Java-olioiksi. Vaikka kaikki kolme kehystä tukevat Java EE 6:n JSR 299 CDI:tä, tein Java Beanien injektoinnin Spring 3:lla, joka toimi varmasti myös vanhemman WebLogic 11g -sovelluspalvelimen kanssa. Jettyllä tai TomEE:llä ajettaessa ei olisi ollut mitään ongelmaa.
Sovellusten koodit löytyvät GitHubista (https://github.com/walokra/fotorest.git), vaikkakaan ne eivät ole mitenkään viimeisteltyjä. Ehkä niistä kuitenkin on jollekin hyötyä.
Sovellus 1: Vaadin 7
Vaadin on avoimen lähdekoodin Java-sovelluskehys Web-sovellusten rakentamiseen ja muistuttaa enemmän työpöytäsovellusten tekemistä esimerkiksi Java Swing -kehyksellä kuin perinteistä Web-sovelluskehitystä HTML:n ja JavaScriptin kanssa. Vaadin rakentuu Google Web Toolkitin päälle ja käyttää GWT:tä sivujen renderöintiin. Vaadin on suomalaisen Turussa pääkonttoriaan pitävän Vaadin Oy:n kehittämä. Vaadin 7 julkaistiin pari kuukautta sitten.
Vaadin tarjoaa perinteiselle Java-kehittäjälle helpomman lähestymisen Web-sovellusten kehittämiseen, kun käyttöliittymän rakentaminen onnistuu ilman HTML:n ja JavaScriptin kanssa askartelua. Vastaavasti HTML:ää osaavalle kehittäjälle Swing-tyylinen käyttöliittymän rakentaminen voi olla tuskastuttavaa. Vaadin tarjoaa itsessään kattavan valikoiman erilaisia käyttöliittymäkomponentteja ja erilaiset demot antavat hyvän kuvan mitä Vaatimella saa aikaan.
Yksinkertaisen imgur-selaajan toteutus Vaadin 7:lla luonnistui nopeasti, kun olin ensin sisäistänyt Swing-tyylisen käyttöliittymän idean. Toimivan ulkoasun ja muutamat toiminnot sai rakennettua suhteellisen helposti ja lopputuloksesta tuli siisti. Koska Vaadin-sovellus on käytännössä kasa Javascriptiä, on sen debuggaaminen hieman hankalampaa, mutta kehys tarjoaa avuksi kohtalaiset työvälineet (?debug-parametri). Käytin Vaatimen oletusteemaa, koska muut teemat eivät vielä uusinta versiota tukeneet. Uuteen kehykseen tutustumisessa auttoi myös Vaatimen laadukas dokumentaatio ja keskustelufoorumi, vaikkakin moni keskustelu ja netistä löytyvä esimerkki käsitteli aikaisempaa 6 versiota.
Sovellus 2: JavaServer Faces 2 + PrimeFaces
JSF 2 eli Java Server Faces on Javan spesifikaatio Web-sovellusten komponenttipohjaisten käyttöliittymien rakentamiseen ja osa Java Enterprise Editionia. Sovellus koostuu HTML:ää ja Facelet-tageja sisältävistä -XML-tiedostoista, jotka kehys prosessoi ja tarjoilee käyttäjälle. JSF:n 2 -versio julkaistiin 2009 ja tuorein 2.2. versio huhtikuussa 2013.
Sovelluksen ulkoasun rakentaminen ei juurikaan eroa normaalista Web-kehityksestä, joten HTML ja CSS -osaaminen ovat tarpeen siistin käyttöliittymän aikaansaamiseksi. JSF:n tarjoamia ominaisuuksia ja komponentteja voi laajentaa muun muassa PrimeFaces tai RichFaces -komponenttikirjastoilla, joilla käyttöliittymään saa enemmän kilkettä ja parempaa käytettävyyttä.
JSF 2:n oli sovelluskehitysalustana suhteellisen tuttu, sillä olin käyttänyt sitä pienen prototyypin tekemiseen pari vuotta sitten, eikä vuosien aikana mikään ollut juuri muuttunut. Täten uutena asiana oli enemmänkin PrimeFaces -käyttöliittymäkomponenttien käyttäminen. Yksinkertainen kuvaselaaja syntyi lähes yhtä helposti kuin Vaadinta käytettäessä, vaikka osa toiminnoista piti koodata sivupohjiin ja osa Javan puolelle ja käyttöliittymän dynaamisessa päivittämisessä oli alkuun pieniä ongelmia. PrimeFaces tarjosi kattavan listan erilaisia käyttöliittymäkomponentteja ja niiden ulkoasua oli helppo muokata jQuery UIn ThemeRollerin avulla.
Sovellus 3: Apache Wicket 6
Apache Wicket on avoimen lähdekoodin komponenttipohjainen Web-sovelluskehys Javalle. Lyhyesti kuvattuna Wicket on kuin yhdistelmä Vaadin ja JSF -kehyksiä, sillä käyttöliittymä rakentuu HTML-sivupohjista ja tapahtumiin reakoivista komponenteista. Sovelluksen ulkoasun voi täten rakentaa HTML:llä ja lisätä toiminnot Javan puolelta juurikaan koskematta sivupohjiin. Wicket 6 julkaistiin syksyllä 2009.
Wicket ei JSF:n tavoin tarjoa peruskomponentteja enempää, mutta käyttöliittymän toiminnallisuuksien laajentamiseen voi käyttää useita jQuery-pohjaisia komponenttikirjastoja kuten Wicket – jQuery UI, jqwicket ja wiquery. Vaikka komponenttikirjastoja on useita, ovat niiden heikkous ajantasaisuus (esim. jqwicket vain 1.5 versiolle), eivätkä ne eivät ole aivan yhtä kattavia kuin mitä Vaadin tai JSF:n kirjastot tarjoavat.
Ideana HTML-sivupohjat ja työpöytäsovellusmaisen tapahtumapohjaisuuden yhdistelmä on hyvä, mutta jotenkin kokonaisuus ei ole yhtä miellyttävä kuin JSF 2 tai Vaadin. Kehittäjän kannalta Wicketissä on monia hyviä puolia, kuten toimintojen liittäminen komponentteihin ja niiden uudelleenkäyttö on kätevämpää kuin JSF 2:ssa ja sovelluksen kehittäminen on kohtalaisen selkeää, kun toiminnot ovat yhdessä paikassa eikä sekä sivupohjassa että Java-luokassa kuten JSF 2:ssa. Itseäni eniten Wicketin osalta harmittaa kuitenkin kattavien komponenttikirjastojen puute, joka tekee käyttöliittymän toiminnallisuuksien rakentamisesta hieman työlästä, kun asiat joutuu toteuttamaan itse. Yksinkertaista kuvaselaajaakin varten piti tehdä muutamia lisäluokkia, eikä valmista loputtomasti skrollaavaa taulukkokomponenttia ollut saatavilla.
Yhteenveto
Kolme Java EE -käyttöliittymäkehystä ja kolme erilaista tapaa lähestyä käyttöliittymän rakentamista. Vaadin 7 tarjosi nopeasti siistiä Swing-tyylisesti komponenttien kera, JSF 2 + PrimeFaces luotti perinteisempään komponenttipohjaiseen HTML:ään ja tageihin ja Wicket 6 oli joukosta hieman työläämpi komponenttipohjainen ratkaisu. Kokonaisuutena Vaadin on selkeästi yhtenäisin paketti ja sekä JSF:n että Wicketin kanssa on hieman enemmän askarreltavaa, joka toki myös tarjoaa vapauksia.
Jokaisella kehyksellä sai aikaan suhteellisen pienellä vaivalla yksinkertaisen imgur-kuvaselaajan haun kera. Jos pitäisi saada nopeasti valmista, niin kenties toteuttaisin sen Vaatimella, jolloin aikaa ei mene niin paljoa käyttöliittymän kanssa taisteluun. Valmiiden sivupohjien kanssa JSF 2:llakin syntyy koodia nopeasti. Kaikissa kolmessa on kyllä omat jekkunsa ja ”ongelmansa” muun muassa sessioiden koon ja selaimen kuormittavuuden osalta.
Seuraavaksi tutustumislistalla JVM:ssä toimivien kehysten osalta on ehkä Spring MVC, Play Framework, Grails ja puhdas GWT. Lisäksi Node.js:llä toteutettu kuvaselain on jo osittain tehty.
Kiitoksia ehdotuksesta, pitää laittaa ne listan jatkoksi. UI:n ja backendin riippumattomuus avaa paljon mielenkiintoisia mahdollisuuksia ja kysymyksiä sovelluskehitystä ajatellen. JavaScript ei ole vielä aivan ydinosaamistani, joten pitää miettiä miten HTML5+JavaScript -lähestymistä vertailisi rehdisti Javaan.
Voisit ottaa vertailuun myös HTML5-Javascript-pohjaisen ratkaisun. Esimerkiksi jQuery UI yhdessä Backbone.js, Knockout.js tai Angular.js:n kanssa joka juttelisi Spring-backendin kanssa JSON-apin kautta. Mielenkiintoista tässä lähestymistavassa olisi mm. JSON-rajapinnan tuoma teknologiariippumattomuus UI:n ja backendin välillä, mutta onko toteutus kuinka paljon työläämpi.