Gerenciando dependências client-side com Bower

15 de Setembro de 2013

Leia em 6 minutos

Bower

Por muito tempo o desenvolvimento de interfaces foi uma coisa bastante amadora, mas a história mudou (e ainda está mudando) desde o surgimento do Node.js. Por causa dele, uma série de ferramentas extremamente úteis foram criadas e este é o caso do Bower.

O Bower é um projeto que permite gerenciar dependências client-side de uma maneira bastante simples. Em vez de ter que entrar no site de cada projeto que você quer usar e baixar os arquivos necessários, você pode automatizar este processo criando um arquivo de manifesto.

Conheça neste artigo como o Bower funciona e como integrá-lo ao Rails.

Instalando o Bower

O Bower precisa do Node.js para funcionar. Se você ainda não tem Node.js instalado, acesse o site do projeto e faça o download da versão do seu sistema operacional.

Depois, basta instalar o Bower globalmente com o NPM (Node Package Manager).

$ npm install -g bower

Configurando o seu projeto

Para configurar o seu projeto, execute o comando bower init. Você precisará responder diversas perguntas e, ao final, terá um arquivo de configuração chamado bower.json.

$ bower init
[?] name: howto
[?] version: 0.0.0
[?] description:
[?] main file:
[?] keywords:
[?] authors:
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which
    prevents it from being accidentally published to the registry? Yes

{
  name: 'howto',
  version: '0.0.0',
  license: 'MIT',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

[?] Looks good? Yes

O arquivo bower.json se parece com isso:

{
  "name": "howto",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Agora você já pode instalar as dependências de seu projeto.

Instalando as dependências do seu projeto

Para instalar as dependências de seu projeto, utilize o comando bower install.

$ bower install jquery
$ bower cached        git://github.com/components/jquery.git#2.0.3
$ bower validate      2.0.3 against git://github.com/components/jquery.git#*
$ bower install       jquery#2.0.3

jquery#2.0.3 bower_components/jquery

Isso irá instalar o pacote jQuery, cujo repositório Git está registrado no índice central do Bower. Por padrão, o diretório de pacotes é bower_components, mas você pode configurar para outro lugar.

Quando instala as dependências, precisa atualizar o arquivo bower.json para que ele mantenha uma lista das dependências de seu projeto. Adicione a chave dependencies e liste o jQuery como dependência.

{
  "name": "howto",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "*"
  }
}

O valor identifica a versão da biblioteca. O * significa que você quer qualquer versão. Você pode especificar diversos valores como versão:

Uma tag do Git
Um hash de commit do Git
Um branch do Git
Uma URL
Um diretório local

Ter que fazer isso manualmente pode ser um pouco chato, mas existe uma solução. Sempre que for instalar uma nova dependência, utilize o switch --save.

$ bower install jquery --save
bower cached        git://github.com/components/jquery.git#2.0.3
bower validate      2.0.3 against git://github.com/components/jquery.git#*

Se você abrir o arquivo bower.json verá que ele foi atualizado com a versão mais recente da biblioteca.

{
  "name": "howto",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3"
  }
}

Para especificar a versão no momento da instalação, defina-a após o #. Veja alguns formatos aceitos, seguindo aquela lista de formatos de versão.

$ bower install jquery#1.10.3
$ bower install jquery#~2.0.0
$ bower install https://github.com/fnando/module.git#518331e7d598dbca0bf99c473cddf6f0a8a8694a

Atualizando as dependências

Para atualizar todas as dependências instaladas, execute o comando bower update. Se quiser atualizar apenas uma biblioteca, passe o nome.

$ bower update
$ bower update jquery

Removendo as dependências

Para remover as dependências, utilize o comando bower uninstall.

$ bower uninstall jquery

Procurando pacotes

Você pode pode pesquisar os pacotes disponíveis no Bower através do comando bower search.

$ bower search module
Search results:

    angular-modules git://github.com/chadhietala/Angular-Modules.git
    es6-module-loader git://github.com/ModuleLoader/es6-module-loader.git
    amd-global-modules git://github.com/Nayjest/amd-global-modules.git
    backbone.module git://github.com/andreypopp/backbone.module
    ejs-head-modules git://github.com/fnobi/ejs-head-modules.git
    ejs-sns-modules git://github.com/fnobi/ejs-sns-modules.git
    module git://github.com/fnando/module.git
    gmodule git://github.com/goliatone/gmodule.git

Se o pacote estiver disponível nos resultados, você pode instalá-lo com o comando bower install <nome>. Caso contrário, forneça um repositório Git ou a URL do arquivo que quer adicionar.

Criando seu próprio pacote Bower

Depois que o asset pipeline foi criado, a comunidade Rails entrou em uma fase de criar RubyGems para empacotar dependências de interface. Isso não faz o menor sentido!

O RubyGems é um gerenciador de pacotes para Ruby. A menos que sua biblioteca faça alguma coisa como adicionar novos renderers ao Tilt ou ao próprio Rails, ele nunca será uma boa alternativa para as dependências de interface. Eu acredito que projetos como o Bower sejam muito mais adequados para gerenciar as dependências de interface. Afinal, foi para isso que ele foi criado!

