Olvídate de actualizar con Bower

Si eres desarrollador web estás de suerte porque hoy te presentamos una herramienta con la que olvidarte de actualizar las librerías y el framework que utilices en tus proyectos. Se trata de Bower, un gestor de dependencias para frontend que te ayudará a instalar y a mantener al día todos los desarrollos externos que utilices en tus páginas web. Este programa, que está basado en NodeJS, se encargará de las librerías de tus proyectos para la web, es decir, las que utilizas en la parte publica, ya sean Javascript o CSS. Olvídate de actualizar ese plugin para crear un slide, olvídate también de actualizar jquery o también, olvídate de Bootstrap. Bower, la solución del lorito, te ayudará en todos estos menesteres de una manera sencilla y rápida. Ya sabéis que para un desarrollador es vital optimizar tiempos. Bueno, pues con Bower es posible.

Este pequeño software se ejecuta desde consola y cuenta con una sencilla API de comandos con la que podrás hacer tareas de mantenimiento y administración de paquetes necesarios para construir la parte pública de nuestro proyecto web. Ya no tendrás que estar atento a las nuevas actualizaciones de los plugins y de las librerías que uses en el frontend de tu web. Tampoco tendrás que subirlas a mano. Bower se ocupará de todo eso y se convertirá en tu ayudante fiel. ¿Quieres saber cómo funciona?

¿Cómo funciona Bower?

Antes de la existencia de Bower, los desarrolladores cuando teníamos que instalar un plugin o una librería en nuestro sitio web, teníamos que ir a la web oficial donde descargar dicho plugin, bajárnoslo a nuestro equipo y subirlo a la carpeta adecuada para el perfecto funcionamiento del mismo en nuestro sitio. Con Bower este trabajo, que no es muy laborioso pero si muy tedioso y acapara tiempo que podríamos estar dedicándolo a otras cosas, se terminó. Ahora será este software el que se encargue de instalar y actualizar nuestras librerías. Por ejemplo, si queremos instalar jquery en nuestro sitio, tendremos que ejecutar este comando:

bower install jqueryr

Es posible que aún no le veas la tremenda utilidad a este programa pero, créeme que cuando cuentes con un proyecto grande el cual usa más de 20 librerías y tengas que ir actualizando una a una lo echarás de menos. Recuerda que para actualizar sin Bower, tenemos que descargarnos la nueva versión del sitio oficial, borrar la librería desfasado de nuestro sitio y subir la nueva. Si contamos con un sitio en la que solo hay una librería no nos llevará mucho trabajo, pero si contamos con proyecto en que las librerías se cuentan a docenas te darás cuenta de su utilidad.

¿Cómo instalar Bower?

Si quieres utilizar Bower, primero hay que instalarlo. Recuerda que está desarrollado con NodeJS, asi que si no lo tienes instalado, tendrás que hacerlo también. Al instalar NodeJS, se instala también un gestor de paquetes en Javascript llamado npm. Este gestor es apto para descargar e instalar cualquier programa basado en NodeJS en nuestro equipo y se opera por línea de comandos. Para instalar Bower, esta sería la sentencia en npm:

npm install -g bower

Con esto tendremos Bower, descargado e instalado en nuestro equipo. El uso de Bower es muy sencillo, es más, si tienes experiencia con otros softwares de control de dependencia, como Composer para PHP, será pan comido para ti. A continuación te vamos a explicar como usar Bower.

file bower.json

Lo suyo es que te crees un archivo json en el raíz del proyecto que gestione de una manera formal todas las dependencias que tiene tu sitio web. Así, mediante comandos y haciendo referencia a este archivo, podrás actualizar todas las librerías de golpe, o simplemente las que estén desactualizadas, o decirle que te instale las dependencias que desees en un nuevo proyecto, de una manera sencilla y rápida. Para crear por primera vez este archivo basta con lanzar el comando bower init desde la raíz del proyecto de este modo:

bower init

Este comando te solicitará unos cuantos datos que tendrás que ir rellenando para el perfecto funcionamiento de Bower. De todas maneras, te ofrecerá unos valores por defecto de los cuales podrás aprovecharte en el caso de no saber algo de lo que te pregunte. El archivo json generado debería tener una forma parecida a esta:

{
  name: 'Testing Bower',
  version: '0.0.0',
  authors: [
    'Programacion.net'
  ],
  description: 'Hola Mundo',
  main: '',
  moduleType: [],
  license: 'MIT',
  homepage: 'http://www.programacion.net',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

Ahora tendremos que editarlo con nuestras dependencias. Para ello tendremos que nombrar los paquetes junto al número de versión tal y como se indica en el siguiente script:

{
  name: 'Testing Bower',
  version: '0.0.0',
  authors: [
    'Programacion.net'
  ],
  description: 'Hola Mundo',
  main: '',
  moduleType: [],
  license: 'MIT',
  homepage: 'http://www.programacion.net',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
  "dependencies": {
    "jquery": "~2.1.3",
    "bootstrap": "~3.3.4",
  }
}

Una vez declaradas todas las dependencias podemos instalarlas gracias al comando bower install, que se ocupará de buscar las actualizadas y sustituirlas por las que tenemos en nuestro sitio web.

Esperamos que te haya quedado claro el funcionamiento de este gran gestor de dependencias. Ya no tendrás que asegurarte en cada proyecto web que está todo actualizado. Este pequeño loro nos lo solucionará todo al instante. ¿Qué utilizas tu para actualizar el software del frontend de tu web? ¿Lo sigues haciendo a mano?