Web App mobile con jsf2: che framework usare?

Quando si parla di sviluppo per dispositivi mobile (in particolare Android e iOs) ci troviamo sempre di fronte a un dilemma: sviluppiamo una applicazione nativa in Java o Objective C o una web app ottimizzata per il mobile? La risposta giusta non esiste, ma se abbiamo già una web app sviluppata con jsf la scelta più immediata è quella di usare questo framework anche per sviluppare la versione mobile.

Jsf 1.0 nel 2004: i renderkit

Le prime versione di jsf erano rivoluzionarie per diversi motivi, uno di questi era che non si basavano solo su html, potevano supportare anche dei linguaggi modernissimi come wap e wml che erano usati dai dispositivi mobile del tempo. Sembrava una magia, semplicemente cambiando renderkit la tua pagina desktop poteva diventare mobile e adattarsi a qualunque dispositivo! Col tempo più che una magia si è rivelata una favola, i motivi sono almeno due:

  • svincolare jsf dal codice html è quasi impossibile a meno di non usare solo costrutti base;
  • le interfacce per un dispositivo mobile (a meno che non siano banali) devono essere ripensate quasi totalmente per adattarsi meglio a un display piccolo.

Jsf 2.0 oggi: ICEmobile vs PrimeMobile vs RichFaces Mobile

Oggi tutti i framework basati su jsf hanno dei componenti per sviluppare web app mobile, ovviamente si basano tutti su codice html e sullo stesso renderkit usato normalmente. Vediamo alcuni esempi navigando sulle demo disponibili online.

ICEmobile

ICEsoft ha sviluppato ICEmobile, l’equivalente del famoso framework ICEfaces ottimizzato per il mobile. Nella demo possiamo vedere tutti i componenti utilizzabili: questo framework contiene tutto il necessario per creare una web app mobile. Due componenti particolarmente utili sono le Lists e i FieldSet che permettono di creare facilmente i layout più utilizzati nelle app mobile.

Una feature interessante è ICEmobile Containers, una app nativa disponibile per iOS, Android e Blackberry che permette di wrappare una web app facendola diventare una app installabile sui device. I vari containers mettono a disposizione della web app anche del codice JavaScript multipiattaforma, che permette di interagire con il device per operazioni solitamente non disponibili nelle web app (audio, camera, video, …). In pratica una buona alternativa a PhoneGap nel caso di applicazioni sviluppate con ICEmobile.

PrettyMobile

Anche PrimeFaces ha sviluppato il proprio framework per dispositivi mobile, il nome non poteva non essere che PrimeMobile. Nella demo possiamo vedere lo showcase di tutti i componenti disponibili e diverse applicazioni dimostrative. Tutti i sorgenti degli esempi sono disponibili su Google code: per esempio l’applicazione che permette di scrivere delle note è disponibile in questo repository svn.

PrimeMobile è basato su JQuery Mobile, una scelta molto saggia vista l’altissima qualità di questo framework javascript.

RichFaces mobile

Dalla versione 4.1 di RichFaces (e ovviamente anche nella 4.2) è presente il supporto per scrivere applicazioni mobile. Nello showcase possiamo vedere il framework all’opera, in realtà non ci sono molti componenti ottimizzati per il mobile, ma solo il porting di quelli esistenti. Ci saremmo aspettato un porting un po’ meno brutale, alcuni componenti come la rich:dataTable sono indispensabili per una normale web app, ma si adattano male a una web app mobile. Anche la documentazione non è poi così abbondante, aspettiamo le prossime release per vedere l’evoluzione di questo framework.

Hello mobile world con RichFaces 4.1

Nel caso in cui abbiate già una webapp esistente con RichFaces la scelta più ovvia è quella di usare questo framework anche per una versione mobile. La pagina da cui iniziare per chi si avvicina a RichFaces mobile è Getting started with mobile RichFaces in cui è spiegato come arrivare a una pagina di Hello World. Il modo più semplice per creare un nuovo progetto è usare l’archetype richfaces-archetype-simpleapp di Maven e specificare true come valore della proprietà mobile-optimized. Facendo così sarà creato un progetto funzionante in cui potremmo fare le nostre prove e creare le nostre pagine mobile. Se vogliamo una pagina da cui partire possiamo dare un’occhiata ai sorgenti dello showcase disponibili su GitHub.