Criar um novo pacote Bower é extremamente simples. Basta iniciar as configurações com o comando bower init. Lembre-se de não marcar o pacote como privado.

$ mkdir mylib
$ cd mylib

$ bower init
[?] name: mylib
[?] version: 0.1.0
[?] description: Some example lib
[?] main file: mylib.js
[?] keywords: sample, events, plugin
[?] authors: Nando Vieira
[?] license: MIT
[?] homepage: http://example.org
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents
    it from being accidentally published to the registry? No

{
  name: 'mylib',
  version: '0.1.0',
  description: 'Some example lib',
  main: 'mylib.js',
  keywords: [
    'sample',
    'events',
    'plugin'
  ],
  authors: [
    'Nando Vieira'
  ],
  license: 'MIT',
  homepage: 'http://example.org',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

[?] Looks good? Yes

Depois que você criar sua biblioteca e enviar o seu código-fonte para o Github, registre o seu novo pacote. Para fazer isso, basta utilizar o comando bower register.

$ bower register mylib https://github.com/mylib/mylib.git

Se o nome estiver disponível, você já poderá usar o comando bower install mylib para instalar o seu pacote.

O esquema de versionamento segue as recomendações do Semantic Versioning. Isso significa que a versão possui três componentes MAJOR.MINOR.PATCH.

Incremente o MAJOR quando sua biblioteca quebrar alguma API pública (funções removidas, quantidade de atributos incompatíveis, etc.)
Incremente o MINOR quando você adicionar funcionalidades que não quebram as versões anteriores.
Incremente o PATCH quando você fiz correções de bugs. Você também pode especificar labels de pré-release, como rc1.

Integrando com o asset pipeline

Para quem desenvolve em Rails, integrar o Bower é bastante simples. Primeiro, você terá que configurar o diretório onde os pacotes Bower serão instalados. Para fazer isso, crie um arquivo .bowerrc na raíz de seu projeto. Utilize um diretório como vendor/assets/bower; os diretórios presentes em vendor/assets são adicionados automaticamente ao load path.

{
  "directory": "vendor/assets/bower"
}

Instale as dependências do seu projeto com o comando bower install <pacote> --save.

$ bower install jquery --save
$ bower install module --save

Certifique-se que a gem jquery-rails foi removida do seu arquivo Gemfile. Se você usa alguma funcionalidade do Rails que precisa de JavaScript, como remote form ou a opção :confirm, você precisará instalar o pacote jquery-ujs pelo Bower.

$ bower install jquery-ujs --save

Agora, basta adicionar as dependências ao arquivo app/assets/javascripts/application.js ou equivalente.

//= require jquery
//= require module

// se você está usando as funcionalidades
// do Rails que precisam de jQuery.
// Eu falei sobre como você deve fazer um
// pouco acima.
//= require jquery-ujs

Note que você não precisa passar exatamente o arquivo que quer carregar; o jQuery, por exemplo, é instalado em vendor/assets/bower/jquery/jquery.js. No Rails 4, o Sprockets reconhece o arquivo bower.json e carrega a dependência corretamente através da chave main. Caso esta chave não tenha sido definida, ele tenta carregar um arquivo com o mesmo nome do diretório.

No Rails 3, o Sprockets não irá reconhecer o arquivo bower.json; neste caso, você precisará definir o caminho completo, como no exemplo abaixo:

//= require jquery/jquery
//= require module/module
//= require jquery-ujs/src/rails

Usando o Rails Assets

O Rails Assets é um projeto muito interessante para quem quer usar o Bower para gerenciar os assets mas prefere manter o workflow com Rubygems/Bundler. Ele age como um proxy entre os pacotes do Bower e Rubygems; basta apontar seu Gemfile para o source do Rails Assets e instalar os pacotes Bower como Rubygems.

Adicione o source https://rails-assets.org. Cada pacote do Bower será disponibilizado com o formato rails-assets-<nome do pacote Bower>.

source 'https://rubygems.org'
source 'https://rails-assets.org'

gem 'rails', '4.2.0'
# ...

gem 'rails-assets-jquery'
gem 'rails-assets-jquery-ujs'
gem 'rails-assets-module'

Caso o pacote ainda não exista no índice do Rails Assets, adicione-o em https://rails-assets.org/components/new e em poucos minutos a gem equivalente já estará disponível.

Finalizando

Estamos em um momento muito bom do front-end. Muitas ferramentas como Bower e Grunt permitem automatizar tarefas e melhorar o processo de desenvolvimento sem muito esforço, mesmo quando você não pode contar com facilidades de frameworks como o Rails e o asset pipeline.

O papel do desenvolvedor front-end está ficando cada vez mais próximo de um back-end. Embora alguns ferramentas possam ser utilizadas através de interfaces gráficas, quase sempre você precisará utilizar o terminal. Perca o medo de usá-lo. Você só terá a ganhar com isso.