Qué es Bower

Bower es un gestor de paquetes que nos facilita mantener nuestras librerías del front-end en un proyecto web.

Es un proyecto open source que tiene su origen en twitter (de ahí su parecido con el pajarito de twitter).

Los que vengais del mundo java, viene a ser un «maven» para el front-end.

Hasta ahora, cada vez que empezabamos un proyecto web y queriamos usar librerías javascript podíamos hacer varias cosas

1. ir a la web propietaria de la libreria y descargarnosla a nuestro proyecto
2. usar el CDN que nos proporciona cada libreria y vincularlo a nuestro proyecto web.

Con bower, la forma de trabajar cambia mucho, ya que no tendremos que despegarnos de nuestra ventana de código para conseguir una librería. Basta con indicarle al proyecto, qué dependencias necesitamos  y decirle que las instale, bien facil no?

Diferencia entre Bower y npm

Muchos os estareis preguntando … Si con npm puedo gestionarme paquetes dentro de mi proyecto, ¿para que necesito ahora bower?

Pues si … npm te permite gestionar librerías frontend pero no es lo mas correcto ni está enfocado a ello. Npm está enfocado a trabajar con módulos en entornos nodejs y Bower está enfocado a gestionar la capa de Frontend del proyecto. Os doy alguna de las razones por las que se recomienda trabajar de esta manera.

• Dependencia anidada(npm) y dependencia plana(bower)

Cuando instalas un módulo usando npm, se instalará el módulo que has pedido y todas las librerías necesarias para que éste funcione. Es lo que se llama dependencia anidada o «nested dependencies»

Cuando instalas una librería usando bower, solo se instalará la librería solicitada. Es lo que se llama dependencia plana o «flat dependencies»

Por ejemplo, fijaos la cantidad de dependencias que genera npm al instalar el módulo express

Imaginaos ahora que usamos npm para el front-end y metemos al proyecto bootstrap, requirejs, placeholder. Tendriamos 3 versiones de JQuery a la vez en el proyecto cada una como dependencia de las librerías anteriores. La cantidad de conflictos que podemos montar en 1 segundo …

• Espacio en disco

Como consecuencia de la dependencia anidada, el tamaño del proyecto crece exponencialmente. En la parte de servidor podemos permitirnos el lujo de ocupar más espacio del debido pero en cliente no.

• Tiempo excesivo de carga

El tener varias versiones de una misma librería, supone un tiempo de carga superior de la página.

• Caos en en la estructura del proyecto

Usar npm para todo provoca que tengas una estructura bastante desordenada, todo bajo la carpeta node_modules.

Desde el blog de npm, podéis consultar estos motivos con más detalle

Blog npm: blog

Me has convencido…Voy a usar Bower para el frontend

Bower necesita tener instalado node, npm y git

No me detengo a explicar como montar el entorno con node, como trabajar con npm o como instalar gist. Podeis consultar otros post

Introduccion a  node

Introduccion a npm

Introduccion a git

Para instalar bower de forma global a cualquier proyecto

npm install -g bower

Buscando paquetes en bower

bower search bootstrap

Instalando un paquete con una versión determinada

bower install bootstrap#2.3.2

Trabajando con bower

De la misma manera que tenemos un package.json para gestionar los módulos del proyecto, tendremos un bower.json para gestionar las librerías del proyecto. Este fichero podemos crearlo de forma manual o con ayuda de bower init

bower init

Una vez creado, añadiremos las librerías que queramos para el proyecto, por ejemplo jquery, boostrap, uderscore

Le decimos a bower que nos instale las librerías del fichero bower.json con bower install

bower install

Si os fijais tenemos perfectamente dividido el proyecto

• bower : las librerías del proyecto irán en bower_components
• npm : los módulos del proyecto irán en node_modules

Post By Rocio Muñoz (37 Posts)

Ingeniera Informatica. Dicen que todos los niños nacen con un pan debajo del brazo ... Yo creo que llevaba un ordenador. Trabajo como programadora en Cic en entornos Java. Apasionada del mundo web y la innovacion social.

Connect

Buenas Prácticas, Diseño Web, Gestión de proyectos, JavaScript