Experimente o Yeoman em seu workflow de projetos front-end

yeoman

Yeoman (yo) é um stack com foco em front-end que automatiza seu build e gerencia suas dependências. Ele não reinventa a roda e usa Grunt e Bower como builder e package manager respectivamente. Ele inclusive realiza scaffolding.

Yeoman ainda:

Instalação

Você precisa ter o Node.js instalado em sua máquina antes de começar a utilizar o Yeoman. Com este pré-requisito, sua instalação é direta:

npm install -g yo

Grunt e o Bower também serão instalados.

Yo: criando um projeto

Yeoman possui vários geradores que podem ser baixados através do gerenciador de pacotes do Node.js. O exemplo abaixo instalará um gerador para projetos com AngularJS:

npm install -g generator-angular

Antes de executar o yo, crie uma pasta com o nome do seu projeto. Esta pasta preferencialmente deve começar com a letra maiúscula, já que o gerador do angular adotará o nome da pasta como nome do seu projeto (ng-app).

Agora é só deixar que o Yeoman monte a estrutura do projeto com o comando:

yo angular –minsafe

O parâmetro –minsafe indica que o projeto suportará minificação de javascript e css, inclusive merge.

Durante a criação do projeto você ainda pode incluir bibliotecas respondendo sim ao assistente yo, por exemplo, a biblioteca do twitter bootstrap. Como estamos usando um gerador de projeto focado no AngularJS, algunas perguntas específicas deste framework também são apresentadas.

Arquivos gerados

O projeto gerado possui algumas pastas e arquivos como bower.json, inclusive o Grunt.js e o package.json, fundamentais para o funcionamento do Grunt.

Estrutura do projeto

Estrutura gerada pelo Yeoman

No arquivo bower.json ficam as declarações das dependências do seu projeto, muitas delas adicionadas automaticamente pelo yo, por exemplo, AngularJS e jQuery.

No arquivo Grunt.js há uma série de tasks já configuradas e prontas para serem usadas.

Bower: resolvendo dependências

Faltou alguma dependência em seu projeto? Onde buscar? O bower realiza essa tarefa para você:

bower install respond

No exemplo acima, o bower baixa e torna disponível para nosso projeto a biblioteca respond.js na pasta app / bower_components / respond adicionando-a no arquivo bower.json.

O bower ainda permite instalar uma versão específica da biblioteca. Se o jQuery 1.9.1 for necessário, basta executar a comando:

bower install jquery#1.9.1

Grunt: construindo e testando seu projeto

Você já pode rodar seu projeto através do comando grunt server. Esta tarefa criará um servidor local e abrirá seu navegador automaticamente exibindo uma tela de boas-vindas gerada pelo scaffold do yo.

Você pode testar o liveReload modificando a página index.html e ver que seu browser recebe a atualização instantaneamente sem necessidade de refresh manual, inclusive páginas em dispositivos móveis como tablet e celulares.

Quando a aplicação estiver pronta para deploy, o comando grunt se encarregará de executar todos os testes unitários criados por você e ainda minificará e juntará seus arquivos js e css. Qualquer imagem do seu projeto também será otimizada para distribuição. O resultado final estará dentro da pasta dist.

Você pode conhecer um pouco mais nesse post sobre Grunt aqui no blog ou no site oficial do Grunt.

Mais scaffolding com Yo

Se quisermos criar um novo controlador do AngularJS através do yo, basta executar o comando:

yo angular:controller produto

Ele não criará apenas o controlador, mas também o seu teste. Eles ficarão nas pastas app / scripts / controllers / produto.js e test / spec / controllers / produto.js respectivamente.

Cada gerador baixado pelo Yeoman possui seu conjunto de comandos.

Conclusão

A preocupação com a padronização, a construção e o gerenciamento de dependências não é exclusividade de programadores back-end. A complexidade de páginas web demanda cada vez mais conhecimento do programador front-end.

O Yeoman é uma ferramenta que sugere um workflow já consagrado e que pode ser incorporado em seus projetos.

A Caelum não fica de fora, e oferece uma formação front-end pra você dominar as boas práticas de projetos com Web Design.

