Smau milano 2012 arena social media massimo-grava

432 views
333 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
104
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Smau milano 2012 arena social media massimo-grava

  1. 1. HTML5 + PhoneGap un esempio concreto Massimo Grava gravam@futurasi.com
  2. 2. Requisiti Unico3 Mobile è una app per i tecnici dellamanutenzione 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. 3. LO SVILUPPO HTML5 IN TEORIA
  4. 4. Architettura Unico3 Mobile UI (HTML5, CSS3, ST2 Components) Business Logic Libraries Phonegap.js (JS) (Sencha Touch 2) Browser LocalAJAX calls Storage (webview) Native Code Phonegap (Java, Objective C) plugins Phone OS (iOS, Android)
  5. 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. 6. QUELLO CHE È STATO IN REALTÀ
  7. 7. Performance UIProblema: 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. 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. 9. Esemplare di formcomplesso in cattività
  10. 10. Performance UISoluzione (nostra):✔ Eliminare dove possibile uso di immagini disfondo, trasparenze, ombre e angoli arrotondatiCSS3.✔ Riscrivere le parti più pesanti come i grandiform in «HTML scritto a mano»Compromesso efficace tra velocità di scritturae performance. CSS differenziati iOS/Android.
  11. 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. 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. 13. La stampa in mobilitàRequisito: stampare moduli come questo con stampanti portatili come queste
  14. 14. La stampa in mobilità Stampanti non compatibili AirPrint, su Apple solo Wi-Fi Non è stato possibile supportare iOSSituazione 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. 15. La stampa in mobilità Risultatohttp://www.youtube.com/watch?v=bv9OSltVLuQ&feature=plcp
  16. 16. grazie per l’attenzione per informazioni gravam@futurasi.com

×