HTML5 + PhoneGap un esempio concreto

Massimo Grava gravam@futurasi.com

Requisiti

Unico3 Mobile è una app per i tecnici della manutenzione impianti termici che deve essere

✔ Disponibile su Android e iOS

✔ Editing di moduli complessi

✔ Stampa in più formati (A4, rotolo 4 in.)

✔ Funzionamento offline

✔ Time-To-Market limitato (4-10 mesi)

✔ Risorse limitate (1.5 anni/uomo)

LO SVILUPPO HTML5 IN TEORIA

Architettura Unico3 Mobile

Phone OS (iOS, Android)

Native Code (Java, Objective C)

Browser (webview)

Business Logic (JS)

Libraries (Sencha Touch 2)

Phonegap.js

UI (HTML5, CSS3, ST2 Components)

AJAX calls

Phonegap plugins

Local Storage

Le librerie di interfaccia

Forniscono componenti UI

✔ elaborati, gradevoli e touch-friendly

✔ relativamente facili da programmare

✔ facilmente temizzabile

✔ aspetto e funzionamento uniforme

Libraries (Sencha Touch 2)

QUELLO CHE È STATO IN REALTÀ

Performance UI

Problema:

le performances di rendering HTML

non sono uguali in tutte le piattaforme.

Performance browser Android molto inferiori rispetto a browser iOS.

Problema principale fluidità scroll touch.

Le librerie UI nonostante l’ottimizzazione generano un html piuttosto pesante!

(diversi livelli di <div> nesting, uso funzioni CSS3 per ombre, …)

Spesso questo mette in crisi Android, specialmente per form complessi.

Le performance di scrolling talvolta sono

ridotte sotto i limiti dell’usabilità.

Esemplare di form complesso in cattività

Performance UI

Soluzione (nostra):

✔ Eliminare dove possibile uso di immagini di sfondo, trasparenze, ombre e angoli arrotondati CSS3.

✔ Riscrivere le parti più pesanti come i grandi form in «HTML scritto a mano»

Compromesso efficace tra velocità di scrittura e performance. CSS differenziati iOS/Android.

LocalStorage: i limiti

LocalStorage = area di memoria persistente* accessibile anche offline da un sito/app web.

Cinque megabytes basteranno a chiunque!

(in realtà non sono 5MB davvero ma la metà perché lo storage avviene in UTF e un carattere occupa 2 Bytes) Vabbè, due mega e mezzo basteranno a chiunque!

oppure no? E se non bastano?

Avevamo bisogno di memorizzare offline una grande quantità di dati > 2.5 MB

(tabelle di rifermento comuni, marche, modelli, …)

LocalStorage: un trick Dati memorizzati in formato JSON (+ XML)

JSON (XML ancora di più) è un formato verboso

Idea: usare tecniche di compressione

Le CPU degli SmartPhone sono in grado di (de)comprimere in tempi «umani».

Librerie di compressione in JS (deflate)

Dati ridotti dell’85% o più.

La stampa in mobilità Requisito: stampare moduli come questo

con stampanti portatili come queste

La stampa in mobilità Stampanti non compatibili AirPrint, su Apple solo Wi-Fi

Non è stato possibile supportare iOS

Situazione Android: manca un’infrastuttura driver di stampa a livello OS.

Per ricorso a programma di stampa

proprietario (PrinterShare) con driver propri.

Per disponibile driver proprietario Solo supporto stampa «scontrino» e bitmap

La stampa in mobilità

Risultato

http://www.youtube.com/watch?v=bv9OSltVLuQ&feature=plcp

grazie per l’attenzione

per informazioni gravam@futurasi.com