Le Post Infeeny

Les articles des consultants et experts Infeeny

Archives Mensuelles: décembre 2015

How to use Vorlon.js desktop

Vorlon.js is now available as a desktop version for Windows and Mac OSX. You could dowload them on Vorlon.js website and get started using Vorlon in a few seconds.

If you want to know more about Vorlon, check out this getting started video. There are also some great articles about using Vorlon.js. In this post, we will focus on the desktop version and its UI.

Vorlon desktop helps you use Vorlon to debug your website without setup  pre-requisites, and help you start and configure your environment very easily.

screen.PNG

On the left side, you have a menu bar.

menu

It gives you access to Vorlon’s logs, settings, and the about page with usefull info and links.

The default settings will probably fit your needs, but you could change it with the dedicated screen. It might be usefull, especially if you need to change ports (if you want to run it side by side with the server version of Vorlon for example).

config

To start debugging your website using Vorlon.js, just add this script to your website or application (it’s so usefull for cordova applications !):

<script src="http://MCNTAB011:1337/vorlon.js"></script>

Vorlon has a session mecanism to differenciate client web sites and applications. If you want to define a session, you just have to specify it in the url like this :

<script src="http://MCNTAB011:1337/vorlon.js/mysession"></script>

When using the desktop application, it’s likely that you will stick to the home screen. From there, you could see if Vorlon server is running, and start or stop it easily (Vorlon server will start automatically when you launch the application).

vorlon status

The desktop version also helps you manage your sessions, and configure Vorlon plugins for each session. The home page displays the list of connected and configured sessions. You could add and configure a session even if no client is connected.

sessions.PNG

The green dot indicate that the session is in use. The empty dot means that there is no client connected.

session options.PNG

For each session, you could see the number of connected clients, and open the Dashboard for that session.

dashboard.PNG

The last button helps you configure your session. You could choose if the client must receive socket.io (if your website already use socket.io, turning this off may helps), and turn each plugin on or off.

session config.PNG

We really hope you will enjoy the desktop version. It’s a great way to get started using Vorlon.js. We welcome any feedback so feel free to join us on github to log your feedback or any issue you may have.

 

Bringing Vorlon.js to the desktop

Setting up Vorlon.js is really simple. You just have to clone the github repository and run 2 simple shell commands :
npm install
npm start
If you are familiar with git and node.js it really is a very easy and usual way to setup a web tool. If it sounds like a foreign language to you, I sincerely invite you to dig a little to become familiar with this. But…
When you look away from the blog posts writers, you will find out that many developpers don’t know about git and node.js. Some call them « dark matter developpers ». For those people, « npm install » may feel scary, and will begin by an internet search with something like « what is npm ». As a contributor to Vorlon.js I really feel concerned about user adopting and trying Vorlon for their every day « web debugging in hostile environment », not just the up-to-date developpers.
What if we could simply wrap Vorlon into an executable ? just download, and run the executable and you’re good to go. Well, we have done it, and it’s cross platform. The Windows and Mac OSX are available right now on Vorlon.js website. The linux version is missing for now. To be honest it’s just because I don’t have a linux machine at hand, and could not find time for setting up a VM. If you are volunteering for building the linux version, please get in touch !

Making a cross platform desktop app with web technologies

Vorlon.js is written with Node.js, and rewriting it with another technology would have been unwise, and a pain to maintain. In the web world you have some tools to make desktop apps. The more advanced projects are NW.js (aka node webkit) and electron (aka atom shell). Both tools works by combining Chromium (Google Chrome open source engine) and node.js. Those tools have subtle differences I won’t detail here.

For Vorlon we choose electron because it’s more oriented on the node.js part, but nw.js would probably have been great.

Making this desktop version has been easier than I previously thought, and it was really fun. The hardest part was about learning more on node.js to spawn Vorlon.js server process. The rest was just a thin ui layer on top of configuration and displaying active sessions. We intentionnally choose to keep the session dashboard as it is in the web version.

How to build the desktop version

If you want to see for yourself how easy it is, you could get to the github repository and grab the sources. Sources for the application is in the « desktop » folder. You will have to run « npm install » in the root folder to build Vorlon server. After that, you must install the modules for the desktop application. We do not initialize them with other parts of Vorlon because electron is a little fat and will take some time to download. Go to the « desktop » folder and run « npm install » and « npm start » in that folder. You should now see the desktop app running.
All the vorlon team is really proud of this new addition, and we hope it will make it easier for you to try Vorlon and debug your web sites and applications. If you have troubles or any suggestion, feel free to log it on github.