HTML5, Javascript e CSS permettono, da soli, di realizzare applicazioni mobile. Tuttavia, utilizzare un framework è indispensabile per incrementare la produttività dello sviluppatore e la robustezza delle soluzioni, nonchè per risolvere in modo trasparente diverse difficoltà.
In questo contesto esistono molte alternative, in buona parte mutuate dal panorama web. In questa guida ne abbiamo scelte alcune con l'idea non tanto di presentare una carrellata di metodi differenti per fare la stessa cosa, quanto piuttosto nell'ottica di accompagnare il web designer da un modus operandi a lui più familiare verso strumenti nuovi, nati appositamente per lo sviluppo su dispositivi mobili.
Bootstrap
Il primo ambiente di cui parleremo è Bootstrap. La sua diffusa conoscenza nell'ambiente del web design lo rende uno strumento molto agevole per iniziare a creare interfacce opportunamente accattivanti. Questo framework permette di velocizzare l'approccio allo sviluppo dell'app, offrendo poi la di personalizzare i dettagli in base alle proprie necessità.
L'utilizzo delle sue funzionalità richiede l'uso di jQuery, quindi includeremo sin da subito questa libreria che, al contempo, ci affiancherà nell'implementazione delle dinamiche di funzionamento.
L'uso di Bootstrap, d'altro canto (e a differenza di altri framework che useremo), non dà alcun supporto alla pacchettizzazione ed al rilascio dell'app mobile così come ce l'aspettiamo.
jQuery Mobile
jQuery Mobile è una tappa obbligata del nostro percorso. Ha molti tratti in comune con App Framework: consiste in una libreria che si integra alla perfezione in HTML5, per cui il designer può permettersi di integrarla gradualmente nel proprio lavoro senza doversi cimentare da subito con la programmazione. Nasce da jQuery ed è probabilmente uno degli ambienti più diffusi nello sviluppo di app ibride. Come jQuery, vanta una grande comunità che lo sostiene ed una documentazione piuttosto ricca. È inoltre facilmente estensibile mediante plugin. Il suo aspetto grafico può risultare un pò standardizzato: ciò non toglie, però, che i temi possano essere personalizzati a piacimento con gli strumenti ufficiali messi a disposizione.
Apache Cordova
Apache Cordova è una soluzione molto più complessa delle precedenti. Bootstrap, App Framework e jQuery Mobile sono strumenti orientati a CSS o Javascript che vengono integrati in HTML5 per offrire quelle peculiarità utili al mobile. Cordova, versione "libera" di PhoneGap, è invece una vera e propria
architettura all'interno della quale la nostra applicazione viene calata. Come si è accennato nelle lezioni precedenti, nell'ambito di Intel XDK useremo Cordova per effettuare il packaging della nostra applicazione. Si tratta infatti di un contenitore nativo che offre una WebView (un controllo grafico che lavora come un browser) all'interno della quale girerà la nostra applicazione web (scritta in HTML, CSS e JavaScript). Oltre alla capacità di "impacchettamento", Cordova offre anche uno strato di comunicazione con il sistema operativo mobile sotto forma di API, tramite cui si può attivare ogni funzionalità del dispositivo ospite.
Ionic Framework
A completamento del percorso fatto sinora vedremo Ionic Framework. Questo non nasce per sostituire gli altri framework esistenti, ma per fondersi con loro. Essendo arrivato dopo gli altri, raccoglie un insieme di linee guida e si focalizza intorno alle problematiche del mobile scegliendo di offrire un approccio rapido all'impostazione dell'applicazione. Tra gli strumenti che sfrutta troviamo Angular JS, un framework Javascript che offre un'architettura Model View Controller all'applicazione, e SASS per la personalizzazione degli stili. L'ostacolo che si incontra nell'iniziare ad usare una soluzione così completa è il livello di competenze richiesto: è necessaria una conoscenza almeno sufficiente di AngularJS.
>> Leggi la Guida Ionic Framework
Alternative
Fuori dal percorso che abbiamo costruito per questa guida restano tantissimi framework molto interessanti. Di seguito ne nomineremo solo alcuni, e ci limiteremo a parlare di quelli orientati ad HTML, CSS e JavaScript.
Una prima alternativa che si può utilizzare se si vuole un buon framework CSS è Topcoat, valida alternativa a Bootstrap per la realizzazione rapida di interfacce. Si tratta di uno strumento piuttosto buono, nato sotto l'egida di Adobe, e destinato sia al web che al mobile, il cui primo obiettivo è curare al massimo le prestazioni e la reattività dell'interfaccia. Rispetto a Bootstrap ha il vantaggio di essere un framework CSS-only, quindi non richiede dipendenze esterne come jQuery. Per la nostra guida abbiamo scelto però il primo tool, peraltro più diffuso nel panorama professionale.
Considerato poi che la base di partenza della guida è il linguaggio HTML5, abbiamo escluso framework eccessivamente orientati a Javascript, o sottoposti a licenze commerciali. Tra questi si possono citare Sencha Touch e Kendo UI. Il primo è basato su Ext.js ed è dotato di una struttura Model View Controller che separa bene i vari strati dell'applicazione. È ricco di componenti built-in ed è "backend agnostic", rimanendo libero di dialogare con strutture di fornitura dati differenti. A differenza dei framework fin qui citati, Sencha Touch è un prodotto commerciale, sottoposto a licenza sia per l'utilizzo della piattaforma che per la fruizione della documentazione. Kendo UI si basa, invece, su jQuery, ed offre la possibilità di sviluppare e personalizzare rapidamente le interfacce. Anch'esso è sottoposto a licenza commerciale.
Altro caso è Titanium. Offre moltissimi vantaggi presentando una solida architettura MVC con un'ottima capacità di soluzione delle problematiche del mobile.
Infine App Framework è una libreria Javascript realizzata da Intel, e pertanto risulta uno dei preferiti nella integrazione con l'IDE Intel XDK. È ricca di funzionalità e di widget per la realizzazione di interfacce e non richiede un immediato utilizzo della programmazione.
Un aspetto molto interessante è la possibilità di adattare il tema a quelli dei sistemi operativi mobile dominanti, risolvendo così uno delle principali pecche delle app ibride: la disomogeneità rispetto ai temi grafici delle app native. Una sua interessante caratteristica è la ricchezza di funzionalità messe a disposizione a fronte della ristretta quantità di codice richiesta.