1. HTML5 + PhoneGap
un esempio concreto
Massimo Grava
gravam@futurasi.com

2. 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)

3. LO SVILUPPO HTML5 IN TEORIA

4. Architettura Unico3 Mobile
UI
(HTML5, CSS3, ST2 Components)
Business Logic Libraries
Phonegap.js
(JS) (Sencha Touch 2)
Browser Local
AJAX calls Storage
(webview)
Native Code Phonegap
(Java, Objective C) plugins
Phone OS
(iOS, Android)

5. Le librerie di interfaccia
Libraries
(Sencha Touch 2)
Forniscono componenti UI
✔ elaborati, gradevoli e touch-friendly
✔ relativamente facili da programmare
✔ facilmente temizzabile
✔ aspetto e funzionamento uniforme

6. QUELLO CHE È STATO IN REALTÀ

7. 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.

8. 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à.

9. Esemplare di form
complesso in cattività

10. 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.

11. 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, …)

12. 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ù.

13. La stampa in mobilità
Requisito: stampare moduli come questo
con stampanti portatili come queste

14. 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

15. La stampa in mobilità
Risultato
http://www.youtube.com/watch?v=bv9OSltVL
uQ&feature=plcp

16. grazie per l’attenzione
per informazioni
gravam@futurasi.com