HTML5, il lato client della forza...

HTML5, il lato client della forza...

Marco Vito Moscaritolo
marco@agavee.com
@mavimo

/usr/bin/whoami
“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: marco@agavee.com
Blog: http://mavimo.org

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

IMPAZIAMO!

“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

Nel client
HTML5, quindi tutti i fantastici tag Javascript non è più un
che conosciamo, ma non ci interessa “abbellimento”, sta diventando
questo (in questo caso!) 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)

Nota:

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

Una webapp per il mobile, ok...

...come faccio?

Ottimizzo la mia applicazione Creo un applicazione apposita
corrente per funzionare su per la versione mobile
dispositivi mobile

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

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)

Messaggio subliminale
Messaggio subliminale Messaggio subliminale

Applicazione custom

è meglio


Browser detection www.mysite.tdl

Riconoscere il browser che sta
arrivando sul sito della webapp ed
eventualmente redirigerlo nella
sezione/sito apposito

mobi.mysite.tdl

http://wurfl.sourceforge.net/

http://detectmobilebrowser.com/

WebSocket (2) – Sul client
Usabili fin da ora var socket = new io.Socket(null {
port: 8080,
rememberTransport: false
Supportati su diversi device });
mobile (Android, iOS)
socket.connect();

Permettono comunicazioni
socket.on('message', function(obj){
in tempo reale verso/da // Do some stuff
server (servizi in push) });

Facili (proprio FACILI) da socket.on('connect', onConnectFn);
implementare con alcune socket.on('disconnect', onDisconnectFn);
socket.on('reconnect', onReconnectFn);
librerie come http://socket.io
// ...

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

client.on('disconnect', onDisconnectFn);
});

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

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)');
});

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;
});
});

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

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

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

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

La forza può fare brutti scherzi

Demo
(se avanza un attimo di tempo)

Domande?

@mavimo
marco@agavee.com

Refs
Alcuni links:

http://www.openmobilealliance.org/Technical/release_program/docs/Browsin
http://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/IndexedDB
http://www.jsday.it (cercate slideshare ed i video)

HTML5, il lato client della forza...

More Related Content

Viewers also liked

Similar to HTML5, il lato client della forza...

HTML5, il lato client della forza...