Developers working with JavaScript always have that small feeling that they are working with something ahead of their own time, and can help them create solutions that are on themselves ahead of time. However when it comes to testing the said solution, traditional testing techniques leave a bitter aftertaste. There is no one-stop solution to test and debug your full JS technology stack app from a remote location and in the age of cloud this kind of makes you feel that you are living alongside Fred Flintstone. A little at least. However that was until recently.
On 29th April 2015, Microsoft announced the launch of Vorlon.JS – a remote testing and debugging tool for your JavaScript applications. It’s fast, it’s neat, it’s futuristic. And yes, it’s awesome.
Why every JS developer should tryout Vorlon.js?
This tool is great for its capability to create a test environment that you can run and monitor remotely. The tool is device agnostic, that means that it can be used to test JS running on any platform including web, mobile, game consoles, and every other JavaScript enabled device. The JavaScript debugging tool is browser independent and works on all devices that support JS and HTML/CSS. The tool is made up of only two languages JS and HTML/CSS, (well three if you consider TypeScript and JavaScript different). You can connect up to 50 devices to a single testing platform and check the performance on all of them. If the concept of Internet of Things actually materialize, I won’t be surprised you would be debugging your home automation system in Vorlon.JS.
The concept of remote debugging fails if the system has no support for collaborative working and Vorlon.JS does not disappoint in the area. A team of developers can work on the debugging tool simultaneously, with each developer’s results visible to others.
The tool in itself is like a small server and you can run it on local machine or on a hosted server. The dashboard of Vorlon.JS is your command center and you can communicate with your connected devices from there.
It is easy to use and of course can be extended with custom plugins, scripts, and hacks. However since the tool is new, there are not many plugins available.
The default four plugins are:
- A Console plugin to stream console messages to the Vorlon.JS Dashboard.
- A DOM explorer plugin to view the DOM activities of the webpage.
- Modernizr plugin to display the device/browser’s supported HTML, CSS, and JS features.
- An Object Explorer plugin to display all JavaScript variables associated with the remote page.
So What Exactly is Vorlon.JS Made Of?
Following the dream of device agnostic architecture, the tool is built using all open source tech.
Vorlon.JS developers used Visual Studio Community as developing environment which was coupled with Node.js tools for Visual Studios and Azure. Though the front end was JavaScript and Typescript, you only have to learn JS to become proficient user.
So the main technologies used are
- A Node.js Server that is hosting the dashboard page
- Socket.io to establish direct connections with dashboard and other various connected devices
Here’s a global schema of how it works:
Each device should have a reference to a simple Vorlon.js page that is served by the Node.js server. The tool’s client side code interacts with client devices and then communicates the output to dashboard through the server.
To know more about Vorlon.JS extendibility and how you can create your own Vorlon.JS plugins, checkout the documentations here.
How do you run Vorlon.JS
Like every web testing tool, there are two configuration you have to do to start using Vorlon.JS.
First you will have to download and install Vorlon.JS from npm to your server. To install and run Volon.JS just type the following code from your node command line, and execute
$ npm i -g vorlon
This will download Vorlon.JS to your server
To start running it, type
$ vorlon
This will start a localhost server on default Vorlon.JS port 1337.
Second, is the client side installation. You need to give your app the ability to communicate with Vorlon Server before you can start benefitting from the debugging tool. You can do that by adding the following line of code to your app.
<script src="http://localhost:1337/vorlon.js/SESSIONID"></script>
And that’s it. You are now up and running Volron.JS
VorlonJS Dashboard
Once you have installed you tool The Vorlon Dashboard is where all the action is happening. You can access the dashboard by navigating to the link http://localhost:1337/dashboard/SESSIONID.
Here, SESSIONID is the id that you define for a current dashboard session, the ID that you defined in your client installation coding.
And what does ‘Vorlon’ mean?
–David Catuhe
The Vorlon.JS is built by Microsoft’s David Catuhe and team. Turns out that they are big fan of hit 90’s sci-fi space series Babylon 5. If you are hardcore nerd then you may have guessed it, but if you are not then it’s suffice to say that Vorlons were a race of aliens known for their knowledge, wisdom, and diplomacy skills.
The theme also inspired David’s other project Babylon.JS.
You can also take a look at Top 5 Javascript Frameworks for Web and Mobile App Development.
References:
https://github.com/MicrosoftDX/Vorlonjs/
http://vorlonjs.com/
http://bit.ly/1cBhZXG