Bower, gestionando el frontend en proyectos web

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?

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»

dependencias

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

estructura npm

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

 

bower

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

, , ,

Trackbacks/Pingbacks

  1. Oracle JET (Javascript Extension Toolkit) - Cantabria TIC - 11 marzo, 2016

    […] JET utiliza grunt como gestor de tareas y bower como gestor de librerias del frontend. Asi que si no lo tienes instalado, deberás […]

Deja un comentario

Leave your opinion here. Please be nice. Your Email address will be kept private.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Translate »