SPA-portletin ominaisuuksia

SPA-sovellus tarkoittaa, että samaan selainikkunaan ladataan uusi sisältö lataamatta koko websivua uudestaan. Sivun lataus on laajempi operaatio kuin Ajax-toiminto, jossa kyse on vain datan hakemisesta palvelimelta ja sijoittamisesta sivulle sitä uudelleenlataamatta. Termi SPA (”Single Page Application”) tulee siis yhdestä kehyksestä, jossa näytetään useita sivuja.

SPA sivujen lataamiseen ja Ajax tietojen hakuun, tämä on jo nykypäivää. Facebook, Gmail, LinkedIn, SportsTracker, Instagram jne. ovat kaikki SPA-sovelluksia. SPA ja Ajax yhdessä takaavat selainsovellukselle saman käyttömukavuuden kuin ns. desktop-sovellukselle. Myös toteuttajan kannalta sovelluksen laadukas ja kustannustehokas tekeminen helpottuu. Painopiste siirtyy puhtaisiin HTML-käyttöliittymiin palvelinpuolen alustojen sijaan. MVC-mallin kontrolleriosio siirtyy selaimen Javascriptiin palvelinpään koodista. Palvelinpäähän jää tilaton businesslogiikan ja tietokannan hallinta, joita käytetään yleisimmin RESTful-palvelujen kautta. Tilattomuus helpottaa ja yksinkertaistaa merkittävästi palvelinpään toteutusta. Sovelluksen loogiset tasot ovat hyvin erillään toisistaan.

SPA-portletti on tavallinen portletti, johon on lisätty SPA-ominaisuus. Tämän seurauksena sovelluksen data haetaan pelkästään Ajax-toiminnolla. Sepät ovat lähteneet tässäkin yksinkertaisten ratkaisujen hakemisesta. Suosittelemme JSP-sivuja näyttötekniikkana, ja GenericPortlet-luokkaa portlettiluokan yläluokkana. Näyttökomponentteja voi halutessaan käyttää puhtaan HTML:n sijasta, kunhan ne sopivat käytettävän MVC-frameworkin kanssa yhteen ja toimivat myös portleteissa. Näyttökomponenttikirjastoja, joita yleisesti käytetään AngularJS:n kanssa, ovat ainakin Angularin omat UI-komponentit, Ionic-framework ja Onsen UI. Näiden kirjastojen soveltuvuus portletteihin pitää tarkistaa tapauskohtaisesti.

SPA-portletti sisältää seuraavia ominaisuuksia:
– sen pitää periä jokin jokin portlettiluokka palvelinpäässä. Sepillä se on siis GenericPortletista peritty.
– samaan portletissa olevaan kehykseen pitää voida ladata dynaamisesti useita sivuja
– sivunvaihto tai Ajax- tai muu toiminta eivät saa aiheuttaa portaalisivun eikä myöskään kyseisen portletin uudelleenlatautumista
– selaimen history-toiminnon (back- ja forward-painikkeet) tulee toimia, ainakin sovelluksen tarpeisiin nähden riittävän hyvin
– portletin pitäisi olla mielellään ns. ”instanceable” -tyyppisiä, joka tarkoittaa sitä, että sama portletti voitaisiin sijoittaa useaan kertaan samalle sivulle. Käytännössä tämä on ongelma SPA-portletille. Onneksi ne ovat jo määritelmänsä vuoksi (useita sivuja) laajoja, ja tyypillisesti ”instanceable” -portletit ovat yksinkertaisia.

On muistettava, että portaalisivu on yksi websivu, jonka osia portletit ovat. Tämän vuoksi html-, head- ja body-tagit ovat kiellettyjä yksittäiselle JSP-sivulle, ne on varattu itse portaalisivulle. Jos samaa portlettia on useaan kertaan, miten tehdään niistä toimintojen kannalta riittävän uniikkeja, HTML-elemettien ja Javascript-toimintojen suhteen? Javascript-koodi on yhteistä kaikille portleteille, metodeineen ja globaaleine muuttujineen.

AngularJS mahdollistaa SPA-tyylisten websovellusten tekemisen. Sama tekniikka toimii suoraviivaisesti myös portleteissa. SPA on toteuttavissa myös jQueryn avulla ilman mitään MVC-frameworkeja. Mutta mitään tyydyttävää yleistä ratkaisua portlettien ”instanceable” -ongelmaan sepillä ei ole. On mahdollista, että jossain muussa js-kirjastossa tämä ongelma on ratkaistu. Liferay kehittää uusinta palvelinversiotaan (Liferay 7) SPA-toiminta tähtäimessään, ja heidän ratkaisussaan käytetään SennaJS-kirjastoa.

Odotamme mielenkiinnolla mitä mahdollisuuksia tämä tuo SPA portletien kehittämiseen. Liferay lähtee versiossa 7 siitä, että koko portaalisivu on SPA sovellus.

Seuraavassa blogissa läpikäymme jQuerylla toteutettavan SPA-portlettiratkaisun tekniset ratkaisut.