DevDay - O elo perdido: sincronizando webapps

Elo perdido:
sincronizando webapps

Elo perdido:
sincronizando webapps

Jean Carlo Nascimento aka Suissa

Links
nosqlbr.com.br
jquerybrasil.org
frontendbrasil.com.br
javascriptbrasil.com.br
comoprogramarphp.com.br
github.com/suissa
about.me/suissa
@osuissa

Situação
Desenvolver sua aplicação web para que ela
continue funcionando mesmo sem conexão
com internet.

Tecnologias
Google Gears
Node.js
Air

HTML5
● cache manifest
● localStorage
● sessionStorage
● webSQL - old but gold
● indexedDB
● navigator

HTML5
● http://html5demos.com/offlineapp
● http://html5demos.com/storage
● http://html5demos.com/storage
● http://html5doctor.com/introducing-web-sql-
databases/
● http://www.html5rocks.
com/en/tutorials/indexeddb/todo/
● http://html5demos.com/nav-online

Storage
● http://www.jstorage.info/
● https://github.com/zefhemel/persistencejs
● https://github.com/jeromegn/Backbone.
localStorage

Backbone localStorage Adapter v1.0
window.SomeCollection = Backbone.Collection.extend({
localStorage: new Backbone.LocalStorage("Nome"),
// Nome unico na sua app.
});

Node.js
● Socket.io
● Connect
● Now.js
● Express
● Meteor
● DerbyJs

Doctype html5
<!DOCTYPE html>
<html>

Adicionar suporte ao manifest
AddType text/cache-manifest .manifest

Criar o cache manifest
CACHE MANIFEST
#comentario

CACHE
index.html
style.css
jquery.js
offline.js

Link o manifest no html
<html manifest="/offline.manifest">

offline.js
● navigator.onLine
● localStorage

navigator.onLine
window.addEventListener("offline", function(e)
{alert("offline");})

window.addEventListener("online", function(e)
{alert("online");})

localStorage
localStorage.setItem()
localStorage.getItem()
localStorage.clear()
localStorage.key()
localStorage.removeItem()

Node.js - Criando um servidor
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end(index);
}).listen(3000);

Socket?
● WebSockets
● FlashSockets
● AJAX long polling
● AJAX multipart streaming
● Forever Iframe
● JSONP Polling

Websocket
● http://www.websocket.org/
● http://html5demos.com/web-socket
● http://pt.wikipedia.org/wiki/WebSockets
● https://developer.mozilla.org/en-
US/docs/WebSockets

Socket.io - client
<script src="/socket.io/socket.io.js"></script>
<script>
// Criando uma conexão Socket.io com servidor.
var socket = io.connect('http://localhost:8080');
// Ao conectar com servidor...
socket.on('connect', function(){
// Enviando mensagem ao servidor apenas para alertar
o servidor.
socket.send("Ola Servidor");
// Evento "message" de resposta do servidor
socket.on('message', function(visitas){
//atualizar localStorage
});
});
</script>

Socket.io - server
// Instanciando os módulos HTTP e Socket.io.
var http = require('http').createServer(index)
, io = require('socket.io').listen(http);
// Configurando a porta de listen do servidor.
http.listen(8080);
// Iniciando o Socket.IO através do evento "Connection".
io.sockets.on('connection', function(socket){
// Evento "message" que ocorre quando entra um novo
usuário.
socket.on('message', function(){
//busca os dados para o usuario
var meus_dados = "{'nome': 'Suissa'}";
socket.emit('message', meus_dados);
});
});

Socket.io - client
http://socket.io/

Now.js - client-side
$(document).ready(function(){
now.receiveMessage = function(product){
$("#lista").append("<li>"+product+"</li>");
}

$("#send-button").click(function(){
now.distributeMessage($("#text-input").val());
$("#text-input").val("");
});

});

Now.js - server-side
var server = require('http').createServer();
server.listen(8080);

var nowjs = require("now");
var everyone = nowjs.initialize(server);

everyone.now.distributeMessage = function(product){
//salve no database
};

Now.js - server-side
http://nowjs.com/

Mongojs
var databaseUrl = "mydb";
var collections = ["produtos"]
var db = require("mongojs").connect(databaseUrl,
collections);

db.produtos.save({product: my_product}, function
(err, saved) {
if( err || !saved )
console.log("Produto nao foi salvo!");
else
console.log("Produto salvo");
});

Mongojs
https://github.com/gett/mongojs

Curso Node.js

http://pre-node.turing.com.br/

Suissa & Luciano Ramalho

DevDay - O elo perdido: sincronizando webapps

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a DevDay - O elo perdido: sincronizando webapps

Mais de Suissa

DevDay - O elo perdido: sincronizando webapps