ENTENDIENDO LA ARQUITECTURA FRONT-END USANDO BOWER

< script src=”my own” title=”arquitectura front-end”>

Hace muchos años atrás, la programación web front-end se limitaba a escribir interminables líneas de código inentendible en Javascript (que sí, que no es nuevo). Gracias a Dios, se ha avanzado tanto en este campo que ya se habla de arquitectura front-end, por la complejidad que pueden alcanzar las aplicaciones Javascript en la actualidad.

Transpiladores, lenguajes híbridos (como Opa, Rust, Dart, Scala, Ceylon^^’ ) que compilan a Javascript, NoSQL, aplicaciones híbridas o de escritorio, y bueno, también está React.js ( 😡 ya hablaré de eso en otro post); todo un ecosistema de aplicaciones en Javascript sin mencionar las interacciones que se pueden aplicar (Canvas, WebGL, WebAPI, Workers, PushAPI, y un muy largo etcétera 💡 ) pero este post no se trata de eso… ¿de qué iba? 🙄 ¡Ah, si!

Un problema característico de las aplicaciones Javascript es la complejidad con la que muchas veces se interrelacionan las dependencias. Pueden darse casos en los que se use jotacueri con una gran dependencia de plugins que a su vez dependen de este, por lo que la librería se convierte entonces en una dependencia crítica. En este caso particular, hacer un “control de versiones” a la librería, puede resultar un tremendo dolor de cabeza.

Afortunadamente, existen en la actualidad, herramientas como bower.io que facilitan el manejo de dependencias dentro de nuestra interfaz de usuario, que además permite el control de versiones, la migración de módulos y dependencias a otro proyecto así como también la centralización de nuestras librerías.

El único requisito para instalar bower es simplemente tener Node.js instalado, :mrgreen: entonces ejecutamos:

$ sudo npm -g install bower

O como usuario root sin el sudo.

Una vez instalado vamos a nuestro proyecto y ya podemos usarlo:

$ bower <comando> <paquete>*

Donde <paquete> significa la librería, framework o módulo que vayamos a instalar, y <comando> significa uno de estos comandos:

<comando> significado
init Inicia un proyecto en bower (crea un archivo bower.json en la raíz del proyecto
install Instala un paquete o dependencia con bower (por defecto lo guarda en la carpeta bower_components en la raźi del proyecto, si ésta no existe se creará)
uninstall desinstala un paquete o dependencia con bower, así como todas sus dependencias
list Muestra todos los paquetes instalados con su respectivo árbol de dependencias
version Controla las versiones de bower.json en los diferentes paquetes, también imprime la versión de bower actual
update Actualiza un paquete a la versión más reciente de dicho paquete (dando opción al usuario si desea actualizar también las dependencias de este paquete)
link Enlaza una librería o paquete instalada globalmente con npm dentro del proyecto (en el directorio bower_components)
search Busca paquetes dentro del repositorio de bower.io

Puedes ver más comandos en la especificación de su API.

Ahora vamos con un ejemplo de la gestión de dependencias de bower. Este es un proyecto en el que estoy trabajando actualmente y acá ejecuté el comando bower list:

proyecto-bower

Son pocas dependencias pero pueden ser más, muchas más… 😈

En algunos casos, especifica el hash del último push a Github del paquete, en otros casos especifica la versión instalada y una versión actual que puedes instalar usando bower update, y en otros casos te especifica la incompatibilidad de algunas dependencias con otras versiones anteriores del paquete (lo cual me parece genial por si se te ocurre cometer alguna burrada ^^’ )

En general, que existan herramientas así, me parece simplemente maravilloso, porque ya no estamos en la edad de las cavernas, donde el oscurantismo en torno a Javascript reinaba en los ordenadores… Ahora entiendo porque el logo de bower es un ave, ¡si con bower la gestión de dependencias ya es cosa de volar! 😉

¡A volar! XD

</script>

Anuncios