O início
O objetivo desse post não é para fazer com que os desenvolvedores só usem esta ferramenta, e sim para apresentar opções de desenvolvimentos ágeis que podem ser úteis no seu dia a dia. É uma ferramenta a qual lhe oferece um stack completo de estrutura de projeto, basta você saber como usar e para que vai usar.
O Yeoman
O Yeoman é considerado uma ferramenta web de andaimes para criação de webapp modernos, nele você consegue montar um esquema de trabalho facilitando seu desenvolvimento. Seu fluxo de trabalho é composto por 3 ferramentas melhorando sua produtividade e satisfação.
- YO – Conjunto de geradores que nos permite prototipar
- Gruntjs – Gerencia suas tarefas de forma automatizadas
- Bower – Gerencia suas dependências aplicadas no projeto
PS: São ferramentas que por padrão já vem com o Yeoman, porém temos a opção de usar o Gulp para gerenciar nossas tarefas.
Ta, me convence!
O Yeoman sendo uma ferramenta completa, pode proporcionar para você formas práticas e ágeis de desenvolvimento com menos tempo e com boa qualidade. Alguns criticam, outros elogiam, mas você só saberá o resultado se positivo ou negativo, quando usar esse brinquedinho.
Penso o seguinte: Uma ferramenta nova no marcado ou até mesmo uma antiga com novas versões e novas features, precisam ser exploradas para saber o que a mesma pode nos proporcionar. Por isso nunca se intimide com novas tecnologias e sim aproveite para ganhar conhecimentos.
Dicas importantes antes de praticar
Antes de mais nada já saiba que não ter medo do terminal é um diferencial. Sacanagem Hahaha. Mas é importante saber que a maioria das configurações e monitoramento serão via terminal, por isso é bom entender e interpretar cada linha de comando digitada.
Lembrando que para usar o Yeoman é preciso ter Nodejs instalado em sua máquina, por isso se você não tem essa plataforma, baixe aqui, instale e parte para a próxima etapa. Após a instalação do nodejs o resto é mágica!
Uma observação válida a ser feita é o seguinte: Você que desenvolve com Mac OS ou Linux *-* por padrão já vem instalado o Ruby e para quem desenvolve em windows é preciso instalar os dois: Nodejs e Ruby. Você pode baixar o ruby bem aqui.
Vendo teorias na prática
Conforme comentado acima, precisa ter nodejs instalado, por isso instale e após a instalação seguia os passos seguintes.
-
Digite o código abaixo via linha de comando na raiz do seu projeto. O mesmo instala o Yo, Gruntjs e Bower de forma global, podendo usar também Gulp. npm install -g yo grunt-cli bower
-
Instale o generator da aplicação, nesse caso o generator escolhido para uso é o “webapp”. npm install generator-webapp
-
Inicie a aplicação com YO. yo webapp
O comando “generator-webapp” é o gerador de aplicações web padrão que será um projeto contendo HTML5 Boilerplate , jQuery , Modernizr e Bootstrap . Você vai ter uma opção durante as instruções interativas para não incluir muitos destes.
Mas o que vem depois?
Após o processo de instalação seguida passo a passo, a ferramenta já pode ser usada para criar suas aplicações. Você vai perceber que o YO já te retorna uma estrutura de pasta bem completa com tudo que você precisa e ainda alguns recursos a mais. Veja abaixo!
Analisando a estrutura, digo o seguinte:
- A pasta app é onde vai rodar toda sua aplicação em modo de desenvolvimento. É lá que você cria seus arquivos HTML / CSS / JavaScript e entre outros. Mas essa pasta vamos ver com detalhes já já.
- A pasta bower_componnets é criada pelo bower, onde você vai baixar e usar componentes como bootstrap, AngularJS, Backbone e entre outros e por padrão ele já traz o jQuery para você. Caso você não goste do nome “bower_componentes” você tem a opção de criar uma pasta como “libs” ou “componentes” e apontar seus componentes baixados para está nova pasta, só precisa criar um arquivo “.bowerrc” e lá você aponta para tal pasta. Exemplo: { app/libs ou app/componentes }
- A pasta node_modules são os módulos instalados pelo nodejs, lá você vai ver alguns plugins do Gruntjs instalados por padrão, podendo ainda instalar outros plugins.
- Os arquivos Gruntfile e Bower.json são de configurações de componentes, onde o Gruntfile armazena todas as tarefas automatizadas do gruntjs como: minificação, compilação e otimização. Já o bower.json é um arquivo simples que retorna dados importantes dos componentes gerenciados no bower e armazena os componentes usados e suas versões.
- Os outros arquivos são de configuração da ferramenta, incluindo os arquivos ocultos.
A tal pasta APP da minha aplicação
Enfim chegamos a pasta de desenvolvimento, é aqui que começa toda a sua aplicação, você não precisa mexer em nenhuma outra pasta, tudo que você precisa mexer e criar vai ser dentro deste diretório, beleza? Veja como funciona a estrutura da pasta e logo após vamos ver funcionando e depois daremos o build *-*
Acredito que detalhar essa estrutura não tem tanta necessidade, pois as pastas e arquivos já falam por si, não é mesmo? Mas qualquer dúvida pode deixar seu comentário que responderei com prazer.
Bom, você já instalou as ferramentas (Yo/Gruntjs/bower), já instalou o generator que será usado (generator-webapp) e executou o “yo” que retornou essa estrutura de pasta. Agora para ver como funciona é simples. Execute o comando abaixo, ele vai criar um server local para você ir debugando sua aplicação e vendo como ela está se comportanto no browser e o mais legal é que você não precisa dar F5, pois por padrão já vem instalado o “livereload” plugin do grunt que atualiza automaticamente sua aplicação no browser =)
Após isso você criar sua aplicação normalmente, usando como ponto de partida o arquivo index.html e os diretórios presentes.
E se eu quiser baixar outros componentes e plugins?
É uma boa pergunta e simples de responder. Para baixar outro componente como por exemplo AngularJS vamos usar o Bower, nosso gerenciador de componentes. E para baixar um novo plugin como por exemplo JSHINT vamos usar o Gruntjs que gerencia nossas tarefas. Os comandos abaixo mostra como baixar componentes e plugins.
- Baixando componentes
- Baixando plugins
E meu ambiente de produção?
Chegamos ao nosso momento de build da aplicação. O yeoman compila todos os arquivos da pasta app e nos retorna uma pasta chamada “dist” é lá que encontram seus arquivos de produção prontos para serem usados e testados. Lembrando que qualquer alteração não poderá ser feita na pasta “dist” e sim em “app”.
Dando o build no projeto e gerando meu diretório de produção:
Visão geral
Hoje aprendemos realmente a usar o yeoman, desde seus conceitos até o modo de produção, é só seguir os passos e dicas. E por falar em dica, lá vai uma dica para melhorar mais ainda a sua transferência de arquivos para o ambiente de produção.
Ao dar o build ele gera o diretório “dist” contendo nele os arquivos de produção. Já que estamos automatizando tudo, evite o uso do FTP e sim faça deploy =) Abaixo segue algumas referências de um módulo do grunt que você pode acrescentar em sua aplicação e deixá-la mais interessante. Assim você miniminiza retrabalhos. Estou falando de [rsync][12].
Links de referência Yeoman que podem complementar o Post
– [Site oficial do yeoman][13]
– [Projeto yeoman no github para contribuição][14]
– [Outro Post de referência explicativo e conceitual][15]
– [Palestra sobre generators (yeoman)][16]
Considerações finais
Chegamos ao final desse capítulo tentando expor as qualidades que o Yeoman pode nos dar e sua forma de uso. No próximo capítulo teremos nosso amigo Beto Muniz ([@obetomuniz][17]) falando sobre Slush dentro da série. Não perca os próximos capítulos da série, onde no 4º capítulo finalizaremos com algumas dicas, apresentaremos projetos que foram criados a parir de um desses generators e mostrar como criar seu próprio generator. Valeu =]
[12]: Ao%20dar o build ele gera o diretório “dist” contendo nele os arquivos de produção. Já que estamos automatizando tudo, jamais em toda sua vida use FTP e sim faça deploy =) Abaixo segue algumas referências de um módulo do grunt que você pode acrescentar em sua aplicação e deixá-la mais interessante. Assim você miniminiza retrabalhos. Estou falando de rsync
[13]: https://yeoman.io/
[14]: https://github.com/yeoman/yeoman
[15]: https://blog.caelum.com.br/experimente-o-yeoman-em-seu-workflow-de-projetos-front-end/
[16]: https://pt.slideshare.net/pedropolisenso/em-um-relacionamento-srio-com-generators-front-end
[17]: https://twitter.com/obetomuniz