BROADCASTS.com

Comenzamos un nuevo cap\xedtulo de nuestro podcast, La Tecnolog\xeda 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\xe1 la gesti\xf3n de todas las librer\xedas y frameworks de c\xf3digo abierto que utilizemos (Bootstrap, jQuery, AngularJs, BackboneJs, etc...), permitiendo a\xf1adir, actualizar y modificar las referencias a nuestro proyecto. Todo se gestiona a trav\xe9s de la l\xednea 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\xf3n que vamos publicando y alg\xfan que otro contenido extra.

Estamos intentando recabar informaci\xf3n para saber en qu\xe9 podemos ayudarte. Te pedimos, por favor, que rellenes la encuesta sin ning\xfan compromiso. La utilizaremos para obtener informaci\xf3n y saber c\xf3mo podemos ayudarte. Te llevar\xe1 como mucho 20 segundos, muchas gracias.

Encuesta d\xe9janos ayudarte



Como ya te hemos dicho, Bower es un gestor de paquetes de c\xf3digo abierto para el desarrollo web (front-end). Fue creado por dos miembros del equipo de Twitter y su principal misi\xf3n es hacernos la vida un poco m\xe1s f\xe1cil a los desarrolladores. Gracias a esta herramienta podr\xe1s descargar tus librer\xedas y frameworks sin tener que visitar ninguna web oficial o no oficial, mantenerlas actualizadas y comprobar si ha versiones nuevas.

Instalaci\xf3n

Bower depende de tres herramientas para poder ser instalado en tu m\xe1quina. Por un lado necesitas tener NodeJS. Ya hemos hablado de este servidor web en el cap\xedtulo donde vimos un ranking frameworks de JavaScript. Es una aplicaci\xf3n 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\xeda de las librer\xedas y frameworks.

Dentro de NodeJS hay un gestor de m\xf3dulos que se llama npm. A trav\xe9s de la l\xednea de comandos puedes instalar, f\xe1cilmente, Bower. Una vez que tenegas instalado NodeJS y Git solo debes escribir npm install -g bower y se instalar\xe1 Bower de forma global en tu m\xe1quina.

Instalaci\xf3n de paquetes

Bueno, pues ya tienes todo lo necesario para empezar a utilizar Bower. Lo primero ser\xeda buscar el paquete que quieres instalar. Para ello debes acceder, a trav\xe9s de la l\xednea de comandos, al directorio ra\xedz de tu proyecto. Ejecuta el comando bower search bootstrap. Esto har\xe1 una b\xfasqueda de todas las librer\xedas que tengan como palabra clave Bootstrap. Como ya te habr\xe1s dado cuenta, para ejecutar cualquier comando debes poner primero la palabra bower, luego el comando y por \xfaltimo los par\xe1metros. Si quieres ver la lista de comandos disponibles puedes hacer bower --help. Tambi\xe9n puedes ir a la p\xe1gina de referencia de la web oficial donde te explica cada comando en detalle.

El comando search te mostrar\xe1 un listado como este.



bower search bootstrap


Aqu\xed es donde tienes que localizar el framework o librer\xeda que quieres incorporar a tu proyecto. En nuestro caso, Bootstrap, es la primera opci\xf3n. Lo que aparece en azul verdoso, es el nombre \xfanico dentro del respositorio de Bower y es con lo que te tienes que quedar. Ahora que tienes localizado el paquete vamos a obtener m\xe1s informaci\xf3n. Escribe en la l\xednea de comandos bower info bootstrap.



bower info bootstrap


Como puedes observar nos da la informaci\xf3n sobre donde est\xe1 alojado, el archivo bower.json, hablaremos luego de \xe9l, y las diferentes versiones disponibles que tenemos del framework.

Ahora solo te queda elegir que versi\xf3n quieres instalar. Puedes instalar la \xfaltima versi\xf3n haciendo bower install bootstrap o elegir una versi\xf3n espec\xedfica con bower install bootstrap#3.3.2. En el primer caso te instalar\xe1 la versi\xf3n 3.3.5 ya que, la versi\xf3n 4.0.0 es una versi\xf3n alpha. Si quieres saber m\xe1s sobre como se numeran las versiones, te recomendamos que visites la p\xe1gina de Semver , donde te explican el versionamiento sem\xe1ntico.

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\xf3n vital de nuestro proyecto. Es muy importante si lo que est\xe1s desarrollando, lo vas a compartir a trav\xe9s del repositorio de Bower. Si simplemente lo que quieres es poder manejar tus dependencias de forma semi-autom\xe1tica, solo tienes que crearlo.

