Embed Size (px)
DESCRIPTION
O Elo perdido: sincronizando webapps com node.js foi uma palestra apresentada no DevDay de Belo Horizonte, na qual fala como criarmos uma app offline com html5 e como podemos sincronizar seus dados com o servidor em Node.js e MongoDb.
Citation preview
Elo perdido: sincronizando webapps
Elo perdido: sincronizando webapps
Jean Carlo Nascimento aka Suissa
Links
nosqlbr.com.brjquerybrasil.org
frontendbrasil.com.brjavascriptbrasil.com.br
comoprogramarphp.com.brgithub.com/suissaabout.me/suissa
@osuissa
Situação
Desenvolver sua aplicação web para que ela continue funcionando mesmo sem conexão com internet.
Tecnologias
Google GearsNode.jsAir
Arquitetura
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.0window.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
CACHEindex.htmlstyle.cssjquery.jsoffline.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
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 - clienthttp://socket.io/
Now.js
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-sidevar 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
Mongojsvar 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
