L'altro giorno vi ho anticipato che mi sarei cimentato nella creazione di un prototipo utilizzando App.js. Nello specifico il prototipo serve per testare l'affidabilità di due caratteristiche di HTML5. Le Geolocation API e le Application Cache API. Non entrerò nel dettaglio di queste API, se non sapete cosa sono vi basta sapere che Geolocation permette di ottenere la posizione del dispositivo, mentre Application Cache permette di accedere alla vostra applicazione anche quando il dispositivo è offline. Se non si è ancora capito stiamo parlando di API utilizzabili in un'applicazione web ed essendo, a mio avviso, due caratteristiche molto interessanti per lo sviluppo di applicazioni mobile, vale davvero la pena tenerle sott'occhio.

7 giorni prima....

Mi chiedono di sviluppare un applicazione mobile web... deve funzionare anche offline e deve accedere alla posizione GPS del dispositivo. Ansia e angoscia devastano la mia mente, ok esistono le API ma quanto sono affidabili? Trovo delle demo in rete, non basta, non abbassano il mio livello di paranoia. Quanto sono accurate le coordinate? Come gestisco le risorse offline? E con le risorse esterne come la mettiamo? Mille dubbi mi assalgono. Ok devo sviluppare un prototipo che utilizzi a pieno le API. Porc... devo fare pure la parte grafica!!!

Un buon punto di partenza

Da buon purista mi sono concentrato prima sulla struttura del prototipo e cosa mi caccia il buon motore di ricerca? App.js , vediamo... proviamo...interessante!! Vi dico subito che App.js è un framework leggero e minimale per creare semplici pagine responsive e con componenti grafici di tipo touch. Inoltre le pagine possono essere controllate con un sistema davvero molto semplice.
Partiamo dalle pagine ovvero le view della nostra applicazione:

<div class="app-page" data-page="home">
      <div class="app-topbar">
        <div class="app-title">Prototipo</div>
      </div>
      <div class="app-content"> ... </div>
</div>

 <div class="app-page" data-page="page2">
      <div class="app-topbar">
        <div class="app-button left" data-back data-autotitle></div>
        <div class="app-title">Page 2</div>
      </div>
    <div class="app-content"> ... </div>
</div>

Davvero molto intuitivo e semplice non credete? Bene ho creato due pagine ora se devo ottenere il riferimento alla home page per creare un po' di logica dietro i pulsantini, App.js mette a disposizione una funzione controller che può essere usata in questo modo:

App.controller('home', function (page) {
   //page is a simple DOM element referred by the home page of  data-page attribute
}

Non mi resta che caricare la mia applicazione specificando la pagina iniziale:

 App.load('home');

Templating, eventi touch compatibili con i moderni browsers, navigation stack, possibilità di creare dei veri e propri controller delle funzionalità della mia applicazione e ciliegina sulla torta... Data Binding:

var contact = { firstName : 'Bruce' , lastName : 'Lee' };
App.load('contact', contact);

App.js mette a disposizione anche delle fluidissime transizioni per creare delle applicazioni web molto simili ad applicazioni native.

Solo per prototipi?

Non credo che App.js si possa considerare un vero e proprio framework, e non è adatto per sviluppare applicazioni scalabili. E' sicuramente un ottimo strumento per ottenere per dare una struttura semplice alle vostre applicazioni mobile. Utilizzato insieme ad altri framework come AngularJs o VueJs e jQuery oppure Zepto si può andare oltre lo sviluppo di semplici prototipi diventando molto utile per sviluppare applicazioni più complesse con una base davvero semplice. Intanto ho terminato il mio prototipo, nel prossimo articolo vi darò più dettagli sul risultato dei test che andrò a fare su Geolocation e Application Cache. Nel frattempo potete dare un'occhiata al codice che ho pubblicato su github



  • submit to reddit
blog comments powered by Disqus