Bower y Visual Studio ¿en serio?

Una introducción de como usar Bower con ASP .NET 5 RC1

ASP NET 5 RC1 recién ha salido, esto nos ha permitido explorar las novedades y comenzar a experimentar. Para aquellos que no tienen ni idea de que hay de nuevo, los invito a ponerse al tanto por aquí: http://nearsoft.com/blog/the-world-of-net-2015/ y para los que ya están experimentando, les comparto este pequeño post para que sepan como esta integrado bower en Visual Studio 2015.

Una de las muchas novedades en ASP NET 5, además del cambio en la estructura, es la inclusión de Bower.

Y con que se come te preguntarás… La buena noticia es que no se come y se puede comprender fácilmente.

Si utilizas Visual Studio, como la gran mayoría de developers .NET, déjame decirte que VS nos lo hace muy fácil.

Bower es un administrador de paquetes que nos permite instalar y restaurar paquetes del lado del cliente (eso incluye librerías de JavaScript, frameworks para el cliente y archivos de CSS) resolviendo dependencias e instalando los paquetes necesarios.

Para las librerías del lado del servidor aún usamos NuGet Package Manager. Y si te preguntabas porque se dejó de usar NuGet para las librerías del lado del cliente, déjame decirte cual es probablemente la razón más fuerte; Bower está enfocado en los paquetes para front-end de desarrollo web y cada vez que sale una nueva versión o actualización de estos paquetes los vamos a encontrar fácilmente con Bower, en cambio puede pasar algún tiempo para que NuGet se actualice y deje las nuevas versiones fuera de nuestro alcance. Además de que el tiempo en que la actualización está disponible con Bower es mínimo, otra gran ventaja es que encontramos muchas más librerías. Y si no te preguntabas por que se dejó de usar NuGet para las librerías del lado del cliente, pues ya es muy tarde porque lo has leído.

Entonces se puede decir que NuGet sigue siendo el rey del lado del server, pero el reino del lado del cliente es sin lugar a duda de Bower.

Ahora sí, manos a la obra. En el siguiente ejemplo estoy utilizando Visual Studio con ASP NET 5 RC1

1. Creamos un nuevo proyecto vacío, en vez de un template hagámoslo desde cero.

2. Agregamos el archivo de bower.json (y su correspondiente .bowerrc)

En nuestro proyecto click derecho >Add > New item… >

En la sección del cliente elige el archivo de configuración de Bower:

3. En bower.json escribimos el nombre de la librería que queremos agregar, podrás notar que tenemos el autocompletar facilitando la tarea y sugiriendo versiones. ¡Nice!

4. Solo basta con guardar tus cambios y se genera inmediatamente una carpeta ‘lib’ dentro de ‘wwwroot ‘con el paquete que solicitaste. En este caso jQuery es necesario así que Bower lo agrega también. ¡Maravilloso!

5. En la sección de ‘Dependencias’ puedes ver lo que tienes en Bower incluyendo la versión y sus dependencias de forma más directa.

Algo interesante…

La carpeta de ‘lib’ es nombrada así por default pero puedes nombrar esa carpeta como quieras, solo tienes que renombrar el folder en el archivo .bowerrc

El resto es igual, incluir el nombre de tu paquete y guardar cambios

Listo! así de simple, ahora puedes fácilmente agregar paquetes del lado del cliente y disfrutar de una gran variedad de los mismos.

Janneth Amaya .NET Software Engineer @Nearsoft