DevDay - O elo perdido: sincronizando webapps

1,217 views
1,154 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,217
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

DevDay - O elo perdido: sincronizando webapps

  1. 1. Elo perdido:sincronizando webapps
  2. 2. Elo perdido:sincronizando webapps Jean Carlo Nascimento aka Suissa
  3. 3. Links nosqlbr.com.br jquerybrasil.org frontendbrasil.com.br javascriptbrasil.com.br comoprogramarphp.com.br github.com/suissa about.me/suissa @osuissa
  4. 4. SituaçãoDesenvolver sua aplicação web para que elacontinue funcionando mesmo sem conexãocom internet.
  5. 5. TecnologiasGoogle GearsNode.jsAir
  6. 6. Arquitetura
  7. 7. HTML5● cache manifest● localStorage● sessionStorage● webSQL - old but gold● indexedDB● navigator
  8. 8. 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
  9. 9. Storage● http://www.jstorage.info/● https://github.com/zefhemel/persistencejs● https://github.com/jeromegn/Backbone. localStorage
  10. 10. Backbone localStorage Adapter v1.0window.SomeCollection = Backbone.Collection.extend({ localStorage: new Backbone.LocalStorage("Nome"), // Nome unico na sua app.});
  11. 11. Node.js● Socket.io● Connect● Now.js● Express● Meteor● DerbyJs
  12. 12. Doctype html5<!DOCTYPE html><html>
  13. 13. Adicionar suporte ao manifestAddType text/cache-manifest .manifest
  14. 14. Criar o cache manifestCACHE MANIFEST#comentarioCACHEindex.htmlstyle.cssjquery.jsoffline.js
  15. 15. Link o manifest no html<html manifest="/offline.manifest">
  16. 16. offline.js● navigator.onLine● localStorage
  17. 17. navigator.onLinewindow.addEventListener("offline", function(e){alert("offline");})window.addEventListener("online", function(e){alert("online");})
  18. 18. localStoragelocalStorage.setItem()localStorage.getItem()localStorage.clear()localStorage.key()localStorage.removeItem()
  19. 19. Node.js - Criando um servidorvar 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);
  20. 20. Socket?● WebSockets● FlashSockets● AJAX long polling● AJAX multipart streaming● Forever Iframe● JSONP Polling
  21. 21. Websocket● http://www.websocket.org/● http://html5demos.com/web-socket● http://pt.wikipedia.org/wiki/WebSockets● https://developer.mozilla.org/en- US/docs/WebSockets
  22. 22. Socket.io
  23. 23. 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 alertaro servidor. socket.send("Ola Servidor"); // Evento "message" de resposta do servidor socket.on(message, function(visitas){ //atualizar localStorage }); }); </script>
  24. 24. 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 novousuário. socket.on(message, function(){ //busca os dados para o usuario var meus_dados = "{nome: Suissa}"; socket.emit(message, meus_dados); });});
  25. 25. Socket.io - clienthttp://socket.io/
  26. 26. Now.js
  27. 27. 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(""); });});
  28. 28. 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};
  29. 29. Now.js - server-sidehttp://nowjs.com/
  30. 30. MongoJs
  31. 31. 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");});
  32. 32. Mongojshttps://github.com/gett/mongojs
  33. 33. Curso Node.js http://pre-node.turing.com.br/ Suissa & Luciano Ramalho

×