HTML5, il lato client della forza...

Transcript

1 HTML5, il lato client della forza... Marco Vito

2 /usr/bin/whoami Marco Vito Moscaritolo Sviluppatore web server side con tendenze a testare tutte le nuove tecnologie che si trovano nella rete con particolare interesse verso le tecnologie mobile (altrimenti che ci faccio qui?) Twitter: Mail: marco@agavee.com

3 Tanti device, tanti OS differenti (e per ognuno più versioni), e noi? IMPAZIAMO!

4 usa la forza

5

6 HTML5 è crossplatform... figo! Qualche cosa ci viene in aiuto, HTML5 è una definizione che verosimilmente possiamo considerare standard (e anche i vendor di device se ne sono resi conto)! HTML5 non è solo quello che si vede, ma (sopratutto?) quello che NON si vede

7 Nel client HTML5, quindi tutti i fantastici tag che conosciamo, ma non ci interessa questo (in questo caso!) Javascript non è più un abbellimento, sta diventando sempre più utile (e fondamentale) per realizzare le webapp - WebSocket - WebStorage - WebSQL (R.I.P. ) - IndexedDB - Manifest file (File API, WebWorkers, ci sono ma nel mobile per ora non hanno molto senso/interesse)

8 Nota: Parliamo di WebApp, ma nel caso specifico di siti/servizi web fruibili da mobile

9 Una webapp per il mobile, ok......come faccio? Ottimizzo la mia applicazione corrente per funzionare su dispositivi mobile Creo un applicazione apposita per la versione mobile

10 Applicazione ottimizzata Tutto viene sempre fornito al browser che eventualmente lo presenterà in maniera differente. Non fornisco un esperienza d'uso necessariamente ottimizzata Devo mediare con l'interfaccia classica della mia webapp

11 Applicazione ad-hoc Posso replicare l'interfaccia del sistema nell'applicazione (esperienza utente più simile a quella calssica del device) Posso modificare il comportamento dell'applicazione in funzione del device con cui accedo (idem come sopra)

12 Applicazione custom è meglio

13 Browser detection Riconoscere il browser che sta arrivando sul sito della webapp ed eventualmente redirigerlo nella sezione/sito apposito mobi.mysite.tdl

14 WebSocket (1)

15 WebSocket (2) Sul client Usabili fin da ora Supportati su diversi device mobile (Android, ios) var socket = new io.socket(null { port: 8080, remembertransport: false }); socket.connect(); Permettono comunicazioni in tempo reale verso/da server (servizi in push) Facili (proprio FACILI) da implementare con alcune librerie come socket.on('message', function(obj){ // Do some stuff }); socket.on('connect', onconnectfn); socket.on('disconnect', ondisconnectfn); socket.on('reconnect', onreconnectfn); //...

16 WebSocket (3) - Sul server Servizi che permettano di mantenre persistenza della connessione con costo macchina molto basso Node.JS sembra fatto apposta :) var http = require('http'), io = require('socket.io'), Server, // ; server = http.createserver( ); server.listen(8080); var io = io.listen(server); io.on('connection', function(client) { client.send({ }); client.broadcast({ }); client.on('message', onmessagefn); client.on('disconnect', ondisconnectfn); });

17 WebStorage Permette di salvare dati sul client sottoforma di coppia key-value Facile da usare, supportato su molti device Limiti di spazio utilizzabile e sopratutto non permette ricerche nei valori inseriti var nv = localstorage['num_view']; if (typeof nv == 'undefined') nv = 0 nv += 1; localstorage['num_view'] = nv;

18 WebSQL (1) Sintassi SQL-like Supportato sui vari device mobile (Yeah!) Il W3C ha deciso di abbandonarlo in favore di IndexedDB (che non è supportato da nessun browser mobile) #fail #quasifail #happy var db = opendatabase('whymca', '1.0', 'WHYMCA database', 2 * 1024 * 1024); db.transaction(function (tx) { tx.executesql('create TABLE IF NOT EXISTS attendee (id unique, name, mail)'); tx.executesql('insert INTO attendee (id, name, mail) VALUES (1, "Marco", "marco@agavee.com)'); });

19 WebSQL (2) Ho smesso anni fa di scrivere SQL, non me lo ricordo più, mica dovrò studiarmelo nuovamente??!!??!! (*) var alltasks = Task.all().filter("done", '=', true).prefetch("category").order("name", false).limit(10); alltasks.list(null, function (results) { results.foreach(function (r) { console.log(r.name) window.task = r; }); });

20 IndexedDB (1) Non supportato dai browser mobile attuali, MA parecchi vendor si stanno attrezzando al riguardo Database documentale, e dato che sono che sono tornati tanto di moda ora, con il NoSQL Sintassi molto verbosa la anche se abbastanza semplice nelle operazioni che si fanno normalmente

21 IndexedDB (2) Permette di storare oggetti sul server così come sono archiviati sul client (DB documentale con struttura come IndexedDB) Tramite interrogazione diretta da remoto è possibile inserire / leggere i dati presenti nel DB Permette connessioni persistenti per ricevere da remoto le notifiche in push dei risultati della ricerca

22 Ma quindi i dati e l'applicazione? Che fine fanno? Cambio di paradigma rispetto alle applicazioni classiche Controller e model finiscono sul client che si sincronizza con il server... chi ci lavora deve abituarsi a qusto cambio, quindi all'inizio prendiamo consapevolezza che sbaglieremo parecchio

23 Testate Sperimentate NON aspettate (alcune cose si possono già usare ora) NON pensate di sapere le cose (cambiano talmente in fretta che le vostre certezze cadono in men che non si dica) Mettetevi in discussione, altrimenti...

24 La forza può fare brutti scherzi

25 Demo (se avanza un attimo di tempo)

26 Domande? Marco Vito

27 Refs Alcuni links: (cercate slideshare ed i video)