Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript

1. HTML5, il lato client della forza...
Marco Vito Moscaritolo
marco@agavee.com
@mavimo

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: @mavimo
Mail: marco@agavee.com
Blog: http://mavimo.org

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

4. usa la forza

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

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 Creo un applicazione apposita
corrente per funzionare su per la versione mobile
dispositivi 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. Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Applicazione custom
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
è meglio
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Messaggio subliminale
Messaggio subliminale Messaggio subliminale
Messaggio subliminale

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

14. WebSocket (1)

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

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

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

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

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 http://goo.gl/t57zD

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 Moscaritolo
@mavimo
marco@agavee.com

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