Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Isomorphic JavaScript

Desenvolvimento Rápido de Aplicações Web Com Meteor

by
Read Time:5 minsLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Meteor provê-nos uma fluxo rápido de desenvolvimento para criar aplicativos web isomórficos que *funcionam*. A arquitetura do Meteor é bonita de verdade, de modo que ela atualizará todos os clientes conectados ao app, simultaneamente, por padrão. Isso traz muitas implicações ao criar apps web reativos.

Instalando Meteor

Meteor foi pensado para ser fácil e, felizmente, essa filosofia é levada a sério desde o começo.

A instalação é tão simples quanto esse comando no Linux/macOS:

Usuários do Windows podem usar o instalador oficial.

Criando Um App

Isso é feito pela linha de comando com o comando meteor. Para criar um novo app chamado my_meteor_app no diretório inicial, façamos o seguinte.

Agora, podemos acessar nosso app meteor em https://localhost:3000—porta 3000 é a padrão.

Estrutura de Arquivos

Por padrão, teremos os seguintes arquivos criados:

O arquivo my_meteor_app.html contem o HTML requerido para mostrar a página—Meteor usa a sintaxe do handlebar, com chaves. Todo o código nos arquivos HTML é compilado com o compilador do Meteor, Spacebars. Spacebars usa declarações envoltas por duas chaves como {{#each}} e {{#if}} permitindo adicionar lógica e dados às visões.

Podemos passar dados para os modelos direto do código JavaScript, ao definir funções auxiliares, e para iterar sobre vetores podemo susar {{#each items}}.

O arquivo my_meteor_app.js contem o JavaScript requerido no cliente quanto no servidor. Quaisquer eventos ou diretivas para o cliente podem ser especificadas nesse arquivo.

O arquivo css é para estilizar o app e, por padrão, em branco.

Como os Arquivos HTML Funcionam

Meteor analisa todos os arquivos HTML na pasta app e identifica três tags: <head>, <body> e <template>.

Tudo dentro de <head> é adicionado ao head do HTML enviado ao cliente, e tudo dentro de <body> é adicionado à seção body, como qualquer arquivo HTML padrão.

Tudo dentro de <template> é compilado nos modelos do Meteor, que podem ser inseridos em HTML com {{>templateName}} ou referenciados no JavaScript com Template.templateName.

Exemplo Funcional

Alteremos o HTMl padrão por:

Aqui, especificamos um template e um laço {{#each}} para criar uma lista. Finalizemos o exemplo editando my_meteor_app.js:

Veja o resultado no navegador no resultado final. Agora, podemos dar continuidade, implementando dados persistentes com coleção do MongoDB.

Dados Persistentes Com MongoDB

Meteor facilita o trabalho com dados. Com coleções, o dado está disponível em qualquer parte do código, já que pode ser acessado tanto no cliente quanto no servidor. Isso facilita a criação de lógica de visão e auto atualização da página.

No Meteor, qualquer componente de visão ligado a uma coleção de dados mostrará automaticamente as últimas mudanças dos dados, logo é reativo em tempo real.

Alteremos my_meteor_app.js fazendo-o usar MongoDB, assim:

A linha Tasks = new Mongo.Collection("tasks"); diz para o Meteor preparar uma coleção do MongoDB chamada tasks.  O que o Meteor faz com isso é criar uma conexão em cache à coleção do servidor.

Para inserir dados, podemos usar o terminal do servidor. Para iniciá-lo, acessemos o diretório do app e executemos isso (enqunto meteor estiver rodando em uma outra aba):

Agora, dentro do do console do MongoDB do app, adicionemos um registro:

Olhemos o navegador para para vermos as atualizações. Abramos a ferramenta de desenvolvedores no console e:

Noss alista atualizará automaticamente na tela. Abramos um janela separada do navegador. Executemos outra inserção no cosole.

Veremos ambas as instâncias atualizar em tempo real sem qualquer atualização da página. Imaginemos as implicações da atualização da base de dados e o Meteor atualizando os clientes.

É por isso que é fácil criar uma experiência reativa de verdade num app com Meteor. Os usuários poderão ver atualização colaborativa, em tempo real, no navegador.

Pacotes do Meteor

O projeto do meteor tem um servidor público de pacotes  isobuild. Permitindo-nos adicionar funcionalidades aos apps Meteor, rapidamente, instalando pacotes através do comando meteor add <nome do pacote>.

Adicionando Pacotes npm

Meteor também pode adicionar pacotes npm através do comando meteor add <nome do pacote>. Tornemos nossa tela mais bonita, adicionando o pacote moments para fácil formatação de datas.

Agora que temos o moments disponível no app, podemos usá-lo. Não precisamos incluí-lo manualmente.

Editemos o modelo HTML, assim:

Agora, atualizamos nossas funções auxiliares em my_meteor_app.js:

Voltemos ao navegador, desde que o comando meteor esteja executando no terminal, veremos nossa lista atualizada, com o moments provendo a medição de tempo. Legal!

OAuth

Adicionar autenticação OAuth ao app é bem simples. Podemos fazê-lo adicionando dois pacotes via:

Uma vez adicionados ao app, podemos adicionar {{> loginButtons}} no modelo do my_meteor_app.html. Recarregando o navegador, veremos o botão para configurar o recurso do login com Google. Sigamos os passos providos e pronto—simples assim.

Conclusão

Meteor é um framework fantástico que ganha cada vez mais popularidade e é fácil ver o porque, dada a simplicidade do projeto e implementação de pacotes. Rápida prototipação de apps em uma semana não é algo demais se temos o Meteor.

Se quiser aprender mais sobre Meteor, continue lendo online na excelente documentação.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.