Como funciona o Meteor

Para resumir o funcionamento de Meteor numa só palavra, esta seria a reatividade.

Apesar da terminologia ser nova, já tivemos contato com o conceito há bastante tempo, nas planilhas eletrônicas. Uma planilha pode ter uma célula com uma expressão matemática que envolve valores de outras células. Ao modificar os valores de uma destas últimas, a célula dependente das outras é recomputada. Essa “mágica” introduzida desde VisiCalc (primeira planilha, em 1979) e utilizada até hoje, faz com que a programação seja mais simples, sem nos preocuparmos em “recalcular” variáveis que dependem de outras, ou seja, a reatividade.

Como é a reatividade em Meteor? Essencialmente, consiste em fazer com que um objeto reativo avise ao sistema que algo no seu interior foi modificado. Esse tipo de objeto (que “avisa”) é classificado como um fonte de dados reativa. Evidentemente, precisaremos do outro lado, o que irá “ouvir” quando essa mudança ocorrer, sendo esse lado o contexto reativo, ou ainda a computação reativa, parte do código que será executada quando essas mudanças na fonte reativa forem detectadas.

O Meteor tem vários tipos de variáveis que são reativas, como variáveis de sessão (Session), cursores de um banco de dados, variáveis criadas com ReactiveVar, e alguns outros tipos menos comuns. O outro lado, o do contexto reativo é normalmente associado aos templates, parte do mark-up similar a html normal, mas que será preprocessado para se transformar na definição da página. O Meteor usa Spacebars, a parte mais significativa do módulo Blaze, e sua própria versão do Handlebars (http://handlebarsjs.com/) para definir seus templates. Helpers na forma {{variable}} são transformados por subistituição do seu valor pelo resultado retornado por uma função (chamada de helper) associada a esse template onde ele se encontra. Cada template tem um nome e representa uma definição parcial do html que irá formar nossa página web (ou view, como preferimos chamá-la).

Vejamos um exemplo bastante simples. Primeiro o html (com definição dos templates):

<body>
<h1>Welcome to Meteor!</h1>
{{> simples}}
</body>
<templatename=”simples”>
<span>{{valor}}</span>
</template>

O template está sendo definido com o nome “simples”, e está sendo incluido no corpo da página pela forma {{> simples}}.

Agora vejamos como fica o nosso javascript para fornecer o conteúdo desse template:

Template.tmpl.helpers({
 ‘valor’:function(){
 return”Uma string simples como conteúdo.”;
 }
});

O {{valor}} é substituido no template pelo seu conteúdo, que é o valor retornado pela função.

Se esse helper utilizasse uma variável reativa, nosso exemplo seria perfeito, mas este ainda não é o caso.
 
 Há várias maneiras de criarmos uma variável reativa. As mais úteis nos nossos programas são as criadas com o módulo ReactiveVar, ou com o módulo Session, sendo esta última global, portanto, não muito recomendável. O documento de um banco de dados MongoDB (ou minimongo, no cliente) obtido através de um cursor, já é automaticamente uma variável reativa. Vejamos como definir nossa própria variável reativa com ReactiveVar.

<templatename=”projeto”>
<textareaid=”desc”></textarea>
<! — mostra o resultado da variável →
<div>{{projDesc}}</div>
</template>

Esse template pode ser incluido na página web acima, com {{> projeto}}, acrescentado no lugar desejado. Ele irá mostrar uma “textarea” para a entrada e uma “div” para display da variável, sincronizadas graças à reatividade da variável projDesc.

Template.projeto.onCreated(function() {
this.projDesc =newReactiveVar();
});
Template.projeto.events({
“keyup #desc”:function(event, instance) {
event.preventDefault();
var value = $(event.target).val();
instance.projDesc.set(value);
});
Template.projeto.helpers({
projDesc:function() {
returnTemplate.instance().projDesc.get();
});

No diretório do projeto teremos que adicionar inicialmente o pacote reactive-var:
 meteor add reactive-var
e então incluir o código acima no nosso javascript. Esse código tem 3 partes:

  • evento “onCreated”, com uma função que será executada na criação do template. Aí definiremos uma nova variável reativa, com o nome “projDesc”.
  • adicionaremos um event handler (manipulador de eventos) para processar o eventokeyup (subida de tecla) no objeto do DOM com o id #desc, que corresponde à nossa textarea, mas que poderia ser também, por exemplo, uma input ou outro tag.
    Evitaremos a propagação desse evento (opcional) e usaremos o seletor jQuery $(event.target) para obter o objeto do evento e então conseguir o valor dele (função val()). Depois iremos armazenar esse conteúdo na nossa variável reativa, com a função “set”. Essa variável é o “projDesc” da instância corrente do template. Isso porque podem existir múltiplas instâncias desse mesmo template usadas na página.
  • os helpers nesse caso, especificamente o de nome “projDesc” (único presente) é uma função que deve retornar o valor da variável reativa para a view. Isso se consegue com a função “get()”.

Dica

O evento acima usa “keyup #desc”, ou seja, inclui o id (em outros casos, uma classe CSS) como seletor. Os ids e classes do CSS foram originalmente projetados para controlarmos a apresentação dos elementos, não como seletores de eventos.

<templatename=”projeto”>
<textareadata-action=’projTexto’></textarea>
<div>{{projDesc}}</div>
</template>

E então o evento correspondente ficaria (com o seletor tipo jQuery):

Template.projeto.events({
“keyup [data-action=projTexto]”:function(event, instance) {
event.preventDefault();
var value = $(event.target).val();
instance.projDesc.set(value);
});

Originally published at advlinuxdev.blogspot.com.br on October 15, 2016.
This article is taken as part of a book chapter from
https://www.amazon.com.br/dp/B01H7J6NHA

Show your support

Clapping shows how much you appreciated Rildo Pragana’s story.