Desenvolvimento MeteorJS

MeteorJS

Gostaria de iniciar aqui uma pequena introdução ao Desenvolvimento Web com MeteorJS. Esse pequeno texto não cobre nem 1% do ecosistema MeteorJS mas pode dar uma visão geral das possibilidades que se abrem. 

Neste tutorial, utilizamos Linux/Mac como sistema operacional, sendo que para Windows, algumas instruções podem ser diferentes. Aconselhamos instalar uma maquina virtual Linux ( Vitualbox ). Mas, de qualquer forma, é perfeitamente possível desenvolver em MeteorJS em Windows, basta fazer as modificações necessárias. Uma dica é instalar o GIT e utilizar o GIT SHELL no lugar do CMD do Windows.

Introdução

O que é MeteorJS ? Bom, uma resposta direta:

É uma "plataforma" de desenvolvimento web em Javascript.

Agora vamos detalhar mais um pouco sobre isso.

Desenvolvimento Web

Utilizando HTML, CSS e Javascript para desenvolver aplicações completas e cheias de recursos. o MeteorJS une o front-end e o back-end numa única plataforma não sendo necessário criar um servidor de dados em outra linguagem para criar uma API Rest. O próprio Metor já faz isso pra você.

Desenvolvimento Móvel

Uma surpresa muito agradável! A mesma aplicação pode ser "compilada" para criar uma aplicação móvel ( Android ou iOS ) utilizando Cordova. Com algumas modificações na interface gráfica a aplicação MeteorJS irá funcionar como um aplicativo nativo, podendo inclusive ser enviado para o Google Play e a App Store e serem vendidos.

Única linguagem

Apenas Javascript em todo lugar! Uma aplicação MeteorJS segue as últimas tendências no desenvolvimento de aplicações web. Como Google Inbox, Google Maps, Trello e muitas outras. A aplicação é divida em duas partes:

• front-end que é executada na máquina do usuário, dentro do navegador web utilizando javascript e no caso do Meteor, uma mini instância do banco de dados MiniMongo.
• back-end que é executada no servidor onde a aplicação está instalada usando NodeJS a linguagem também é javascript mas com alguns extras que a permitem interagir com este servidor para acessar banco de dados, sistema de arquivos, etc.

Rode em qualquer servidor

MeteorJS é apenas a ferramenta de desenvolvimento pois no final, o resultado será uma aplicação em javascript que roda em um servidor com NodeJS e MongoDB.

Pre-requisitos

MeteorJS vem com praticamente tudo que é necessário para iniciar o desenvolvimento de aplicações, vemos a seguir:

1. Instalar o MeteorJS
2. Instalar um editor HTML simples, como o Atom (grátis) ou o SublimeText 
3. No caso de se desejar criar aplicações móveis ( Android e iOS ) é preciso instalar o Android Studio e o XCode ( iOS é preciso usar um Mac com MacOS )
4. Conhecimentos de javascript, e um pouco de  ecmascript 6. Mas você pode ir aprendendo enquanto "brinca" com o MeteorJS
5. Acabamos aqui, não é preciso mais nada ;)

Instalação

https://www.meteor.com/install

Em alguns minutos você terá o MeteorJS instalado e pronto para ser usado, não é necessário instalar nenhum servidor web ( o MeteorJS já tem um incluso ), nenhum banco de dados ( o MeteorJS já vem com o MongoDB ). Tudo que você vai precisar é um editor HTML para começar a programar.

Primeiro App Meteor

Primeiramemte, vamos criar uma pasta onde seus projetos Meteor vão ficar, para isso crie uma pasta chamda "projetos" na sua home:

mkdir ~/projetos

Agora vamos criar uma aplicação Meteor:

cd ~/projetos
meteor create Chat

Aguarde alguns segundos e sua aplicação já vai estar pronta, e você só vai precisar executa-la no servidor web incluído:

cd Chat
meteor

Agora acesse o endereço http://localhost:3000 e você já vai ver sua aplicação funcionando, ainda é uma aplicação bem simples, mas já dá pra começar a "brincar". Agora vamos ao editor HTML, aqui vamos usar o Atom, mas você pode utilizar o que mais lhe agradar. Será bom se ele tiver suporte para HTML,CSS e Javascript. No terminal digite:

atom .

Você vai ver que a aplicação Meteor é bem pequena e consiste de apenas um arquivo HTML, um arquivo CSS e um arquivo JS. Tem como ser mais simples que isso ? :) Vamos explicar essa estrutura de arquivos do MeteorJS nessa aplicação de "teste" e depois vamos transforma-la num verdadeiro Chat.

Estrutura de Arquivos

Existe uma estrutura de arquivos e diretórios "sugerida" no desenvolvimento de uma aplicação MeteorJS. Isso quer dizer que você é livre para definir como prefere trabalhar. Você pode por exemplo utilizar uma estrutura MVC para organizar sua aplicação, ou outra que deseja. Agora alguns detalhes que precisam ser levados em consideração para facilitar o seu trabalho:

