Yo! Geradores
modernos com
Yeoman
● Arq. Sistemas na CI&T ~8 anos
● JAVA, C#, JS, PHP, Perl, Python (...)
● Músico, Yogui e Geek
github: sidharta
instagram:...
#dicaDoSid
fique atento às #dicasDoSid!
Como ser
produtivo?
vs
Hulk:
● Força bruta!
● Mais código
● Muito rápido
● Difícil de achar
● ou se tornar
○ (ninguém quer ser verde)
Iron Man:
● Ferramentas!
● Menos código
● Atalhos, IDEs
● Fácil de disseminar
○ (todo mundo quer ser milionário)
Qual é melhor?
Esse é o GP!
Esse é o Sid!
57
armaduras diferentes do Iron Man
https://en.wikipedia.org/wiki/Iron_Man%27s_armor
Hulkbuster
Armor
As its name suggests, it was
specifically designed for hand-to-
hand combat with the rampaging
Hulk. [......
#dicaDoSid
utilize ferramentas para
transformar sua produtividade!
Ferramentas de Produtividade
● Frameworks, Bibliotecas …
● Snippets, shortcuts, scripts …
● IDEs, live reload, hot deploy ...
investimento
Scaffolding
é um termo [...] de engenharia civil,
que denota a colocação de
andaimes e outras estruturas para
suportar tem...
Scaffolding
● Grails (Groovy)
● Rails (Ruby)
● Spring Roo (Java)
● Cake (PHP)
Novo paradigma...
… vem com muitas outras ferramentas!
YO!
● Lançado no Google I/O'12
● Google Chrome Dev. Team
● Comunidade ativa
● yeoman.io
● github.com/yeoman
● CLI em Node.js
● Interface interativa
● Baseado em templates
● Modular
● Ecossistema:
○ Scaffolding Tool (yo)
○ Build To...
● Inicia um projeto em seg.
● Inicia partes do projeto
● Define práticas e padrões
● Foca no desenvolvimento
● Extremament...
3288
geradores registrados, sendo que 21 são oficiais
● generator-angular
● generator-polymer
● generator-webapp
● generator-bootstrap
● generator-mobile
Geradores - Oficiais...
Geradores - Comunidade...
● Javascript: Express, Mean, React, Meteor
● Mobile: Android, IOS, Ionic, Cordova, Titanium,
● J...
● http://yeoman.io/learning
● Dependências:
○ Node.js v0.10.x+
○ npm v2.1.0+
○ git
Como instala?
$ npm install -g yo bower...
Como procura geradores?
● http://yeoman.io/generators/
● Ou pela linha de comando yo
$ yo
#dicaDoSid
utilize o --help quando tiver
dúvida, ele realmente ajuda!
Talk is cheap.
Show me the code.
- Linus Torvalds
Exemplo 1: webapp
● Instale o gerador:
○ https://github.com/yeoman/generator-webapp
$ npm install --global generator-webapp
Exemplo 1: webapp (cont.)
● Execute o gerador:
● ou apenas pelo yo:
$ yo webapp
$ yo
Exemplo 1: webapp (cont.)
● O que foi gerado?
○ Tela index, links
○ Tasks grunt:
■ wiredep, concat, uglify, revision, mini...
Exemplo 2: angular
● Instale o gerador:
○ https://github.com/yeoman/generator-angular
$ npm install --global generator-ang...
Exemplo 2: angular (cont.)
● Execute o gerador:
● Execute um sub-gerador:
$ yo angular
$ yo angular:route <nome_da_rota>
#dicaDoSid
use subgeradores para
incrementar os projetos
(mesmo em andamento)!
Criando um gerador
● Para aparecer na lista do site basta:
○ Ser público no github
○ Ter um keyword: yeoman-generator
○ Te...
Criando um gerador (cont.)
● Instale o gerador de gerador:
○ https://github.com/yeoman/generator-generator
● Estende yeoma...
Exemplo 3: angular-custom
● Forma mais fácil é clonar um existente :)
● Ex.: Adicionar funcionalidade ao gerador angular:
...
Exemplo 4: jhipster
● Instale o gerador:
○ https://github.com/jhipster/generator-jhipster
$ npm install --global generator...
#dicaDoSid
personalize a ferramenta para
adequar ao seu cenário!
Cases geradores
● Geradores baseados em APT + Freemarker
○ Projeto java, jsf, spring
○ ~20 funcionalidades geradas (de 200...
#dicaDoSid
contribua com a comunidade!
https://goo.gl/MnmmFd
Perguntas?
Obrigado! http://ciandt.com
snoleto@ciandt.com
Yo! Geradores modernos com Yeoman!
Yo! Geradores modernos com Yeoman!
Yo! Geradores modernos com Yeoman!
Yo! Geradores modernos com Yeoman!
Próximos SlideShares
Carregando em…5
×

Yo! Geradores modernos com Yeoman!

518 visualizações

Publicada em

O que acha de utilizar técnicas de scaffolding para suas aplicações? Gerando funcionalidades, entidades e com isso melhorando a produtividade do seu projeto? O Yeoman é um ecossistema de geração de código implementado em cima do Node.js. Veja como é possível utilizar o Yo! para geração de código e melhoria de produtividade em sua arquitetura e os benefícios que você terá!

Publicada em: Software
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
518
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Yo! Geradores modernos com Yeoman!

  1. 1. Yo! Geradores modernos com Yeoman
  2. 2. ● Arq. Sistemas na CI&T ~8 anos ● JAVA, C#, JS, PHP, Perl, Python (...) ● Músico, Yogui e Geek github: sidharta instagram: sidharta linkedin: sidhartanoleto fb: sidhartanoleto twitter: @sidhartanoleto @bio Sidharta Noleto
  3. 3. #dicaDoSid fique atento às #dicasDoSid!
  4. 4. Como ser produtivo?
  5. 5. vs
  6. 6. Hulk: ● Força bruta! ● Mais código ● Muito rápido ● Difícil de achar ● ou se tornar ○ (ninguém quer ser verde)
  7. 7. Iron Man: ● Ferramentas! ● Menos código ● Atalhos, IDEs ● Fácil de disseminar ○ (todo mundo quer ser milionário)
  8. 8. Qual é melhor?
  9. 9. Esse é o GP! Esse é o Sid!
  10. 10. 57 armaduras diferentes do Iron Man https://en.wikipedia.org/wiki/Iron_Man%27s_armor
  11. 11. Hulkbuster Armor As its name suggests, it was specifically designed for hand-to- hand combat with the rampaging Hulk. [...] During its maiden run, the armor enabled Stark to hold his own in sustained physical combat with the Hulk.
  12. 12. #dicaDoSid utilize ferramentas para transformar sua produtividade!
  13. 13. Ferramentas de Produtividade ● Frameworks, Bibliotecas … ● Snippets, shortcuts, scripts … ● IDEs, live reload, hot deploy … ● Geradores de Código
  14. 14. investimento
  15. 15. Scaffolding é um termo [...] de engenharia civil, que denota a colocação de andaimes e outras estruturas para suportar temporariamente trabalhadores e/ou maquinário enquanto a construção definitiva não está pronta [...].
  16. 16. Scaffolding ● Grails (Groovy) ● Rails (Ruby) ● Spring Roo (Java) ● Cake (PHP)
  17. 17. Novo paradigma...
  18. 18. … vem com muitas outras ferramentas!
  19. 19. YO!
  20. 20. ● Lançado no Google I/O'12 ● Google Chrome Dev. Team ● Comunidade ativa ● yeoman.io ● github.com/yeoman
  21. 21. ● CLI em Node.js ● Interface interativa ● Baseado em templates ● Modular ● Ecossistema: ○ Scaffolding Tool (yo) ○ Build Tool (grunt/gulp) ○ Package Manager (Bower)
  22. 22. ● Inicia um projeto em seg. ● Inicia partes do projeto ● Define práticas e padrões ● Foca no desenvolvimento ● Extremamente fácil: ○ usar ○ extender
  23. 23. 3288 geradores registrados, sendo que 21 são oficiais
  24. 24. ● generator-angular ● generator-polymer ● generator-webapp ● generator-bootstrap ● generator-mobile Geradores - Oficiais...
  25. 25. Geradores - Comunidade... ● Javascript: Express, Mean, React, Meteor ● Mobile: Android, IOS, Ionic, Cordova, Titanium, ● Java: Jhipster, Spring, JAX-RS ● PHP: Symphony, Cake, Laravel, Composer ● Wearables: Pebble ● (...)
  26. 26. ● http://yeoman.io/learning ● Dependências: ○ Node.js v0.10.x+ ○ npm v2.1.0+ ○ git Como instala? $ npm install -g yo bower grunt-cli gulp
  27. 27. Como procura geradores? ● http://yeoman.io/generators/ ● Ou pela linha de comando yo $ yo
  28. 28. #dicaDoSid utilize o --help quando tiver dúvida, ele realmente ajuda!
  29. 29. Talk is cheap. Show me the code. - Linus Torvalds
  30. 30. Exemplo 1: webapp ● Instale o gerador: ○ https://github.com/yeoman/generator-webapp $ npm install --global generator-webapp
  31. 31. Exemplo 1: webapp (cont.) ● Execute o gerador: ● ou apenas pelo yo: $ yo webapp $ yo
  32. 32. Exemplo 1: webapp (cont.) ● O que foi gerado? ○ Tela index, links ○ Tasks grunt: ■ wiredep, concat, uglify, revision, minification (css, js, html)
  33. 33. Exemplo 2: angular ● Instale o gerador: ○ https://github.com/yeoman/generator-angular $ npm install --global generator-angular
  34. 34. Exemplo 2: angular (cont.) ● Execute o gerador: ● Execute um sub-gerador: $ yo angular $ yo angular:route <nome_da_rota>
  35. 35. #dicaDoSid use subgeradores para incrementar os projetos (mesmo em andamento)!
  36. 36. Criando um gerador ● Para aparecer na lista do site basta: ○ Ser público no github ○ Ter um keyword: yeoman-generator ○ Ter um arquivo: package.json ● http://yeoman.io/authoring
  37. 37. Criando um gerador (cont.) ● Instale o gerador de gerador: ○ https://github.com/yeoman/generator-generator ● Estende yeoman-generator ● Totalmente customizável: menus, textos, readme, help (...)
  38. 38. Exemplo 3: angular-custom ● Forma mais fácil é clonar um existente :) ● Ex.: Adicionar funcionalidade ao gerador angular: ○ Novo: generator-angular-custom ○ Ao acionar o angular:route, adicionar ao menu automaticamente ● Passos: ○ clone, ajustes, npm link, yo (...)
  39. 39. Exemplo 4: jhipster ● Instale o gerador: ○ https://github.com/jhipster/generator-jhipster $ npm install --global generator-jhipster
  40. 40. #dicaDoSid personalize a ferramenta para adequar ao seu cenário!
  41. 41. Cases geradores ● Geradores baseados em APT + Freemarker ○ Projeto java, jsf, spring ○ ~20 funcionalidades geradas (de 200) ○ entre 27 - 80% de ganho de produtividade ● Geradores com yeoman ○ angular, java, .NET ○ gerou um novo projeto na comunidade! jediproject ○ http://jediproject.github.io/
  42. 42. #dicaDoSid contribua com a comunidade!
  43. 43. https://goo.gl/MnmmFd
  44. 44. Perguntas?
  45. 45. Obrigado! http://ciandt.com snoleto@ciandt.com

×