Começando com meteor

15
começando com Meteor por Flávio Junior - http://github.com/fjsj

description

 

Transcript of Começando com meteor

Page 1: Começando com meteor

começando com Meteor

por Flávio Junior - http://github.com/fjsj

Page 2: Começando com meteor

O que é?

Meteor é uma plataforma open-source para construção de web apps de qualidade top em uma fração do tempo, seja você um desenvolvedor expert ou apenas iniciante.

traduzido de http://www.meteor.com/

Meteor é implementado sobre node.js e por padrão usa MongoDB como banco de dados e Handlebars como linguagem de template.

Page 3: Começando com meteor

Como?

001 - Tudo em JavaScript002 - Atualização em tempo real de páginas003 - Sincronização de dados cliente-servidor004 - Compensação de latência005 - Code pushes006 - Código sensível em ambiente seguro007 - App auto-contido para deploy008 - Interoperabilidade via protocolo DDP009 - Smart packages

traduzido de http://www.meteor.com/

Page 4: Começando com meteor

001 - Tudo em JavaScript

Cliente e servidor usam JavaScript:

Sintaxe de consultas com o banco de dados é praticamente idêntica a original do MongoDB.

if (Meteor.isClient) {

Template.leaderboard.players = function () {

return Players.find({}, {sort: {score: -1, name: 1}});

};

}

if (Meteor.isServer) {

Players.insert({name: "Fulano", score: 10});

}

Page 5: Começando com meteor

002 - Atualização em tempo real de páginas

"No more boilerplate redraw code":

Templates reativos. Quando o valor mudar, ele será atualizado automaticamente.

<template name="player">

<div class="player {{selected}}">

<span class="name">{{name}}</span>

<span class="score">{{score}}</span>

</div>

</template>

------------------------------------------------------------------

Players.update("507f191e810c19729de860ea", {$inc: {score: 5}});

Page 6: Começando com meteor

002 - Atualização em tempo real de páginas

Como ter reatividade no client-side apenas para o usuário atual? Use o módulo Session

Template.player.events({

'click': function () {

Session.set("selected_player", this._id);

}

});

Template.player.selected = function () {

return Session.equals("selected_player", this._id) ?

"selected" : '';

};

Page 7: Começando com meteor

003 - Sincronização de dados cliente-servidor

"No more loading your data from REST endpoints":

Acesso "direto" ao banco de dados a partir do cliente.

if (Meteor.isClient) {

Template.leaderboard.players = function () {

return Players.find({}, {sort: {score: -1, name: 1}});

};

}

Page 8: Começando com meteor

004 - Compensação de latência

Quando o usuário faz uma ação, a tela se atualiza imediatamente. Se o servidor rejeitar a mudança, a tela do cliente é corrigida de acordo com o que aconteceu realmente.

Page 9: Começando com meteor

005 - Code pushes

A melhor feature para desenvolver protótipos e para atualizar o webapp sem incomodar o usuário.

Page 10: Começando com meteor

006 - Código sensível em ambiente seguro

Por questões de segurança, pode-se garantir que o código rodará e estará disponível apenas no servidor:// código em um diretório server/methods.js

Meteor.methods({

fetchEvents: function (accessToken) {

// ...

}

});

Page 11: Começando com meteor

007 - App auto-contido para deploy

Com o comando meteor bundle você monta um pacote com a aplicação pronta para deploy. Se quiser hospedar nos servidores do próprio Meteor, você usa o comando meteor deploy nomedoapp.meteor.com

Page 12: Começando com meteor

008 - Interoperabilidade via protocolo DDP

Distributed Data Protocol é o protocolo por trás da capacidade de reatividade e atualizações em tempo-real dos aplicativos Meteor.

"DDP can work with any database, framework, or programming language, and it can work on servers, clients, and mobile devices. In fact, you can call Meteor.connect to connect to any DDP server -- such as a Meteor app written by someone else! -- and make realtime subscriptions to any data it's publishing."

Page 13: Começando com meteor

009 - Smart packages

● Você pode usar pacotes prontos que adicionam funcionalidades ao seu aplicativo Meteor.Exemplos de pacotes: underscore, d3, coffeescript.

● Pacotes são diferentes de módulos npm, mas você pode utilizá-los em seus pacotes Meteor.

● Também existe um repositório com pacotes open-source da comunidade Meteor. Se chama Atmosphere: https://atmosphere.meteor.com/

Page 14: Começando com meteor

Exemplo

Conferir o código do exemplo leaderboard

http://www.meteor.com/examples/leaderboard

Page 15: Começando com meteor

Dúvidas?

http://github.com/fjsj

[email protected]