Meteor.js: Construindo aplicações web com Node.js e MongoDB

Aprenda como integrar sua aplicação cliente com o servidor construindo um aplicativo quiz de perguntas e respostas com o Meteor.js.

Fique por dentro
Este artigo tem como principal objetivo demonstrar o uso do Meteor.js para a construção de aplicações web que rodem tanto no cliente quanto no servidor.

Criaremos um aplicativo de quiz dinâmico de perguntas, que pode ser facilmente adaptado para outras ferramentas de pesquisa de opinião, testes e provas online, etc.

Neste, o usuário poderá criar novos tópicos e assimilar opções a cada um, tendo os dados sincronizados em tempo real tanto no conteúdo web quanto para o banco de dados.

O Meteor.js flexibiliza essa implementação ao possibilitar que o código tenha o deploy feito de forma automática, isto é, sempre que salvarmos qualquer arquivo no projeto as alterações se espelharão para todos os clientes navegadores sem a necessidade de reload da página.

Além disso, aprenderemos a lidar com os packages do framework, que são recursos para importação de bibliotecas JavaScript de terceiros, como o Bootstrap que usaremos para o estilo da aplicação.

Prototipagem é uma prática que permite que as aplicações sejam estruturadas conforme modelos de código ou via estruturas de marcação (XML, HTML, etc.), possibilitando assim que os dados sejam customizados em detrimento da fonte de dados.

O Meteor, ou MeteorJS, é um framework web JavaScript open-source escrito em Node.js. Ele foi inicialmente introduzido à comunidade em dezembro de 2011 com o nome de Skybreak e foi adquirido pelo Meteor Development Group da startup Y Combinator em 2014 com o objetivo de expandir o suporte (já fornecido) a banco de dados.

Através dele conseguimos desenvolver rapidamente código de protótipos para aplicações tanto web rodando em browsers, quanto para dispositivos móveis (Android, iOS, Windows Phone, etc.). Com ele, podemos também facilmente integrar a aplicação com o MongoDB (Banco de dados NoSQL baseado em documentos JSON) e usar o protocolo DDP (Distributed Data Protocol) para propagar as mudanças nos dados para todos os clientes do serviço em tempo real sem requerer qualquer código de sincronização específico.

Neste artigo trataremos de esclarecer os principais tópicos que envolvem esse framework por meio da construção de um aplicativo de quiz de perguntas: o usuário terá acesso a uma tela de cadastro de perguntas e respectivas opções, assim como a lista de perguntas já criadas irá aparecer abaixo do formulário.

O usuário também terá uma pré-lista de perguntas criada quando ele acessar a aplicação a primeira vez, já que ainda não teremos dados populados.

As informações serão armazenadas simultaneamente no banco de dados tanto do lado cliente quanto do servidor e qualquer alteração em um ou outro será automaticamente impressa no browser, independente do cliente a acessar (Firefox, Chrome, WebView, etc.).

No final faremos uma tela de login com o Open Auth utilizando a API do Facebook para isso. O usuário, portanto, será direcionado para a tela de login e, uma vez logado com sucesso, será redirecionado para a tela do quiz.

O que é o Meteor?

O conceito de Meteor vai além de um simples framework, ele funciona como uma plataforma completa que envolve tecnologias como linguagem de programação, banco de dados e serviços web.

Em comparação com o AngularJS, por exemplo, que é um framework amplamente usado para integrar serviços e regras de negócio no lado front-end da aplicação, o Meteor vai além e consegue lidar com a mesma lógica tanto no lado cliente quando no servidor do sistema.

Veja na Figura 1 uma representação gráfica de como o framework é dividido bem como os tipos de ferramentas que ele suporta.

Perceba que os itens marcados em negrito representam as tecnologias que o Meteor já traz consigo por padrão, ao passo que os demais tratam-se de itens também aceitos mas que precisam ser baixados e instalados no ambiente.

Figura 1. Divisão dos componentes e dependências do Meteor

O Meteor é baseado em sete princípios, a saber:

Além disso, o Meteor também lida com os conceitos de empacotamento dos binários do projeto via atmosphere.js ou via npm do Node.js. Você também pode usar os pacotes do Cordova/PhoneGap para realizar esse trabalho.

Não é mais preciso, por exemplo, configurar o Gulp para fluxos de controle e automação diretamente no código, o Meteor já tem o próprio recurso interno para manter todas as dependências alinhadas e sincronizadas.

E para conectar com serviços e APIs externos você pode fazer uso do protocolo DDP que citamos, que funciona como um gerenciador de updates: sempre que uma mudança acontecer no servidor sua aplicação será notificada automaticamente.

Meteor e o JavaScript

A principal linguagem de programação usada para desenvolver com o Meteor é o JavaScript. Mas você também pode fazer uso de similares como o CoffeeScript (que no fim gera JavaScript), jQuery, etc. Como o Node.js é baseado em JavaScript, se você quiser ter total suporte no lado servidor e cliente é importante usar essa linguagem como padrão." [...] continue lendo...

Artigos relacionados