• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Aplicações de tempo real com Meteor.js
 

Aplicações de tempo real com Meteor.js

on

  • 666 views

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

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

Statistics

Views

Total Views
666
Views on SlideShare
666
Embed Views
0

Actions

Likes
1
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aplicações de tempo real com Meteor.js Aplicações de tempo real com Meteor.js Presentation Transcript

    • Rafael Sales
    • Real-Time Apps With Meteor
    • WEB DB Presentation CPU HTTP
    • WEB Cloud DB DB Presentation CPU HTTP Data CPU ? CPU
    • Client/ Server WEB Cloud DB DB DB Data CPU RPC, NFS... CPU Presentation CPU HTTP Data CPU ? CPU
    • 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
    • Meteor é uma plataforma open-source para criar aplicações web modernas
    • Real-time Reactive programming JavaScript
    • Real-time Reactive programming JavaScript
    • Só JavaScript Cliente e servidor escritos em JavaScript Mesma API disponível no cliente e servidor Inclusive a API do Banco de Dados
    • // 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
    • API do Banco de Dados no cliente?
    • API do Banco de Dados no cliente? Messages = new Meteor.Collection("messages");   Messages.insert({ text: "Hello world!" });   Messages.find();
    • 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
    • Sem mais... function getLastMessages() { $.get('/last-messages', callback); }
    • 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");
    • Atualização da página em tempo real Partes atualizáveis são escritas com templates automaticamente atualizados quando o BD é alterado
    • Sem mais... $.get('/messages', function(responseBody) { $('#messages').html(responseBody); }); JavaScript haters
    • 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
    • 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(); };
    • 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
    • Sem mais... $.post('/messages/create', parameters, function(newMsg) { var li = $('<li/>', { text: newMsg.text }); $('ul').append(li); });
    • Hot Code Pushes => alteração no código => build do JS => envia para cliente e atualiza
    • Pacote da aplicação independente Aplicação e suas dependências empacotadas Executa em ambientes que suportam node.js
    • Interoperabilidade DDP - Distributed Data Protocol
    • 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)
    • Exemplo: Leaderboard
    • <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>
    • <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>
    • 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 }); }   }); }
    • 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);     }   }); }
    • meteor.com github.com/meteor/meteor
    • ra elc fa ith g @g ds .co ub ai m /ra m Obrigado! om l.c els fa es al