Conclusioni

Finisce qui questa carrellata sulle versioni mobile dei vari framework JSF, abbiamo visto velocemente cosa mettono a disposizione e ognuno meriterebbe un post di approfondimento! L’idea che mi sono fatto personalmente è che ancora questi framework non sono perfetti e che sicuramente miglioreranno nelle prossime versioni. Nel caso di una web app esistente che già usa JSF conviene sicuramente usarli per riusare codice, nel caso di progetti nuovi forse conviene sporcarsi le many in JavaScript (ovviamente dopo aver letto il nostro tutorial!) e usare direttamente JQuery Mobile.

Un’altra considerazione da fare è che JSF aiuta tantissimo nel fare applicazioni di data entry, infatti il binding insieme con i validator e converter semplifica molto lo sviluppo di questo tipo di applicazioni. Lo svantaggio è una certa pesantezza delle pagine generate, soprattutto se salviamo il ViewState lato client. Le applicazioni mobile sono solitamente non di data entry e devono essere leggere per la memoria e la banda limitata dei dispositivi mobile, quindi ha senso usare JSF per queste web app?

Fabio Collini

Software Architect con esperienza su piattaforma J2EE e attualmente focalizzato principalmente in progetti di sviluppo di applicazioni Android. Attualmente sono nel team Android di Cynny, ci stiamo occupando dello sviluppo dell'app Morphcast. Coautore della seconda edizione di Android Programmazione Avanzata e docente di corsi di sviluppo su piattaforma Android. Follow me on Twitter - LinkedIn profile - Google+

  • mauro

    scusa ma poteresti spiegarmi come fare a rendere una applicazione jsf2 visualizzabile sia su android che in versione web desktop? non vorrei creare un 0altra applicazione, in quanto vorre iche l’utente potesse fare uno switch tramite un pulsante dalla versione mobile a una versione normale e viceversa .
    Invece se scrivessi una applicazione a parte , per la mobile , potrei farne il redirect, ma si perderbbero i dati i nsessione , in quanto sarebbe relativa a un’altra applicazione.

    VOrre iutilizzare Primefaces e primefaces mobile.
    Ho gia cercato sul sito di primefaces e su google ma non ho trovato lumi …..
    Grazie per l’attenzione .
    Mauro

    • Fabio Collini

      Ciao, esistono sono vari metodi per fare una applicazione web e nello stesso tempo mobile. Dipende molto dal tipo di applicazione web e da quante differenze ci devono essere fra la versione web e quella mobile. Una soluzione è quella di creare un template responsivo che si adatta in automatico, un’altra è quella di stravolgere il design dell’applicazione nel caso in cui il browser sia quello di uno smartphone. In questo secondo caso di solito viene effettuato un controllo lato server sullo user agent del browser, in base a questo viene fatta vedere una versione piuttosto che un’altra. Un esempio di classe Java da usare per capire lo user agent è questa https://gist.github.com/bryanjswift/318237
      Ciao, Fabio

  • Fabio Collini

    Ciao, ci sono vari modi per fare una applicazione web e nello stesso tempo mobile. Dipende molto dal tipo di applicazione web e da quante differenze ci devono essere fra la versione web e quella mobile. Una soluzione è quella di creare un template responsivo che si adatta in automatico, un’altra è quella di stravolgere il design dell’applicazione nel caso in cui il browser sia quello di uno smartphone. In questo secondo caso di solito viene effettuato un controllo lato server sullo user agent del browser, in base a questo viene fatta vedere una versione piuttosto che un’altra. Un esempio di classe Java da usare per capire lo user agent è questa https://gist.github.com/bryanjswift/318237
    Ciao, Fabio