Post on 11-Apr-2017
Nunca foi tão fácil desenvolver apps para web e mobile
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
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?
As gerações de aplicações web
A primeira geração
● Páginas estáticas
● CGI no servidor
A segunda geração
● Páginas dinâmicas
● Scripting no servidor como ASP, JSP, PHP
A terceira geração
● Páginas dinâmicas
● Scripting no servidor como ASP, JSP, PHP
● Scripting no Cliente
A quarta geração
● Separação cliente e servidor
● Servidor (backend) recebe requisições
● Cliente (frontend) consome páginas
A quinta geração
● Separação cliente e servidor
● Cliente (frontend) é uma app escrita em JS
● Servidor (backend) recebe e gera dados via REST
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
Em que linguagem desenvolvemos web apps?
Em que linguagem desenvolvemos mobile apps?
Que tal apenas uma linguagem?
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.
Quais ferramentas eu preciso?
Ferramentas: editor, terminal e browser
IDE’s online: Cloud9, Codebox
IDE: Webstorm (baseada no IntelliJ)
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
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
Sistemas operacionais suportados
Quanto custa?
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
Como iniciar?
$ 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.</p> {{/each}}</template>
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()
}); }
}});
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 mytwitter.meteor.com
Aplicativos rodando
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/
Obrigado!
f7academy.com.br
fredmaia.com