Quando a aplicação é pequena e você é o único desenvolvedor do projeto, pode até ser fácil e rápido pegar todos os JS e CSS que você precisa (como do jQuery, por exemplo), colocar em alguma pasta do projeto e simplesmente usá-los referenciando em seu HTML. Entretanto, conforme o projeto vai crescendo, seja em complexidade seja em número de colaboradores, as coisas vão ficando mais complicadas e vale ter noção de versionamento, dependências e tudo mais. E fazer tudo isso manualmente é bem... chato.
E não basta ser chato! Conforme o tempo vai passando, vai ficando cada vez mais difícil manter o projeto com as dependências não sendo au
tomaticamente gerenciadas. Afinal, quem aí já tentou atualizar as dependências de um projeto que não possui esse tipo de gerenciamento? Dica: não queira tentar.
É por isso que gerenciadores de pacotes se tornaram cada vez mais comum na web. E hoje vou falar um pouco sobre o Bower, um popular gerenciador de dependências projetado para gerenciar especialmente dependências do frontend, como projetos CSS, Javascript, etc.
O Bower não é popular à toa. Seu uso é simples o suficiente para não atrapalhar, mas sim ajudar o dia-a-dia do desenvolvedor frontend. Dentre suas funcionalidades, estão:
- Fazer buscas no repositório do Bower por nome (útil para quando você não se lembra direito do nome um pacote);
- Instalação de pacotes e suas devidas dependências;
- Salvamento da versões das dependências instaladas para posterior reinstalação;
- Salvamento de um cache em seu computador para acelerar a instalação de uma determinada dependência em mais de um projeto;
- Aviso sobre incompatibilidade entre duas ou mais dependências de um projeto que dependem de um único projeto, mas em versões diferentes;
Para demonstrar um pouco da funcionalidade do Bower, resolvi criar um simples tutorial básico de uso, disponível abaixo. Boa leitura!
Tutorial Básico de uso do Bower
Nesse tutorial, para ilustrar um pouco do funcionamento do Bower, vamos instalar três bibliotecas bastante populares do Javascript: Backbone, jQuery e Foundation. Acompanhe!
1) Para usar a ferramenta, precisamos ter o NodeJS e o git instalado, pois o Bower é feito em Javascript e o Bower faz o download de algumas das dependências usando git. Para instalar o NodeJS, há duas opções:
1.1) Caso você queira instalar o NodeJS no seu computador, baixe e instale diretamente a partir do site oficial. O mesmo vale para o git. E crie uma pasta "projetos" em algum lugar pois vamos usá-la ao longo do tutorial.
1.2) Caso você não queira instalar o NodeJS no seu computador, pode utilizar o Vagrant em conjunto com o Vagrantfile que eu criei para criar uma máquina virtual já com o NodeJS e o git instalados. Para prosseguir com o tutorial, nesse caso, é necessário entrar na máquina virtual utilizando o comando "vagrant ssh", como descrito no tutorial sobre o Vagrant.
2) Agora, precisamos instalar a ferramenta. Para instalá-lo, vamos usar o npm, que é o gerenciador de pacotes oficial do NodeJS e que já vem com a distribuição oficial. O comando a ser executado nesse caso é "npm install -g bower". Sendo que o "-g" instrui o npm a instalar o bower globalmente, de forma que você possa usar o executável bower em qualquer lugar do seu terminal. Segue abaixo um exemplo do comando executando:
3) Depois, entre na pasta "projetos" e lá, crie uma nova pasta, chamada "tutorial-bower".
4) Dentro dessa pasta, execute o comando "bower init". Nesse procedimento, o bower vai fazer um monte de perguntas sobre o projeto, como:
- Nome;
- Descrição;
- Palavras-chaves;
- Autores;
- Licença;
- Se é privado ou não;
- Sistema de módulos usados;
- E outras perguntas relacionadas ao projeto;
Para essas perguntas, responda conforme lhe for conveniente. Se preferir, pode inclusive selecionar o padrão para todas, apenas apertando Enter a cada pergunta feita. Segue abaixo uma gravação do bower init funcionando:
5) Agora, vamos instalar as dependências! Experimente rodar bower install --save backbone e acesse a pasta bower_components que o Bower vai criar para que seja hospedado as dependências do projeto. Nesse comando, o argumento --save salva as dependências informadas no bower.json, de forma que no futuro elas possam ser usadas para reinstalar tudo sem precisar ficar adicionando uma por uma. Segue abaixo a gravação do bower install --save backbone rodando:
Como você pode ver, ao acessar a pasta bower_components, o Bower criou duas pastas: uma pro Backbone, e uma pro Underscore, que é dependência do Backbone! Além disso, o bower.json já se encontra mais "completo":
Note que, como pedimos apenas a instalação do backbone, apenas ele foi salvo como dependência do projeto. O Underscore é resolvido automaticamente assim que o Backbone é baixado. Eficiente. =)
6) Agora, vamos experimentar baixar o Foundation. Rode o comando "bower install --save foundation" e veja o que acontece:
Yeah! O nosso amigo Bower já baixou, automagicamente, todas as dependências do Foundation, incluindo o jQuery, que eu falei lá no inicio do post. Mas.. vamos ver o que acontece se tentarmos instalar o jQuery? Bora!
7) Agora, vamos instalar o jQuery, que a ferramenta já baixou automaticamente pois é uma dependência do Foundation. Rode o comando "bower install --save jquery" e veja o que ocorre:
Como você pode ver, o jQuery já estava no cache, e aí ele nem precisou fazer o download novamente. A única alteração, aqui, foi que o Bower editou o bower.json para que incluísse o jquery como dependência do projeto.
8) Acha que acabou? Acabou não, por último, vamos fazer um pequeno teste: Apagar a pasta bower_components e rodar bower install novamente, apenas para ver o que acontece. Segue o procedimento:
Como você pode ver, graças ao bower.json, todas as dependências foram colocadas certinho conforme nossa necessidade. Portanto, não há mais necessidade em carregar aquele monte de dependências pra tudo que é lugar, e nossa lista de dependências fica salva num único arquivo bem na raiz do projeto. Bem simples e fácil de usar. =)
Óbviamente, como esse tutorial tinha como objetivo apenas uma breve iniciação, não cobrimos algumas coisas que essa ferramenta pode fazer:
- Emitir um alerta e interromper a instalação caso duas dependências conflitarem a respeito da versão de alguma outra dependência em comum. Isso é útil para evitar bugs inesperados e muitas vezes inexplicáveis na aplicação, que (normalmente) podem ser resolvidos com um simples ajuste de versão;
- Trocar o nome da pasta bower_components para outro nome, mais amigável;
Para estudar mais sobre a ferramenta, recomendo dar uma olhada lá na documentação.
Se você trabalha em projetos web, experimente usar o Bower em seus projetos! Seu uso é tão simples que em pouco tempo vai se tornar transparente no seu workflow, e os benefícios a longo prazo tendem a só aumentar. =)
E você? Vai usar essa ferramenta daqui pra frente? O que achou da ferramenta? Deixe sua opinião nos comentários!
Segue os links para o site e para o repositório da ferramenta no github:
- Site oficial: http://bower.io/
- Repositório no Github: https://github.com/bower/bower
Deixe um comentário