Aplicação real-time com MEAN Stack, o futuro da Web Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 3 anos, 1 mês, 1 semana, 2 dias atrás.

Cada dia mais a coisa cresce e toma forma. Quando comecei a trabalhar com Desenvolvimento Web, sabe, lá no HTML e CSS. Na época o Ajax não existia, o CSS 2 era novo e os navegadores não davam suporte ao position:absolute completamente (Internet Explorer, kk) e toda vez que queria atualizar algo em "tempo real" usava iframe. Mas ai o Javascript evoluiu de "Nem pode ser chamado de linguagem" para algo totalmente inovador e incrível, o Jquery foi uma revolução, ele facilitava as coisas, muita gente adotou a linguagem por conta dele, eu me maravilhei com as requisições assíncronas e as animações sem Flash (que eu idolatrava). E por trás dos bastidores o Javascript foi evoluindo e se tornou capaz de rodar no back-end assim como o PHP ou o Python, e é agora um dos servidores web mais rápidos atualmente.

MEAN - MongoDb, ExpressJs, AngularJs e NodeJs

Node.Js + ExpressJs formam seu back-end (servidor web + linguagem + framework), o MongoDb é o banco de dados e o AngularJs no front-end dando aquele up na aplicação. Com estes 4 caras o Ajax é natural, as requisições mais leves e rápidas e tudo entregue assim que fica pronto (non-blocking).

Mas calma lá, vou falar um pouco sobre cada um deles.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

Node.js

O primeiro servidor web em tempo real, nada de Apache, Nginx ou qualquer outra coisa, uma revolução, escrito em C++, ou seja, ele roda em uma camada muito baixa no servidor, muito mais rápido.

Mas antes que me crucifiquem, o Node.js é muito mais que um servidor web, ele é um ecossistema completo.

Ele sozinho já faz muita coisa, mas quando você junta o resto da sigla a coisa muda de figura, coisas dificeis ou inviáveis com PHP e outras linguagens acontecem naturalmente aqui.

O conceito non-blocking (não-bloqueante) é a grande sacada, imagine que o servidor é como um banco, banco daqueles de guardar dinheiro (rsrs), lá você entra, pega uma senha e senta, agora imagine que o cara na sua frente precisa pagar 4 contas, tirar um extrato dos últimos 6 meses, fazer uma transferência e sacar um valor e você só quer pagar seu cartão de crédito, agora vamos dar nomes aos bancos:

O Banco PHP vai tratar as filas de forma ordenada, ou seja, chegou primeiro eu resolvo primeiro, o que não é errado quando falamos de bancos reais, porém aqui ele é o bloqueante, já que tem que esperar a tarefa atual antes de ir pra próxima.

Já o Banco Node.Js vai tratar as filas de forma assíncrona, ou seja, ele vai pegar o primero cara a chegar e vai começar a fazer todos os processos que ele precisa, transferência e tudo mais, porém, assim que o segundo chegar com apenas uma tarefa ele vai encaixar a tarefa, concluir e voltar para terminar as demais do primeiro sujeito. Isso é non-blocking ou não bloqueante.

As coisas ficam prontas muito mais rápido e com muito menos processamento, se você trabalha com desenvolvimento front-end vai adorar o Node.Js

Express

Se temos uma linguagem back-end nada mais justo que um framework pra facilitar a vida e o Express facilita mesmo as coisas, com ele fica fácil criar as rotas (urls), as views (HTML) e tudo mais, igualzinho aos frameworks back-end existentes pra PHP, Ruby ou Python.

MongoDb

O MongoDb é um banco de dados no-sql que aceita anotações em Json para gravar os dados nos documentos (sim, ao invés de tabelas e colunas temos documentos) o que é fantástico para se trabalhar com Javascript, ele está disponível para todos os sistemas operacionais e é super simples de usá-lo com PHP também (com o qual vem ganhando um certo respeito devo dizer).

AngularJs

Esse dispensa apresentações, o AngularJs já é conhecido pelos devs PHP (inclusive os que usam frameworks como ZF2, Laravel ou CakePHP) e acreditem, o resultado da integração com NodeJs, Express e MongoDb é mais incrível ainda, você vai usar o framework front-end da Google com tanta naturalidade que depois que se acostumar o processo vai ser tão natural que usar ele em outro ambiente vai ficar pouco prático ao seus olhos.

Instalação do MEAN Stack

O ideal é ter o MEAN Stack rodando em ambiente Linux, eu juro que até instalei tudo aqui no Windows, mas acabei refazendo o trabalho no Vagrant, da muito problema, então se você vai começar esqueça Windows agora e siga o meu conselho (você não vai precisar trocar de SO, calma).

Configurando o Vagrant

Pra começar baixe e instale o Vagrant no seu SO (Sistema Operacional), é super simples em qualquer um deles, se não conseguir pare agora, abra o MS Word e escreva um currículo.

Após isso, vá a um diretório que quer usar para seus arquivos e rode os comandos a baixo, note que vou passar alguns parâmetros entre chaves duplas ( {{}}, igual no AngularJs pra você já ir praticando, rsrs) .

vagrant box add {{title}} {{url}}
vagrant init {{title}}
vagrant up

Antes de rodar você vai precisar definir alí o title e o url, o title é apenas pra você conseguir rodar seu sistema operacional emulado mais tarde (chamamos isso de box no Vagrant), a url você pode ir em http://www.vagrantbox.es escolher um SO Linux na lista, eu escolhí o Ubuntu porque gosto dele e uso desde sempre (mais ou menos, né), com as variáveis definidas meus comandos ficaram assim:

vagrant box add ubuntu14 https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box
vagrant init ubuntu14 
vagrant up

O primeiro comando baixa e instala a imagem e isso pode demorar muito já que a minha imagem tinha 362mb, o segundo configura a imagem no diretório atual e a terceira inicia o box e você vai ter que usá-lo sempre antes de iniciar.

Com isso pronto, você pode acessar sua box ssh usando o Putty (http://www.putty.org), o programa é muito pequeno e nem precisa estar instalado pra rodar, antes de acessar você vai precisar dos dados de conexão então rode o comando:

    vagrant ssh

No linux o processo é bem simples, o comando já até acessa a máquina virtual, já no Windows ele vai exibir os dados pra você conectar, inclusive o caminho até uma Private Key que te consede acesso ao box, mas pra isso você vai precisar do PuTTYGen (no mesmo site do Putty você baixa ele) para gerar a chave, tem muito material na internet sobre isso, pra encurtar o post vou imaginar que você conseguiu:

  • Gerar a Private Key
  • Configurar ela no Putty
  • Logar no SSH do seu Box

Após se conectar no Vagrant você vai ter um diretório /vagrant na raiz do SO emulado (o Ubuntu no meu caso) que compartilha o conteúdo com o diretório que você deu o vagrant init e o vagrant up, então é só você ir traalhando no seu Windows normalmente que os arquivos ficam disponíveis na sua Maquina Virtual também.

O NodeJs, MongoDb e o Express

É fácil, é só rodar o comando a seguir:

sudo apt-get install nodejs mongodb npm

Depois que ele instalar os 3, basta instalar o Express:

sudo npm -g express

Prontinho, tudo instalado, é muito fácil instalar pacotes no Ubuntu e não seria difícil nem se fosse outro Linux ou SO, instalar estes pacotes não é problema pra ninguém.

E agora?

Bem, espero falar mais sobre MEAN aqui em breve, realmente estou gostando muito do que estou vendo e o rumo que isso está tomando.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!