31
Nunca foi tão fácil desenvolver apps para web e mobile

Apresentando meteor! Join Community - Goiânia

Embed Size (px)

Citation preview

Page 1: Apresentando meteor! Join Community - Goiânia

Nunca foi tão fácil desenvolver apps para web e mobile

Page 2: Apresentando meteor! Join Community - Goiânia

Sobre mim

Frederico Maia Arantes

● 8 anos de experiência em desenvolvimento de software

e mais de 4 anos ministrando cursos de Java

● Líder e Desenvolvedor Full Stack na TecSinapse

atuando com Java, Scala, JavaScript (Meteor)

● Palestrante em diversos eventos de tecnologia

● Cofundador e Instrutor na F7 Academy

Page 3: Apresentando meteor! Join Community - Goiânia

Sobre a palestra

● As gerações de aplicações web

● Como desenvolvemos web e mobile apps?

● Que tal uma linguagem apenas?

● Quais as vantagens?

● Afinal, o que é meteor?

● Como iniciar?

● Onde estudar mais?

Page 4: Apresentando meteor! Join Community - Goiânia

As gerações de aplicações web

Page 5: Apresentando meteor! Join Community - Goiânia

A primeira geração

● Páginas estáticas

● CGI no servidor

Page 6: Apresentando meteor! Join Community - Goiânia

A segunda geração

● Páginas dinâmicas

● Scripting no servidor como ASP, JSP, PHP

Page 7: Apresentando meteor! Join Community - Goiânia

A terceira geração

● Páginas dinâmicas

● Scripting no servidor como ASP, JSP, PHP

● Scripting no Cliente

Page 8: Apresentando meteor! Join Community - Goiânia

A quarta geração

● Separação cliente e servidor

● Servidor (backend) recebe requisições

● Cliente (frontend) consome páginas

Page 9: Apresentando meteor! Join Community - Goiânia

A quinta geração

● Separação cliente e servidor

● Cliente (frontend) é uma app escrita em JS

● Servidor (backend) recebe e gera dados via REST

Page 10: Apresentando meteor! Join Community - Goiânia

A próxima geração

● Separação cliente e servidor apenas física

● Uma linguagem e apenas uma base de código

● Propagação de dados transparente

Page 11: Apresentando meteor! Join Community - Goiânia

Em que linguagem desenvolvemos web apps?

Page 12: Apresentando meteor! Join Community - Goiânia

Em que linguagem desenvolvemos mobile apps?

Page 13: Apresentando meteor! Join Community - Goiânia

Que tal apenas uma linguagem?

Page 14: Apresentando meteor! Join Community - Goiânia

Afinal o que é ?

Plataforma full stack baseada em Node.JS e MongoDB para desenvolvimento de single page

apps reativas para web e mobile em JavaScript. Permite rápida prototipação e desenvolvimento.

Page 15: Apresentando meteor! Join Community - Goiânia

Quais ferramentas eu preciso?

Ferramentas: editor, terminal e browser

IDE’s online: Cloud9, Codebox

IDE: Webstorm (baseada no IntelliJ)

Page 16: Apresentando meteor! Join Community - Goiânia

Quais as vantagens?

Mesmo código para backend e frontend

Aplicações real-time e reativas

Smart packages (como jars, gems)

Comunidade bastante ativa

Simplicidade igual à produtividade

Page 17: Apresentando meteor! Join Community - Goiânia

Quer mais vantagens?

Apps web e mobile (Android, iOS)

Ferramenta de build única

Integrado ao NPM

Hot deploys

Fácil, muito fácil, de aprender

Page 18: Apresentando meteor! Join Community - Goiânia

Sistemas operacionais suportados

Page 19: Apresentando meteor! Join Community - Goiânia

Quanto custa?

Page 20: Apresentando meteor! Join Community - Goiânia

Alguns números impressionantes

5.540 10.767 packages

308k 508k instalações únicas

25.332 33.773 estrelas no GitHub

21.254 questões no stack overflow

Page 21: Apresentando meteor! Join Community - Goiânia

Como iniciar?

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

$ meteor create mytwitter

$ cd mytwitter

Page 22: Apresentando meteor! Join Community - Goiânia

Arquivos gerados

- mytwitter.html

- mytwitter.js

- mytwitter.css

$ meteor run

Page 23: Apresentando meteor! Join Community - Goiânia

Hello world!

Page 24: Apresentando meteor! Join Community - Goiânia

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>

Page 25: Apresentando meteor! Join Community - Goiânia

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.</p> {{/each}}</template>

Page 26: Apresentando meteor! Join Community - Goiânia

mytwitter.js

Mensagem = 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()

}); }

}});

Page 27: Apresentando meteor! Join Community - Goiânia

mytwitter.js (mesmo arquivo)

Template.timeline.helpers({

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

}

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

Page 28: Apresentando meteor! Join Community - Goiânia

$ meteor deploy mytwitter.meteor.com

Page 29: Apresentando meteor! Join Community - Goiânia

Aplicativos rodando

Page 30: Apresentando meteor! Join Community - Goiânia

Onde estudar mais?

Site oficial - http://meteor.com/

David Turnbull - http://www.sitepoint.com/

Discover Meteor - http://discovermeteor.com/

F7 Academy - http://f7academy.com.br/