Si ejecutas el comando bower init, lanza el proceso de configuraci\xf3n del archivo bower.json, donde te preguntar\xe1 un mont\xf3n de cosas innecesarias si no vas a publicar en su repositorio. Otra opci\xf3n es crear el archivo sin ning\xfan contenido, siempre dentro del directorio ra\xedz 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\xe1 las dependencias de nuestro proyecto. Es muy importante, todas las librer\xedas que sean a\xf1adidas a esta propiedad podr\xe1n ser manejadas por Bower. La segunda propiedad son las dependencias necesarias en la fase de desarrollo, lo t\xedpico son librer\xedas para hacer test o control de depuraci\xf3n.

\xbfC\xf3mo podemos a\xf1adir las dependencias a este archivo? Si ejecutas el comando bower install bootstrap, descargar\xe1 el framework a tu m\xe1quina sin modificar el archivo bower.json. Para obligar a que esto sucede tenemos que a\xf1adir al final -save, quedando de la siguiente manera el comando, bower install bootstrap -save. Esto a\xf1adir\xe1 el framework a la propiedad dependencies y podr\xe1s gestionar mediante los comandos de Bower, su actualizaci\xf3n, modificaci\xf3n o eliminaci\xf3n.

.bowerrc

En el archivo .bowerrc configurar\xe1s 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\xedz de tu proyecto, Bower utilizar\xe1 los valores por defecto. De todos las propiedades de configuraci\xf3n, vamos a hablarte de tres propiedades importantes.

La propiedad analytics indica si queremos mandar datos estad\xedsticos de uso a Bower, por defecto es true (verdadero). Estos datos son an\xf3nimos y permiten computar los comandos m\xe1s utilizados, saber el n\xfamero de usuarios por pa\xeds o los paquetes m\xe1s instalados. La informaci\xf3n, o parte de ella es p\xfablica, a trav\xe9s de la web oficial. Estas estad\xedsticas nos pueden dar una idea de cuales son los paquetes m\xe1s 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\xf3nde est\xe1 el directorio ra\xedz de nuestro proyecto. A partir de \xe9l se obtienen el resto de rutas. Si no est\xe1s seguro te aconsejo que lo dejes por defecto y coger\xe1 el directorio donde esta el archivo .bowerrc.

Por \xfaltimo y quiz\xe1s la m\xe1s importante es directory. Indica donde queremos guardar los paquetes que descargamos, por defecto los almacenar\xe1 en bower_components. Si quieres cambiar a otra carpeta solo tienes que dar valor a esta propiedad. No es tan importante as\xed que puedes cambiarla pero mucho ojo, las referencias que se hacen en el c\xf3digo HTML deben guardar concordancia con esta propiedad.

Conclusiones

A nuestro modo de ver la programaci\xf3n, Bower es una herramienta muy interesante. Creemos que tener un gestor de paquetes es indispensable en los proyectos web. Si en tu d\xeda a d\xeda desarrollas aplicaciones web, este tipo de herramientas pueden ahorrarte mucho tiempo al final de a\xf1o.

Bower o npm pueden ser dos herramientas que se complementen o que se solapen, dependiendo de tu rol en la programaci\xf3n. Seguramente si eres un desarrollador front-end, la opci\xf3n sea Bower, en cambio si eres un desarrollador full-stack, deber\xe1s pensar si utilizar Bower te aporta algo m\xe1s de lo que puedes hacer con npm. Al final siempre el desarrollador decide, nunca hay una soluci\xf3n \xfanica y no hay soluciones mejores o peores.

Adem\xe1s de los explicado aqu\xed, estos enlaces puede que te resulten interesantes.

Maven, gestor de paquetes para Java
Nuget, gestor de paquetes para .NET
Recurso del d\xeda

Material Design Icons

Material Design Icons es una web donde podemos encontrar un sinf\xedn de iconos para nuestras aplicaciones. Mantenida por la propia comunidad, ofrece la versi\xf3n 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\xedfico complemento en tus desarrollos para potenciar el dise\xf1o de tus proyectos.

Muchas gracias a todos por los comentarios y valoraciones que nos hac\xe9is en iVoox, iTunes y en Spreaker, nos dan mucho \xe1nimo para seguir con este proyecto.