Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Apresentando meteor! Join Community - Goiânia

670 views

Published on

Construa aplicativos de uma maneira incrivelmente simples com Meteor. Uma plataforma fullstack JavaScript. #nodejs #mongodb

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Apresentando meteor! Join Community - Goiânia

  1. 1. Nunca foi tão fácil desenvolver apps para web e mobile
  2. 2. 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
  3. 3. 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?
  4. 4. As gerações de aplicações web
  5. 5. A primeira geração ● Páginas estáticas ● CGI no servidor
  6. 6. A segunda geração ● Páginas dinâmicas ● Scripting no servidor como ASP, JSP, PHP
  7. 7. A terceira geração ● Páginas dinâmicas ● Scripting no servidor como ASP, JSP, PHP ● Scripting no Cliente
  8. 8. A quarta geração ● Separação cliente e servidor ● Servidor (backend) recebe requisições ● Cliente (frontend) consome páginas
  9. 9. A quinta geração ● Separação cliente e servidor ● Cliente (frontend) é uma app escrita em JS ● Servidor (backend) recebe e gera dados via REST
  10. 10. 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
  11. 11. Em que linguagem desenvolvemos web apps?
  12. 12. Em que linguagem desenvolvemos mobile apps?
  13. 13. Que tal apenas uma linguagem?
  14. 14. 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.
  15. 15. Quais ferramentas eu preciso? Ferramentas: editor, terminal e browser IDE’s online: Cloud9, Codebox IDE: Webstorm (baseada no IntelliJ)
  16. 16. 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
  17. 17. 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
  18. 18. Sistemas operacionais suportados
  19. 19. Quanto custa?
  20. 20. 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
  21. 21. Como iniciar? $ curl https://install.meteor.com | /bin/sh $ meteor create mytwitter $ cd mytwitter
  22. 22. Arquivos gerados - mytwitter.html - mytwitter.js - mytwitter.css $ meteor run
  23. 23. Hello world!
  24. 24. 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>
  25. 25. 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>
  26. 26. 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() }); } } });
  27. 27. mytwitter.js (mesmo arquivo) Template.timeline.helpers({ mensagens: function() { return Mensagem.find(); }; }); } if(Meteor.isServer) { Meteor.startup(function () { Mensagem.remove({}); console.log('Rodando myTwitter'); }); }
  28. 28. $ meteor deploy mytwitter.meteor.com
  29. 29. Aplicativos rodando
  30. 30. 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/
  31. 31. Obrigado! f7academy.com.br fredmaia.com

×