Aplicações de tempo real com Meteor.js

2,413 views

Published on

Uma visão geral sobre Meteor.js - Ceará JavaScript (CEJS) 9/Nov/2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Aplicações de tempo real com Meteor.js

  1. 1. Rafael Sales
  2. 2. Real-Time Apps With Meteor
  3. 3. WEB DB Presentation CPU HTTP
  4. 4. WEB Cloud DB DB Presentation CPU HTTP Data CPU ? CPU
  5. 5. Client/ Server WEB Cloud DB DB DB Data CPU RPC, NFS... CPU Presentation CPU HTTP Data CPU ? CPU
  6. 6. Como seria esse protocolo? • APIs são assinaturas de conjuntos de dados • Cache local dos dados no cliente • Chamada de métodos ao servidor (RPC) • Cliente pode simular métodos do servidor modificando seu cache local de dados
  7. 7. Meteor é uma plataforma open-source para criar aplicações web modernas
  8. 8. Real-time Reactive programming JavaScript
  9. 9. Real-time Reactive programming JavaScript
  10. 10. Só JavaScript Cliente e servidor escritos em JavaScript Mesma API disponível no cliente e servidor Inclusive a API do Banco de Dados
  11. 11. // código compartilhado if (Meteor.isServer) { // código do servidor } if (Meteor.isClient) { // código do cliente } Só JavaScript Cliente e servidor escritos em JavaScript Mesma API disponível no cliente e servidor Inclusive a API do Banco de Dados
  12. 12. API do Banco de Dados no cliente?
  13. 13. API do Banco de Dados no cliente? Messages = new Meteor.Collection("messages");   Messages.insert({ text: "Hello world!" });   Messages.find();
  14. 14. Sincronização de dados O cliente faz assinatura de um conjunto de dados que deseja manter-se atualizado O servidor irá manter tais conjuntos atualizados nos clientes
  15. 15. Sem mais... function getLastMessages() { $.get('/last-messages', callback); }
  16. 16. E como faz? /server/chat.js Meteor.publish("messages-to-me", function () { return Messages.find({ to: myId }); }); /client/chat.js Meteor.subscribe("messages-to-me");
  17. 17. Atualização da página em tempo real Partes atualizáveis são escritas com templates automaticamente atualizados quando o BD é alterado
  18. 18. Sem mais... $.get('/messages', function(responseBody) { $('#messages').html(responseBody); }); JavaScript haters
  19. 19. Sem mais... $.get('/messages', function(messages) { var list = $('ul'); list.empty(); $.each(messages, function(index, msg) { var newItem = $('<li/>', { text: msg.text }); list.append(newItem); }); }); JavaScript Lovers
  20. 20. E como faz? /client/index.html <template name="container"> <ul> {{#each messages}} <li> {{text}} </li> {{/each}} </ul> </template> /client/chat.js Template.container.messages = function() {   return Messages.find(); };
  21. 21. Compensação de latência Alterações de dados efetuadas no cliente refletem a UI ao mesmo tempo que são enviadas ao servidor Cópia dos dados dos clientes e o UI são corrigidos caso o servidor rejeite as alterações
  22. 22. Sem mais... $.post('/messages/create', parameters, function(newMsg) { var li = $('<li/>', { text: newMsg.text }); $('ul').append(li); });
  23. 23. Hot Code Pushes => alteração no código => build do JS => envia para cliente e atualiza
  24. 24. Pacote da aplicação independente Aplicação e suas dependências empacotadas Executa em ambientes que suportam node.js
  25. 25. Interoperabilidade DDP - Distributed Data Protocol
  26. 26. Smart Packages Meteorite: package manager for Atmosphere Injetam código no cliente e/ou servidor É possível substituir pacotes padrão, como o de templating (Handlebars.js)
  27. 27. Exemplo: Leaderboard
  28. 28. <template name="leaderboard">   <div class="leaderboard">     {{#each players}}       {{> player}}     {{/each}}   </div> H TM L   {{#if selected_name}}    <div class="details">      <div class="name">{{selected_name}}</div>      <input type="button" class="inc” value="Give 5 points" />    </div>   {{else}}   <div class="none">Click a player to select</div>   {{/if}} </template>
  29. 29. <template name="leaderboard">   <div class="leaderboard">     {{#each players}}       {{> player}}     {{/each}}   </div> H TM L   {{#if selected_name}} <template name="player"> <template name="player">    <div class="details">   <div class="player {{selected}}">   <div class="player {{selected}}">      <div class="name">{{selected_name}}</div>     <span class="name">{{name}}</span>     <span class="name">{{name}}</span>     <span class="score">{{score}}</span>      <input type="button" class="inc”     <span class="score">{{score}}</span>   </div>   </div> value="Give 5 points" /> </template> </template>    </div>   {{else}}   <div class="none">Click a player to select</div>   {{/if}} </template>
  30. 30. Players = new Meteor.Collection(“players"); JS if (Meteor.isServer) {   Meteor.startup(function () {     if (Players.find().count() === 0) {       var names = ["Ada Lovelace",                    "Grace Hopper",                    "Marie Curie",                    "Carl Friedrich Gauss",                    "Nikola Tesla",                    "Claude Shannon"];       for (var i = 0; i < names.length; i++)         Players.insert({ name: names[i], score: Random.floor(Random.fraction()*10)*5 }); }   }); }
  31. 31. Players = new Meteor.Collection(“players"); JS if (Meteor.isClient) {   Template.leaderboard.players = function() {     return Players.find({}, { sort: { score: -1, name: 1 }});   };   Template.leaderboard.selected_name = function() {     player = Players.findOne(Session.get("selected_player"));     return player && player.name;   }; Template.leaderboard.events({     'click input.inc': function() {       Players.update(Session.get("selected_player"), { $inc: { score: 5 }});     }   });   Template.player.events({     'click': function() {       Session.set("selected_player", this._id);     }   }); }
  32. 32. meteor.com github.com/meteor/meteor
  33. 33. ra elc fa ith g @g ds .co ub ai m /ra m Obrigado! om l.c els fa es al

×