Tip:
Highlight text to annotate it
X
Oi, pessoal!
Tô aqui de volta
com o segundo vídeo da série METEOR.
Nesse vídeo eu vou mostrar
a programação relativa.
Bom...
Primeira coisa,
vamos lá criar um projetinho
meteor create
E a bateria está acabando...
reativa
Este é o "scaffold" do Meteor
Uma
clara
inspiração no RAILS
Vamos lá... mas antes disso
são três arquivos: reativa.css, reativa.html e reativa.javascript (js)
Tem um diretório .meteor que
por enquanto não interessa
Vamos lá... meteor run
Na verdade é... meteor
Ele vai subindo lá o servidor
ok... tá subindo ainda
mas eu já colo os endereços aqui
O Chromium e o Firefox esperando
e PÁ !
Beleza ! Tá OK !
Hum... Hello World
Na verdade ela abre o console aqui no Chromium
Veja só
You pressed the button
Que beleza né?
Bom, até agora nada demais
Mas daí
e eu não vou no meu gEDIT
reativa... vou abrir estes 3 arquivos e vocês vão ver
No CSS não tem nada
e ele vai terminar esta apresentação também sem nada
Eu vou fechá-lo então.
E aqui os dois aquivos que mais me importam
reativa.html
tá vendo que não tem as tags html e outras firulas
mas
aqui a gente tem um template chamado hello
um , um hello world
uma construção
extranha aqui
greeting
e um botão
No Javasript
tem dois grandes blocos
um metor
isClient
e outro if meteor.isServer
Dentro do client, a gente tem duas
duas variáveis: Template.hello.greeting
que por si
ambas são
funções
Uma que retorna
a mensagem "Welcome to reativa"
e a outra...
a outra...
é um tratador de evento
do evento click
para o meu input
o que ele vai fazer?
Logar...
no console
que alguém pressionou o botão.
Vou diminuir aqui
Vocês verão uma pequena mágica
Vou alterar... "Bem-vindo ao
incrível mundo da
programação reativa
Beleza? Vamos salvar?
Opa! O Chromium e o Firefox
os dois pegaram
esta alteração.
Se vocês olharem aqui embaixo no terminal
METEOR
server
restarted
Ele reiniciou sozinho!
Poxa, mas vc vai falar O Rails faz isso!
É, o Rails faz isso.
Um undeploy e um deploy, né?
Isso é simples. Ele deve estar verificando...
Algum arquivo mudou? Bom, mudou! Então faz o seguinte: para tudo,
recarrega e...
Beleza !
Só que o detalhe:
em nenhum outro ambiente, em nenhuma outra plataforma
o browser
ou os browsers
Fariam esse refresh automático
Eles fizeram este refresh automático
O que que eu vou fazer?
Eu vou mudar agora
o title para
Pro -
gra - ma - ção
reativa com Meteor
E o Hello
aqui
Olá Mundo Cruel
e vou salvar.
Olha só que beleza !
Os 2 browsers
perceberam
que foi alterado o meu código
lá um servidor
e o browser,
os 2 browsers,
mas se eu colocasse um terceiro browser, ele também iria fazer esse refresh automático
Legal, né?
Mas tem mais.
Eu vou fazer um
negócio aqui.
Seguinte...
planetas
new Meteor.Collection
"planetas"
Defini uma variável
chamada planetas...
O Meteor server fez um novo restart
mas com três
Vou aqui no Chromium que é onde eu estou acostumado
mais com o console...
planetas
Olha só!
Ele conhece a minha variável
planeta que o defini
aqui no meu javascript.
Interessante...
Só que agora eu vou fazer
outra coisa.
A gente vai vir aqui
e vai fazer um
outro template.
template name
planetário
Essa linguagem aqui
de template
se chama HandleBars.
O que que eu vou fazer?
Você viu que o HandleBars são duplas chaves
abre e fecha duplamente
e isso indica que é uma
tag especial do HandleBars.
O que eu vou fazer aqui?
Vou fazer um each... isso aqui é um for each
planetas
Se não me engano a sintaxe é esta.
Aqui
vou fazer uma lista
com ul
e aqui
nome
Montei o template
planetário
aqui eu tenho um for each
em cima de planetas.
Esta construção aqui
que começa como sinal de maior
Ela indica
que
deve ser inserido um template que está definido
em algum lugar desse arquivo
planetário
Não vou salvar
por enquanto.
Aqui eu tenho planetas
greeting
aí, o que eu vou fazer aqui?
Aqui a gente tem
template
planetário
planetas
vai ser igual uma function
return...
Nesse return, eu vou retornar
todos
os planetas
disponíveis
nessa minha coleção.
A coleção chama planetas
vou dar um find
ok
Eu não sei se a sintexe está correta
pode ter algum erro
mas
eu vou salvar
salvei aqui e salvei aqui
5 restarts
Nada, né? Nada.
O que eu vou fazer agora?
planetas
certo?
Uma collection
do Meteor.
Na verdade, isso aqui é uma collection do Mongo
planetas.insert
Olha o que que eu vou fazer
Nessa coleção
chamada planetas, eu vou colocar um planeta
Mercúrio
vamos por um outro atributo
cor.. vermelho
Se a sintaxe estiver certa
KKKKKKK
Ah, que beleza !
Olha só, gente... eu inserir
um elemento dentro da collection planeta
pelo BROWSER !!!!
Pelo Chromium!
E ela já
já afetou
a página do Chromium e do Firefox.
Isso é programação reativa!
Esse template do Meteor... Ele estava ciente
que uma estrutura de dados que é essa collection de planetas
Se ela foi alterada
e ele vai
fazer este refresh.
Isso é incrível, incrível, incrível !
Imagina isso numa aplicação web
*** REALTIME ***
isso acontecendo.
Vou fazer mais uma, só que no Firefox
no Firefox
se a bateria não acabar...
Vamos ser rápido!
nome
vou chamar Vênus, cor azul
e vamos inserir
mais esse.
Olha alí que beleza! Aqui também !
Bom, gente. Isso é a programação esportiva do METEOR.