Cómo empezar a trabajar con Vorlon.js y ¿Qué hay detrás de este nombre tan extraño?
Vorlon.js es una librería Open Source, con licencia MIT, desarrollador por Microsoft, independiente de la plataforma que te permite depurar y testear remotamente JavaScript. Está basado en node.js y socket.io.
Esto es lo que aparecen como descripción en el GitHub oficial de proyecto donde se puede encontrar el proyecto de código fuente. Pero Vorlon.js es mucho más y en este artículo se va a mostrar cómo empezar a trabajar y crear plugins para proyectos concretos.
Instalación
Vorlon.js es una librería disponible en npm (el gestor de paquetes de node.js) y como tal la forma de instalarse es a través de este gestor de paquetes.
$ npm i -g vorlon
Una vez que se ha instalado Vorlon.JS a nivel global el siguiente paso es ejecutarlo para poder acceder al dashboard de Vorlon.JS.
$ vorlon
The Vorlon server is running
Esta es una captura del dashboard de Volor.JS ejecutándose en local. Al estar basado en node.js y en socket.io se puede ejecutar en cualquier entorno independientemente del tipo de sistema operativo.
Depurando una aplicación web
El siguiente paso con Vorlon.JS ya que el dashboard se está ejecutando es depurar una aplicación web, para hacer eso Vorlon.JS utiliza socket.io para crear un canal persistente entre la aplicación web de destino y el servidor de Vorlon.JS.
Así que la manera para inyectar el código es añadiendo una referencia de la librería de Vorlon.JS en la web que se quiera depurar. En el contexto de esta demo que ese está haciendo, el servidor se está ejecutando en https://localhost:1337/ por lo que la librería está en
https://localhost:1337/vorlon.js
Esta es la dirección que se tiene que agregar en la aplicación web para empezar a depurarla. En este ejemplo voy a crear una nueva aplicación de ASP.NET MVC desde Visual Studio 2015 para hacer la prueba de cómo depurar una aplicación web.
Antes de continuar con la demo, comentar que al ser Vorlon.JS una aplicación hecha en node.js este servidor se puede ejecutar en cualquier máquina, local o incluso de nube. Por ejemplo, se puede tener desplegado en Azure utilizando una máquina virtual de Ubuntu, en la que se ejecuta el servidor. Así todo el equipo puede utilizar esa máquina para poder depurar.
Depurando la primera web
En este caso lo que hay que hacer es en el fichero del proyecto de ASP.NET localizado en Views/Shared/_Layout.cshtml es incluir esta referencia para que se pueda depurar esta aplicación en concreto.
<script type="text/javascript"
src="https://vorlonjs-server.cloudapp.net/vorlon.js" >
</script>
A partir de ese instante en la consonla de Vorlon.JS aparecerá identificado el cliente y se podrán acceder a características concretas.
Características de Vorlon.JS
Estas son las características que Vorlon.JS ofrece actualmente:
DOM Explorer
Un explorador del árbol de objetos del navegador, permitiendo que se pueda mostrar todo los nodos que actualmente están en la aplicación, es decir, que si se produce un cambio en los nodos, se añaden o se modifican, esos cambios aparecerán en la consola igualmente.
Si se selecciona un elemento, se puede mostrar información sobre los pares de nombre valor de los estilos que se están aplicando actualmente.
Además, en el menú de la derecha se pueden añadir nuevas propiedades para en el caso de querer aplicar una nueva propiedad se puede hacer desde ahí, y ese cambio se aplicará directamente sobre ese elemento de la aplicación que se está depurando.
Cuando se selecciona un elemento del nodo en el dashboard de Vorlon.JS este elemento se destaca en la Web de origen para tener claro que se está seleccionando.
Modernizr
La siguiente pestaña se trata de Modernizr, una librería de JavaScript que permite comprobar características concretas que soporta el navegador. En vez que detectar si el navegador es Internet Explorer, Microsoft Edge, Google Chrome o Mozilla Firefox, lo que se hace es preguntar sobre una característica en concreto, como por ejemplo si soporta la etiqueta canvas de HTML5.
Pues bien, esta pestaña inyecta en la web, Modernirz con todas las opciones y analiza que características dispone en navegador donde se está ejecutando esta aplicación. Esto puede ser muy útil, si se está desarrollando aplicaciones web para dispositivos móviles y se desea saber las características del navegador donde se está ejecutando la aplicación.
Object Explorer
La ultima pestaña puede ser una de las más útiles de todo Vorlon.JS porque permite mostrar todos los objetos de JavaScript que se encuentra a nivel de window. Esto resulta tremendamente útil, si se está desarrollando una aplicación web en la que JavaScrip tiene una presencia muy fuerte y alguno de los objetos no se ha inicializado correctamente y se desea ver el estado. Por ejemplo, si está haciendo una operación y sé que quiere saber cuál es el estado del objeto una vez ejecutada esta operación, se puede utilizar la parte del filtrado para buscar ese objeto por el nombre y así ver el valor de los campos de ese objeto.
También permite saber que funciones tienen los objetos del navegador,
Por ejemplo, en esta captura de pantalla se está mostrando los métodos que contiene el objeto console disponible para Internet Explorer 11 en Windows 10, así los desarrolladores podrían saber que funciones dispone un navegador, de un dispositivo móvil.
Vorlon.js en dispositivos móviles
Como se ha comentado en varias ocasiones una de las cosas más interesantes de Vorlon.JS es poder utilizarlo para depurar aplicaciones web en dispositivos móviles, por eso se ha utilizado un Nokia Lumia 1520 ejecutando Windows 10 Mobile (Build 10080) con Project Spartan para mostrar como se puede depurar una aplicación web que está desplegada en Azure https://vorlonjsdemo.azurewebsites.net/
Esta imagen muestra el navegador, con la selección del detalle recuadrado en rojo donde se muestra lo que está ahora mismo seleccionado en el DOM Explorer de Vorlon.JS.
Vorlon.JS es un proyecto Open Source
Uno de los atractivos de Vorlon.JS, además de ser Open Source, es la posibilidad de crear plugins para extender la funcionalidad que se ofrece de base. De hecho está construido de tal manera que las tres características que se han visto en el artículo con plugins del cual se dispone el código fuente. https://www.vorlonjs.com/plugins/
Todo el código fuente de Vorlon.JS está hecho en TypeScript (https://www.typescriptlang.org/) lo que permite que para hacer un plugin utilizando orientación a objetos, en este ejemplo se ha creado una clase en TypeScript que hereda de Plugin, así se tiene un mecanismo consistente para poder crean plugins con un contrato de operaciones bien definido, que al final de todo generará JavaScript.
Próximos pasos
Vista la flexibilidad y potencia que tiene Vorlon.JS empezar a utilizarlo es muy fácil y cómodo, se ejecuta en cualquier plataforma, se puede desplegar en cualquier Cloud (aunque en este articulo se haya mostrado Azure) y permite depurar cualquier dispositivo, aplicación y navegador.
Solamente existe algo parecido con el Remote Debuggin de Android en Google Chrome, pero solo funciona para el navegador de Chrome (no para el navegador del sistema de Android), y requiere tener Android 4.4+, si tienes iOS o Windows Phone no puedes depurar tus aplicaciones.
Si estás creando aplicaciones basadas en Cordova o PhoneGap definitivamente esta librería es un aliado para ti.
Luis Guerrero.
Technical Evangelist Microsoft Azure.