• É muito importante entender que diferentemente de aplicações "server-side" como PHP, Ruby ou Python, a aplicação JS "vive" no navegador utilizado pelo usuário, se ele está navegando com o Chrome, Firefox, Safari ou IE, a aplicação vai rodar dentre deste "ambiente".
• Todos os arquivos JS serão carregados imediatamente no primeiro acesso à sua aplicação, e, como o MeteorJS funciona por meio de eventos, as funções declaradas em cada um dos arquivos serão executadas numa determinada ordem.
• Todos os arquivos HTML e CSS são carregados também imediatamente no primeiro acesso à sua aplicação. Isso pode causar certa estranheza de início, mas como cada "VIEW" da aplicação é na verdade, uma função javascript, ela também vai obedecer as mesmas regras de execução e ordem dos arquivos JS.
• Lembrando que a aplicação MeteorJS roda tanto no navegador do usuário, como no servidor NodeJS, é preciso declarar "onde" cada trecho de código irá executar, e isso é feito de duas maneiras:
• 1 - na raíz da aplicação, as pastas server e cliente servem para declarar onde o código JS nos arquivos dentros destas pastas irá excutar - numa aplicação completa, essa é a forma mais usada.
• 2 - Dentro do código JS é possível utilizar o seguinte código:

if(Meteor.isClient){
  // Excuta código no cliente
}
if(Meteor.isServer){
  // Excuta código no servidor NodeJS
}

• apesar desta dintinção, ainda existem trechos de código JS que podem rodar tanto no client como no server. Como padrão adota-se colocar esse código dentro de uma pasta chamada "both", mas isso não é uma regra, qualquer código colocado fora das pastas client e server serão executados tanto no server quanto no client.
• a pasta lib é utilizada para dar prioridade a certos arquivos JS na aplicação sendo executadas antes.

Aplicação MeteorJS

Agora, dêem uma boa olhada no código, ele é simples o suficiente para aprender sozinho, mas vamos dar uma ajudinha e esclarecer os pontos principais.

Templates

Todo código HTML da aplicação é um template, isso permite que o mesmo trecho de código possa ser utilizado várias vezes na aplicação. O uso mais comum é criar um formulário HTML para inserir dados e utilizar o mesmo formulários para fazer alterações em dados já existentes.

Na aplicação criada, existem quatro templates dentro do arquivo HTML.

<head>
  <title>Chat</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
  {{> info}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<template name="info">
  <h2>Learn Meteor!</h2>
  <ul>
    <li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
    <li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
    <li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
    <li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
  </ul>
</template>

A primeira coisa que podemos perceber é que "falta" a tag HTML por exemplo e a META html5. Não precisamos nos preocupar com isso, o MeteorJS vai criar a estrutura corretamente.

O primeiro template criado é o <head> e ele, junto com o <body>, são templates especiais.

O segundo é o <body> e é ele que vai ser utilizado como "tela" da aplicação. Os outros dois templates serão renderizados apenas quando forem chamados. Esse tipo de aplicação é chamada de "Single Page Application" pois sempre vai renderizar o <body> e não possui outros caminhos a não ser a raíz. Aplicações mais complexas utilizam rotas, que especificam qual template deve ser carregado para cada rota.

No <body> vemos duas linhas com "comando" iniciando com {{> e terminando com }}. Estes comando são utilizados para se carregar o conteúdo de outro template e adiciona-los na posição dentro do <body>. No caso, os templates "hello" e "info" são carregados dentro do body.

Já no template "hello" vemos uma frase com uma palavra dentro de {{ e }} que é uma "variável" que contém algum valor. No MeteorJS ela é chamada de "helper" e seu valor é definido num arquivo JS.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';

Template.hello.onCreated(function helloOnCreated() {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
});

Template.hello.helpers({
  counter() {
    return Template.instance().counter.get();
  },
});

Template.hello.events({
  'click button'(event, instance) {
    // increment the counter when button is clicked
    instance.counter.set(instance.counter.get() + 1);
  },
});

No momento, vamos ignorar as 3 primeiras linhas, elas são relativas à linguagem Javascript versão ES6 e mesmo sem elas, a aplicação irá funcionar.

Em Template.hello.onCreated vemos um evento, que será executado na "criação" do template hello e cria uma variável reativa chamada counter com o valor inicial 0 (zero). Outros eventos de templates são OnRendered e OnDestroyed. Mais informações em BlazeJS.

Em Template.hello.helpers são definidor os "helpers" do template hello, ou seja, suas variáveis e define que "counter" será igual ao valor atual da variável reativa "counter". Ainda é possível criar "helpers" genéricas que podem ser utilizadas em qualquer template.

Em Template.hello.events são definidor os "events" do template hello e define que no evento "click" de qualquer tag "button" dentro do template hello irá somar 1 ao valor atual da variável reativa "counter". Existem diverso eventos como click, dbclic,k change, focus e os elementos podem ser identificados pela tag: button, pelo id: #button1 ou pelo class: .button. Mais informações em BlazeJS.

Aqui normalmente é quando os novatos em MeteorJS dizem "wowwww". A partir daí temos a aplicação funcionando com o clique do botão adicionando 1 ao valor anterior, o helper {{counter}} no template sendo atualizado automaticamente não sendo necessário nem mesmo dar um "reload". Aliás, um reload iria zerar o contador já que o template hello seria "criado" novamente.

Ainda existe um "mundo" de informações do MeteorJS, é realmente um universo muito grande. Alguns links para mais informações:

http://docs.meteor.com/ - Documentação oficial

https://atmospherejs.com/ - Pacotes para adicionar funcionalidades incríveis ao Meteor

Agora vou deixar vocês brincando com o código e na próxima publicação iremos transformar essa aplicação num Chat real, com banco de dados e login como usuário.

Abraços

Humberto Cruz