Introdução ao Meteor

meteor

Primeiro, se você ainda não conhece o Meteor, da uma lida aqui.

Não sou tão bom em fazer tutorial quanto em propaganda, deve ser por isso que trabalho numa agência de publicidade e não numa escola, mas vamos ao que interessa, vamos brincar um pouco com Meteor.

Antes de mais nada, obviamente, você precisa instalar em sua máquina. Tem pra Windows, Linux e Mac, não tem erro:
– https://www.meteor.com/install

Depois de instalado (poderá ser necessário reiniciar o computador em alguns casos), você vai estar apto pra executar os comandos do Meteor Tool. O que é isso? É uma CLI (Command Line Interface) pra você criar, rodar, instalar pacotes e tudo o mais necessário pra desenvolver aplicações com a plataforma.

Para testar, rode o comando meteor --version; o output é como se espera: a versão instalada do Meteor:

Falando nisso, tenho que atualizar o meu. Pra quem acabou de instalar a versão vai ser a 1.1.0.3.

Então bora criar o primeiro app; e você faz isso simplesmente executado o comando create e passando o nome da pasta que você vai dar pro projeto.

meteor create hello-meteor

O Meteor vai então criar essa pasta hello-meteor e vai deixa lá alguns arquivos iniciais. Aí você pensa: “lá vem uns arquivos sinistros que nunca vi na vida; coisa a mais pra aprender”, mas calma jovem, não são nada mais nada menos que um .html, um .css e um .js; exatamente isso, esse trio que você já conhece e tem a maior admiração e eles só estão lá pra ilustrar como o Meteor funciona, só pra te falar: “olha, é por aqui que você começa”; quem manja “dos Meteor” já sai apagando esses arquivos.

Como a gente não manja ainda, vamos usa-los pra entender como ele funciona!

O hello-meteor.css não tem nada, é isso, tá lá só pra ilustrar, como falei antes, mas é lá que vai seu CSS.

O hello-meteor.html já tem alguma coisa, mas não é um HTML qualquer. Ele não tem a tag <html> e tem essa tal de <template> mais essas chaves {{ }}. Primeiro é bom lembrar que a <template> não é coisa que o Meteor inventou é HTML5 e já é recomendação da W3C. As chaves também não são coisa nova do Meteor, quem usa Handlebars.js já conhece muito bem e vai estar muito familiarizado já que o Spacebars, a engine do Meteor, é baseada no Handlebars. “Por que eles fizeram outra template engine?” você deve estar se perguntando e isso pra ter a reatividade no HTML que a gente viu no post anterior.

Mas o HTML é simples, uma olhada cautelosa e você já entende o que tá acontecendo, tem a <head> com um <title>, ok; tem a <body> com um <h1>, normal e tem esse {{> hello}} (se você usou o mesmo nome pra pasta), isso faz exatamente o que você tá imaginando, imprime o <template name="hello">, declarado logo abaixo, naquele espaço da <body>. Se você já tem noção de template engine isso já entrou na sua cabeça, nada diferente de Angular e Ember até aqui.

O hello-meteor.js

Agora sim, o JavaScript, ele que faz acontecer.

A primeira coisa que a gente tem que falar no JS quando se trata do Meteor, são as Booleans: Meteor.isClient e Meteor.isServer; sim, tenho certeza que você imaginou e é pra isso mesmo pra isso que elas servem. Os arquivos .js no Meteor tem por natureza rodar tanto no ambiente cliente quanto no servidor, salvo quando localizados em pastas específicas, que é a parte sobre como organizar seu app em Meteor que a gente pode deixar pra outro post. Sendo assim o Meteor te da essas duas Booleans pra você saber quando tá em um ambiente ou em outro. No hello-meteor.js o if (Meteor.isClient) { e o if (Meteor.isServer) { estão claros.

No isServer não temos muita ação, mas no isClient a gente nota essa global Template; pra cada <template> que você definir nos seus .html, a Template terá uma propriedade com o nome que você deu, no caso hello. E o que você pode fazer com isso? Adicionar helpers e eventos. Helpers, quem trabalha com templates já sabe, são pequenas funções que te ajudam a mover alguma lógica de apresentação que estaria no HTML pro JS, o que faz muito mais sentido e eventos são, bom, eventos, você já conhece eles, são exatamente os eventos do DOM: click, mouseover, submit etc.

O padrão pra selecionar os eventos é: eventtype selector e eles pode ser separados por vírgula. No nosso hello-meteor.js temos lá como exemplo: 'click button' no lugar de click poderia ser submit e no lugar de button poderia ser qualquer seletor CSS como é na jQuery, aliás, já comentei que o Meteor vem a com jQuery por padrão e você pode executar template.$ e retornar um jQuery Object? Pois é…

Ainda no JavaScript temos a global Session e é justamente pra trabalhar com sessões mesmo; no exemplo temos a chave counter na nossa Session e a cada clique do botão o handle incrementa essa chave direto na Session; temos uma helper de mesmo nome (counter) que simplesmente retorna o valor da chave na sessão e no .html a gente invoca essa helper com {{counter}}; simples, um template em HTML imprimindo o valor de uma variável do JavaScript. O que tem de super cool aí é como dissemos a reatividade, a mudança de estado ser propagada sem esforço algum, você pode ver que não tem nenhum código pra ouvir quando a counter é alterada e alterar no HTML, o Meteor te da isso out-of-the-box.

Toda chave na Session é uma ReactiveVar e vai ser pro-ativa o suficiente pra ouvir alterações em si e propaga-las até a View/HTML/Blaze/Spacebars.

Quer ver isso tudo funcionando? Só executar meteor dentro da pasta do seu app.