HTML5, il lato client della forza...

Marco Vito Moscaritolomarco@agavee.com

@mavimo

/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: marco@agavee.com

Blog: http://mavimo.org

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

IMPAZIAMO!

usa la forza

“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 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!)

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 corrente per funzionare su dispositivi mobile

Creo un applicazione apposita per la versione 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 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

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

WebSocket (1)

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

// ...

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

});

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;

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", "marco@agavee.com)');});

#fail #quasifail #happy

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?

Marco Vito Moscaritolo@mavimo

marco@agavee.com

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)