Meteor - Nunca foi tão fácil desenvolver pra web e mobile

Preview:

Citation preview

meteornunca foi tão fácil desenvolver para

web e mobile

about me

Frederico Maia Arantes

Goiânia -> Rio de Janeiro

7 anos desenvolvendo software

Desenvolvedor na Petrobras TecSinapse

Instrutor na Caelum

como desenvolvemos web apps?

como desenvolvemos mobile apps?

que tal apenas uma linguagem?

ferramentas: editor, terminal e browser

IDE’s online: C9, Codebox

mesmo código para backend e frontend

mais vantagens?

aplicações real-time e reativas

smart packages (like jars, gems)

comunidade bastante ativa

simplicidade igual à produtividade

fácil, muito fácil, de aprender

mais vantagens?

open source

apps web e mobile (android, iOS)

ferramenta de build única

hot deploys

afinal o que é meteor?

framework full-stack baseado em Node.JS e MongoDB para desenvolvimento de aplicações real-time para web e mobile em JavaScript,

permitindo rápida prototipação e desenvolvimento.

plataformas

alguns números

5540 packages308k instalações únicas25.332 stars no GitHub

top 10 projects$20 milhões

como usar?

$ curl https://install.meteor.com | /bin/sh

$ meteor create mytwitter

$ cd mytwitter

arquivos gerados

mytwitter.html

mytwitter.js

mytwitter.css

$ meteor run

hello world

mytwitter.html<head> <title>myTwitter</title></head><body> {{> formulario }} {{> mensagens }}</body>

<template name="formulario">

<form> <input type="text" id="nome" placeholder="Nome" /> <textarea id="msg" placeholder="Mensagem"></textarea> <button type="submit">Enviar mensagem</button>

</form></template>

mytwitter.html (mesmo arquivo)<template name="timeline"> <h2>Mensagens</h2> {{#each mensagens}} <hr> <p class="mensagem"> {{mensagem}} <br> <small>{{nome}} {{data}}</small> </p> {{else}} <p class="info">Nenhuma mensagem publicada.</p> {{/each}}</template>

mytwitter.jsMensagem = new Meteor.Collection('mensagens');if(Meteor.isClient) { Template.formulario.events({ 'submit form': function(event, template) { var nome = template.find('#nome').value; var mensagem = template.find('#msg).value; Mensagem.insert({ nome: nome, mensagem: mensagem, data: new Date().toLocaleString()

}); event.preventDefault(); } });

mytwitter.js (mesmo arquivo) Template.timeline.helpers({

mensagens: function() { return Mensagem.find(); }; });

}

if(Meteor.isServer) { Meteor.startup(function () { Mensagem.remove({}); console.log('Rodando myTwitter'); });}

$ meteor deploy mf-mytwitter.meteor.com

http://mf-mytwitter.meteor.com/

referências

Site oficial - http://meteor.comBlog do Caio - http://udgwebdev.comBlog do Allan - http://allandequeiroz.comDavid Turnbull - http://www.sitepoint.comLivro: Meteor - Caio Ribeiro, Casa do Código

obrigado!

● fredericomaia10@gmail.com● fredericomaia● fredmaia