Podcast: Descargar (26.4MB)
Comenzamos un nuevo capítulo de nuestro podcast, La Tecnología para todos. Si la semana pasada vimos Bootstrap, esta semana le toca el turno a una herramienta que debe ser indispensable en nuestros desarrollos, Bower, gestor de paquetes para el desarrollo web. Esta herramienta nos facilitará la gestión de todas las librerías y frameworks de código abierto que utilizemos (Bootstrap, jQuery, AngularJs, BackboneJs, etc…), permitiendo añadir, actualizar y modificar las referencias a nuestro proyecto. Todo se gestiona a través de la línea de comandos en MS-DOS, si trabajamos con Windows o Shell, si trabajamos con Mac o Linux.
Recuerda que queda muy poco para que finalice el plazo para inscribirte en el sorteo de un kit de Arduino. Solo tienes que suscribirte a nuestra lista de correo para recibir toda la información que vamos publicando y algún que otro contenido extra.
Estamos intentando recabar información para saber en qué podemos ayudarte. Te pedimos, por favor, que rellenes la encuesta sin ningún compromiso. La utilizaremos para obtener información y saber cómo podemos ayudarte. Te llevará como mucho 20 segundos, muchas gracias.
Encuesta déjanos ayudarte
Como ya te hemos dicho, Bower es un gestor de paquetes de código abierto para el desarrollo web (front-end). Fue creado por dos miembros del equipo de Twitter y su principal misión es hacernos la vida un poco más fácil a los desarrolladores. Gracias a esta herramienta podrás descargar tus librerías y frameworks sin tener que visitar ninguna web oficial o no oficial, mantenerlas actualizadas y comprobar si ha versiones nuevas.
Instalación
Bower depende de tres herramientas para poder ser instalado en tu máquina. Por un lado necesitas tener NodeJS. Ya hemos hablado de este servidor web en el capítulo donde vimos un ranking frameworks de JavaScript. Es una aplicación que se ejecuta del lado del servidor y corre bajo el motor o compilador JavaScript V8, desarrollado en el proyecto Chromium y que es el que utiliza Google Chrome.
Otra utilidad que tienes que instalar es Git, el famoso control de versiones utilizado por GitHub, de donde precisamente Bower obtiene la gran mayoría de las librerías y frameworks.
Dentro de NodeJS hay un gestor de módulos que se llama npm. A través de la línea de comandos puedes instalar, fácilmente, Bower. Una vez que tenegas instalado NodeJS y Git solo debes escribir npm install -g bower y se instalará Bower de forma global en tu máquina.
Instalación de paquetes
Bueno, pues ya tienes todo lo necesario para empezar a utilizar Bower. Lo primero sería buscar el paquete que quieres instalar. Para ello debes acceder, a través de la línea de comandos, al directorio raíz de tu proyecto. Ejecuta el comando bower search bootstrap. Esto hará una búsqueda de todas las librerías que tengan como palabra clave Bootstrap. Como ya te habrás dado cuenta, para ejecutar cualquier comando debes poner primero la palabra bower, luego el comando y por último los parámetros. Si quieres ver la lista de comandos disponibles puedes hacer bower –help. También puedes ir a la página de referencia de la web oficial donde te explica cada comando en detalle.
El comando search te mostrará un listado como este.
Aquí es donde tienes que localizar el framework o librería que quieres incorporar a tu proyecto. En nuestro caso, Bootstrap, es la primera opción. Lo que aparece en azul verdoso, es el nombre único dentro del respositorio de Bower y es con lo que te tienes que quedar. Ahora que tienes localizado el paquete vamos a obtener más información. Escribe en la línea de comandos bower info bootstrap.
Como puedes observar nos da la información sobre donde está alojado, el archivo bower.json, hablaremos luego de él, y las diferentes versiones disponibles que tenemos del framework.
Ahora solo te queda elegir que versión quieres instalar. Puedes instalar la última versión haciendo bower install bootstrap o elegir una versión específica con bower install bootstrap#3.3.2. En el primer caso te instalará la versión 3.3.5 ya que, la versión 4.0.0 es una versión alpha. Si quieres saber más sobre como se numeran las versiones, te recomendamos que visites la página de Semver , donde te explican el versionamiento semántico.
bower.json
Ya te hemos hablado de este archivo y has visto un ejemplo, el que se incluye dentro de Bootstrap. bower.json es el manifiesto y contiene información vital de nuestro proyecto. Es muy importante si lo que estás desarrollando, lo vas a compartir a través del repositorio de Bower. Si simplemente lo que quieres es poder manejar tus dependencias de forma semi-automática, solo tienes que crearlo.
Si ejecutas el comando bower init, lanza el proceso de configuración del archivo bower.json, donde te preguntará un montón de cosas innecesarias si no vas a publicar en su repositorio. Otra opción es crear el archivo sin ningún contenido, siempre dentro del directorio raíz de tu proyecto. Lo puedes hacer manualmente. Dentro de todas las propiedades que tiene este archivo nos vamos a fijar en dependencies y devDependencies. La primera propiedad nos dirá las dependencias de nuestro proyecto. Es muy importante, todas las librerías que sean añadidas a esta propiedad podrán ser manejadas por Bower. La segunda propiedad son las dependencias necesarias en la fase de desarrollo, lo típico son librerías para hacer test o control de depuración.
¿Cómo podemos añadir las dependencias a este archivo? Si ejecutas el comando bower install bootstrap, descargará el framework a tu máquina sin modificar el archivo bower.json. Para obligar a que esto sucede tenemos que añadir al final -save, quedando de la siguiente manera el comando, bower install bootstrap -save. Esto añadirá el framework a la propiedad dependencies y podrás gestionar mediante los comandos de Bower, su actualización, modificación o eliminación.
.bowerrc
En el archivo .bowerrc configurarás tu proyecto. Al igual que bower.json, tiene muchas propiedades que puedes ver en la web oficial. Si este archivo no existe en el raíz de tu proyecto, Bower utilizará los valores por defecto. De todos las propiedades de configuración, vamos a hablarte de tres propiedades importantes.
La propiedad analytics indica si queremos mandar datos estadísticos de uso a Bower, por defecto es true (verdadero). Estos datos son anónimos y permiten computar los comandos más utilizados, saber el número de usuarios por país o los paquetes más instalados. La información, o parte de ella es pública, a través de la web oficial. Estas estadísticas nos pueden dar una idea de cuales son los paquetes más utilizados, algo muy importante a la hora de decidir si usar uno u otro.
Otra propiedad importante es cwd (Current Working Directory o directorio de trabajo principal). Nos indica dónde está el directorio raíz de nuestro proyecto. A partir de él se obtienen el resto de rutas. Si no estás seguro te aconsejo que lo dejes por defecto y cogerá el directorio donde esta el archivo .bowerrc.
Por último y quizás la más importante es directory. Indica donde queremos guardar los paquetes que descargamos, por defecto los almacenará en bower_components. Si quieres cambiar a otra carpeta solo tienes que dar valor a esta propiedad. No es tan importante así que puedes cambiarla pero mucho ojo, las referencias que se hacen en el código HTML deben guardar concordancia con esta propiedad.
Conclusiones
A nuestro modo de ver la programación, Bower es una herramienta muy interesante. Creemos que tener un gestor de paquetes es indispensable en los proyectos web. Si en tu día a día desarrollas aplicaciones web, este tipo de herramientas pueden ahorrarte mucho tiempo al final de año.
Bower o npm pueden ser dos herramientas que se complementen o que se solapen, dependiendo de tu rol en la programación. Seguramente si eres un desarrollador front-end, la opción sea Bower, en cambio si eres un desarrollador full-stack, deberás pensar si utilizar Bower te aporta algo más de lo que puedes hacer con npm. Al final siempre el desarrollador decide, nunca hay una solución única y no hay soluciones mejores o peores.
Además de los explicado aquí, estos enlaces puede que te resulten interesantes.
Recurso del día
Material Design Icons es una web donde podemos encontrar un sinfín de iconos para nuestras aplicaciones. Mantenida por la propia comunidad, ofrece la versión Community-led Iconography totalmente gratuita. Encontramos versiones para Windows con XAML, Webfonts para desarrollo web, Android e IOS. Este paquete se puede instalar con Bower y npm. Prueba este magnífico complemento en tus desarrollos para potenciar el diseño de tus proyectos.
Muchas gracias a todos por los comentarios y valoraciones que nos hacéis en iVoox, iTunes y en Spreaker, nos dan mucho ánimo para seguir con este proyecto.
