html5, il lato client della forza
DESCRIPTION
Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e JavascriptTRANSCRIPT
![Page 2: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/2.jpg)
/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: @mavimo
Mail: [email protected]
Blog: http://mavimo.org
![Page 3: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/3.jpg)
Tanti device, tanti OS differenti (e per ognuno più versioni), e noi?
IMPAZIAMO!
![Page 4: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/4.jpg)
usa la forza
![Page 5: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/5.jpg)
![Page 6: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/6.jpg)
“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
![Page 7: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/7.jpg)
Nel clientJavascript 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)
HTML5, quindi tutti i fantastici tag che conosciamo, ma non ci interessa questo (in questo caso!)
![Page 8: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/8.jpg)
Nota:
Parliamo di WebApp, ma nel caso specifico di siti/servizi web fruibili da mobile
![Page 9: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/9.jpg)
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
![Page 10: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/10.jpg)
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
![Page 11: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/11.jpg)
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)
![Page 12: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/12.jpg)
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Messaggio subliminale
Messaggio subliminaleMessaggio subliminale
Applicazione custom
è meglio
![Page 13: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/13.jpg)
Browser detection
Riconoscere il browser che sta arrivando sul sito della webapp ed eventualmente redirigerlo nella sezione/sito apposito
http://wurfl.sourceforge.net/
http://detectmobilebrowser.com/
www.mysite.tdl
mobi.mysite.tdl
![Page 14: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/14.jpg)
WebSocket (1)
![Page 15: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/15.jpg)
WebSocket (2) – Sul client
Usabili fin da ora
Supportati su diversi device mobile (Android, iOS)
Permettono comunicazioni in tempo reale verso/da server (servizi in push)
Facili (proprio FACILI) da implementare con alcune librerie come http://socket.io
var socket = new io.Socket(null {
port: 8080,
rememberTransport: false
});
socket.connect();
socket.on('message', function(obj){
// Do some stuff
});
socket.on('connect', onConnectFn);
socket.on('disconnect', onDisconnectFn);
socket.on('reconnect', onReconnectFn);
// ...
![Page 16: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/16.jpg)
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);
});
![Page 17: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/17.jpg)
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;
![Page 18: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/18.jpg)
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)
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", "[email protected])');});
#fail #quasifail #happy
![Page 19: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/19.jpg)
WebSQL (2)
Ho smesso anni fa di scrivere SQL, non me lo ricordo più, mica dovrò studiarmelo nuovamente??!!??!!
http://persistencejs.org/ (*)http://code.google.com/p/orm-html5/http://impel.simulacre.org/
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; });});
![Page 20: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/20.jpg)
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
![Page 21: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/21.jpg)
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 http://goo.gl/t57zD
![Page 22: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/22.jpg)
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
![Page 23: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/23.jpg)
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...
![Page 24: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/24.jpg)
La forza può fare brutti scherzi
![Page 25: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/25.jpg)
Demo(se avanza un attimo di tempo)
![Page 27: HTML5, il lato client della forza](https://reader034.vdocumenti.com/reader034/viewer/2022051014/54b69c1d4a7959bc518b45ac/html5/thumbnails/27.jpg)
Refs
Alcuni links:
http://www.openmobilealliance.org/Technical/release_program/docs/Browsing/V2_3-20050118-C/OMA-WAP-ESMP-V1_0-20040709-C.pdfhttp://validator.w3.org/mobile/http://www.w3.org/TR/mobile-bp/http://www.w3.org/TR/mwabp/https://github.com/janmonschke/backbone-couchdb/https://developer.mozilla.org/en/IndexedDBhttp://www.jsday.it (cercate slideshare ed i video)