18 Comentários

  1. Luiz Fagundes 31/07/2013 at 16:42 #

    Valeu Flavio! Post muito bem explicado.

  2. Flávio Almeida 01/08/2013 at 13:17 #

    Olá Luiz, obrigado! Fique atento que existem outros geradores do yo. Por exemplo, se você quiser criar um projeto web “padrão” sem o AngularJS pode baixar npm install -g generator-webapp. Depois é só executar yo webapp

  3. Luiz Henrique 06/08/2013 at 14:07 #

    Legal Flávio , muito bom o post ,além de mostrar a maturidade do ecossistema web e a importância da galera investir bastante tempo estudando isso também.

  4. Flávio Almeida 06/08/2013 at 14:11 #

    Realmente Luiz, tudo que é feito manualmente é sujeito a erro, já que somos seres humanos e podemos errar. Automatizar o processo remove grande responsabilidade de nossas costas.

  5. Deividi 06/08/2013 at 18:38 #

    Muito bom o post, parabéns. Eu tinha pesquisado algo para utilizar em um projeto com angular. No meu caso eu preferi o ng-boilerplate, ele vem com mais recursos (vários por sinal) do que o angular yo generator e tem uma organização de pastas por módulos. Cada view tem sua pasta com o .js, tpl.html e os testes, fica mais fácil dar manutenção e refatorar quando for necessário. A estrutura do angular padrão pelo yo de jogar tudo em uma pasta views por exemplo não me agradou muito, apesar que pelas issues do GitHub tudo leva a crer que essa estrutura será implantada em breve no angular yo generator, vale a pena olhar. Sobre a criação de controllers via cmd não achei útil, pois ele cria algo muito trivial, vale mais para o pessoal fazer na mão hehehe. O legal é que ele vem com a otimização de png e svg que você comentou, que eu não tinha visto até então. O único problema dessas ferramentes é integração com jenkins e tudo mais, tive que fazer na mão um plugin para dar suporte ao grunt. Abs!

  6. Flávio Almeida 08/08/2013 at 18:20 #

    Olá Deividi, o ng-boilerplate é excelente, principalmente se você tem o AngularJS sempre em seus projetos. O Yeoman não dá exclusividade para o AngularJS, há uma série de geradores, assim, atingindo um público maior. Como você mesmo citou, vamos aguardar e ver se o gerador do angular fique ainda melhor com o tempo. Abraço!

  7. Fernando Mantoan 13/08/2013 at 14:40 #

    Ótimo post Flávio, cada vez mais o front-end está maduro e com ferramentas que facilitam o processo de desenvolvimento, ajudando também a garantir a qualidade do que está sendo feito, e o conjunto de ferramentas que você demonstrou só solidificam isso.

  8. Abraão Isvi 12/09/2013 at 09:40 #

    Muito interessante.

  9. Carlos Viana 29/09/2013 at 20:18 #

    Muito interessante. Estou buscando um padrão de projeto utilizando o vraptor-console (back-end) e o Yeoman (front-end), para facilitar a implantação, manutenção, testes e deploy do projeto web. e ainda utilizar o AngularJS como databind. Como faria para integrar esses frameworks uma vez que o Yeoman gera arquivos .html e o VRaptor .jsp. e quanto a pasta de repositório dos arquivos de front-end

  10. Flávio Almeida 30/09/2013 at 16:03 #

    Olá Carlos! O livereload do Yeoman é agnóstico de tecnologia. Outras tarefas, por convenção, precisam da extensão .html. Há a promessa de que ele suportará N servidores (e suas tecnologias de view). Na pior das hipóteses, você pode editá-lo, já que ele é apenas um Gruntfile.js otimizado.

  11. Marcelo 10/01/2014 at 09:15 #

    Eu tento testar o grunt e nao, diz pra instalar o grunt-cli e pesqusiar no site do grunt e tal, pq isso acontece ?

  12. camilo lopes 23/01/2014 at 14:14 #

    Muito bom o post Flávio. Simples e direto. Yeoman realmente é uma mão na roda. Aproveitando no final do ano passado criei alguns archetype maven para desenvolvedores Java que pretendem usar o angularjs no front-end http://blog.camilolopes.com.br/serie-angularjs-maven-archetype-com-angularjs-e-yeoman/

    flw. abraco,

  13. Marcelo 18/03/2014 at 00:40 #

    Olá Flávio e amigos!!

    Alguém sabe dizer o que é esse erro “Fatal error: No Bower components found.” quando eu rodo o comando “grunt server”

    Grato

  14. Luiz Filho 27/10/2014 at 00:09 #

    Olá, boa noite.
    Eu queria saber como faço para dividir meu projeto em módulos sem precisar criar uma app completa como um módulo?
    Exemplo, tenho um dashboard de alunos, e queria separar MyApp.aluno, MyApp.curso, MyApp.professor, e dentro de casa um desses ter controllers, directves, etc… é possível fazer isso com Yeoman?

  15. Andreas 01/12/2015 at 10:13 #

    Excelente post Flávio!! A explicação foi muito clara, valeu.
    Só não consegui rodar o comando grunt server, ele dá uma mensagem:

    If you’re seeing this message, either a Gruntfile wasn’t found or grunt
    hasn’t been installed locally to your project. For more information …

  16. Ricardo 22/08/2017 at 11:14 #

    Bom dia, tem como não utilizar o bower ao instalar o Yeoman, usar somente o node_modules estou tendo problemas com a instalação do bower_components?

Deixe uma resposta