Smau milano 2012 arena social media massimo-grava

16
HTML5 + PhoneGap un esempio concreto Massimo Grava [email protected]

Transcript of Smau milano 2012 arena social media massimo-grava

Page 1: Smau milano 2012   arena social media massimo-grava

HTML5 + PhoneGap un esempio concreto

Massimo Grava [email protected]

Page 2: Smau milano 2012   arena social media massimo-grava

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)

Page 3: Smau milano 2012   arena social media massimo-grava

LO SVILUPPO HTML5 IN TEORIA

Page 4: Smau milano 2012   arena social media massimo-grava

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

Page 5: Smau milano 2012   arena social media massimo-grava

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)

Page 6: Smau milano 2012   arena social media massimo-grava

QUELLO CHE È STATO IN REALTÀ

Page 7: Smau milano 2012   arena social media massimo-grava

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.

Page 8: Smau milano 2012   arena social media massimo-grava

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

Page 9: Smau milano 2012   arena social media massimo-grava

Esemplare di form complesso in cattività

Page 10: Smau milano 2012   arena social media massimo-grava

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.

Page 11: Smau milano 2012   arena social media massimo-grava

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

Page 12: Smau milano 2012   arena social media massimo-grava

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

Page 13: Smau milano 2012   arena social media massimo-grava

La stampa in mobilità Requisito: stampare moduli come questo

con stampanti portatili come queste

Page 14: Smau milano 2012   arena social media massimo-grava

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

Page 16: Smau milano 2012   arena social media massimo-grava

grazie per l’attenzione

per informazioni [email protected]