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

1. Rafael Sales

2. Real-Time Apps
With Meteor

3. WEB
DB
Presentation
CPU
HTTP

4. WEB
Cloud
DB
DB
Presentation
CPU
HTTP
Data
CPU
?
CPU

5. Client/
Server
WEB
Cloud
DB
DB
DB
Data
CPU
RPC,
NFS...
CPU
Presentation
CPU
HTTP
Data
CPU
?
CPU

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. Meteor é uma plataforma open-source
para criar aplicações web modernas

8. Real-time
Reactive programming
JavaScript

9. Real-time
Reactive programming
JavaScript

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. // 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. API do Banco de Dados no cliente?

13. API do Banco de Dados no cliente?
Messages = new
Meteor.Collection("messages");
Messages.insert({ text: "Hello world!" });
Messages.find();

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. Sem mais...
function getLastMessages() {
$.get('/last-messages', callback);
}

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. Atualização da página
em tempo real
Partes atualizáveis são escritas com templates
automaticamente atualizados
quando o BD é alterado

18. Sem mais...
$.get('/messages',
function(responseBody) {
$('#messages').html(responseBody);
});
JavaScript haters

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. 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. 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. Sem mais...
$.post('/messages/create',
parameters,
function(newMsg) {
var li = $('<li/>', { text: newMsg.text });
$('ul').append(li);
});

23. Hot Code Pushes
=> alteração no código
=> build do JS
=> envia para cliente e atualiza

24. Pacote da aplicação
independente
Aplicação e suas dependências empacotadas
Executa em ambientes que suportam node.js

25. Interoperabilidade
DDP - Distributed Data Protocol

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. Exemplo: Leaderboard

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. <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. 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. 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. meteor.com
github.com/meteor/meteor

33. ra
elc
fa
ith
g
@g
ds
.co
ub
ai
m
/ra
m
Obrigado!
om
l.c
els
fa
es
al