Já foi o tempo que nossas aplicações web e sites eram compostos apenas por arquivos HTML e um ou outro CSS e JS. Hoje temos pré-processadores CSS, minificadores, ferramentas de validação de JavaScript, grids, boilerplates, bootstraps e até mesmo JavaScript no servidor.
Há também uma maior quantidade de arquivos e bibliotecas externas. Os arquivos CSS foram modularizados e JavaScript passou a ser (muito) mais aceita, ganhando ainda uma versão mais “amigável” na linguagem CoffeeScript.
Neste artigo, você confere algumas opções para criar rapidamente uma aplicação inicial já com uma estrutura pré-definida e com as principais bibliotecas e ferramentas do mercado.
Yeoman
Desenvolvido com a ajuda de popstars como Paul Irish e Addy Osmani, o framework Yeoman consiste em um conjunto de ferramentas voltadas para criar rapidamente um novo projeto web e gerenciá-lo durante o processo. Seus comandos são baseados no utilitário Grunt e executam tarefas como minificação, lint e otimização de imagens.
Um projeto criado via Yeoman, utilizando o comando yeoman init, vem com algumas habilidades especiais. Você pode, por exemplo, escrever código em CoffeeScript e o Yeoman se encarrega, em background, de transformá-lo em JavaScript. O mesmo acontece para CSS escrito com Sass/Compass.
O comando yeoman server levanta um servidor local e monitora qualquer alteração nos arquivos do projeto, atualizando a página no navegador automaticamente.
Outro comando importante é o yeoman build, que gera uma versão pronta para produção, com todos os scripts e estilos validados e devidamente minificados. O Yeoman também otimiza todas as imagens utilizando bibliotecas especiais. O comando build também procura por bundles JavaScript e CSS e concatena seus arquivos.
Roots
Uma boa alternativa ao Yeoman é o Roots, framework que também concentra um set de ferramentas e boas práticas para agilizar a criação e manutenção de projetos web.
O set padrão do Roots acompanha a template engine Jade, o pré-processador de CSS Stylus e a linguagem CoffeeScript.
Os projetos são criados através do comando roots new. O Roots também oferece um comando para live reload, roots watch, monitorando qualquer alteração e atualizando o site no navegador através de um servidor local.
É possível também utilizar diversos plugins para diferentes bibliotecas e utilitários (Sass, ejs etc.).
Pacotes podem ser instalados através do comando roots install . Tanto o Roots como o Yeoman utilizam o gerenciador de pacotes Bower, portanto é possível instalar qualquer um dos pacotes listados no repositório sindresorhus.com/bower-components.
Brunch
As diretrizes do projeto Brunch giram em torno de dois conceitos principais: plugins e esqueletos.
Os plugins envolvem linguagens (JavaScript, CoffeeScript, LiveScript etc.), templates (Handlebars.js, Jade, Mustache etc.), pré-processadores de CSS (Sass, Stylus, LESS), validadores (JSLint e CoffeeLint) e minificadores (uglify.js e clean-css).
Já os esqueletos definem o framework JavaScript e o set padrão de ferramentas. O esqueleto padrão cria um projeto utilizando o HTML5 Boilerplate, Chaplin com Backbone.js, CoffeeScript, Stylus e Handlebars. Outros esqueletos incluem um set com JavaScript puro, Sass e Twitter Bootstrap; um com Backbone e CoffeeScript; e até mesmo um com AngularJS.
Assim como o Yeoman, o Brunch também utiliza a ferramenta Grunt para gerenciar e executar suas tarefas.
Essa foi uma apresentação inicial e, futuramente, pretendo escrever um artigo específico sobre cada um dos projetos listados aqui. E vocês, utilizam alguma outra alternativa? Deixem suas mensagens nos comentários!
