Tableless

Busca Menu

Em um relacionamento sério com generators front-end – Parte 2

Seja o primeiro a comentar por

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!

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

dica

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

vendo-tv

Conforme comentado acima, precisa ter nodejs instalado, por isso instale e após a instalação seguia os passos seguintes.

  1. 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
  2. Instale o generator da aplicação, nesse caso o generator escolhido para uso é o “webapp”.
    npm install generator-webapp
  3. 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?

01

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!

estrutura raiz

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

02

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 *-*

estrutura-app

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  =)

grunt server

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?

03

É 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
 bower install [nome do componente]
  • Baixando plugins
 npm install [nome do plugin] --save-dev

E meu ambiente de produção?

04

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:

grunt build

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.

Links de referência Yeoman que podem complementar o Post

Site oficial do yeoman
Projeto yeoman no github para contribuição
Outro Post de referência explicativo e conceitual
Palestra sobre generators (yeoman)

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) 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 =]

Publicado no dia