Smau milano 2012 arena social media massimo-grava
-
Upload
smau -
Category
Technology
-
view
298 -
download
0
Transcript of Smau milano 2012 arena social media massimo-grava
HTML5 + PhoneGap un esempio concreto
Massimo Grava [email protected]
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 [email protected]