If you have any question about this article or Vorlon.js, feel free to contact me on twitter: http://twitter.com/meulta

3 month ago, we released the 0.1 version of Vorlon.js. We added a lot of great new features such as the Unit Test, the Device Info and the Best Practices plugin. One main improvement for this version was certainly the HTTP proxy which helps you debug a website using Vorlon.js without having to change its source code (http://vorlonjs.io/documentation/#vorlon-proxy).

Today we are thrilled to tell you that 0.2.1 is out !

Afficher l'image d'origine

Note: if you (still? ;-)) don’t know what Vorlon.js is, you must read this, or watch this.

What makes open source projects so interesting is as much the product itself as the strong community built around it. The 0.1 version has been created by a lot of people around the world and so did the new release we are announcing in this blog post.

We really want to thank you all. Sharing and working together is what makes the web so amazing!

Amoung a lot of improvements, the 4 main new features in 0.2.1 are :

I will go through a quick description of all the improvements made to Vorlon.js in this article. Other blog posts will come later this week about these features.

Node.js debugging: Vorlon.js server side !

We first made Vorlon.js for a specific task: helping web developers to debug their JavaScript, HTML and CSS code running on a mobile. It was first like an F12 alternative for remote debugging.

We quickly understood that it could be more than that. The great work made by the community brought us specialized plugins like Angular.js inspector or QUnit runner. At this time, Vorlon.js was more and more a relevant tool for web (remote) desktop debugging, bringing additionnal features to classics F12 tools.

As Vorlon.js is built on top of JavaScript, we start wondering if it could be a good idea to use it to also debug Node.js apps. Obviously some plugins such as DOM Explorer or Modernizr might not be relevant in this case but what about the Console or the Object Explorer? In a world where Node.js processes are running everywhere in the cloud and on IOT objects, remote debugging could really be helpful, right? 🙂

Guess what ? It is now possible!

All you have to do is requiring a new NPM package we created:

npm install vorlon-node-wrapper

Requiring it in your project:

var vorlonWrapper = require(“vorlon-node-wrapper”);

Starting the Vorlon for Node client by giving it your Vorlon.js instance:

vorlonWrapper.start(serverUrl, dashboardSession, false);

And voila! Each time you will start your node.js process, you will have remotely access to the Console, the Object Explorer, and the XHRPanel.

image

Here is the documentation for this: http://vorlonjs.io/documentation/#debugging-nodejs-applications

Vorlon.js Desktop: another way to get our tool

As you can read on our documentation web site, Vorlon can be installed in many different ways. You can install it as an npm package, clone our GitHub repo or even auto deploy to Microsoft Azure. In the web community these are the common ways to get new tools on your dev box. Some people don’t know or don’t want to learn about these. Some of them don’t want to mess with command lines (yep, it happens ! :)).

We want Vorlon to be accessible to the most people we can. This is why we (and more precisely Guillaume Leborgne and Mehdi Lahlou, kudos to them!) decided to work on a standalone installer. It currently works on Mac and Windows.

Guillaume wrote a great article about this, feel free to take a look at it : http://mcnextpost.com/2015/12/01/how-to-use-vorlon-js-desktop/

screen.PNG

Vorlon.js team went DevOps

Well. DevOps means a lot of stuff.

It is about organization, people, tools, practices. As every team on the planet, we always need to improve what we do to release better code, faster and more efficiently. None of us are full time on this project, a lot of the work is done on our free (and passionate!) time. That’s why we love to optimize what we do to be able to achieve more.

This first iteration we did on DevOps covers the basics:

  • We organized better into clear releases using Issues
  • We activated automated checks on commits and pull requests
  • We enabled automated deployment of our internal staging environment
  • We automated the creation of a ready to use Docker Vorlon.js image
  • And more !

A lot of this is using Visual Studio Team Services and its integration capabilities with GitHub:

image

DevOps is about continuous improvement. This is why it is a work in progress. Julien Corioland did a great work on that and is sharing all of it with you in a blog posts series. It is a must read!

You can start from here: http://blogs.technet.com/b/devops/archive/2016/01/12/vorlonjs-a-journey-to-devops-introducing-the-blog-post-series.aspx

What else?

We did a lot of other improvements to this release :

  • Added new accessibility rule in the best practices plugin
  • Updated Modernizr to 3.0 and integrated more rules
  • Various bug fixes
  • Added click to URI on a resource in the DOM Explorer (kudos to Paul Fasola)
  • Stability improvements on the dashboard
  • Generating source map to be able to debug using Typescript files (thanks Rami Sayar)
  • Merged the two gulp files to only one (really… I cannot remember why we thought 2 of them was a good idea in the first place… 😉
  • Moved samples to the client samples folder. (Containing now a sample for Node.js debugging)

 

I also want to notice that Rami did a huge work porting our Web Standard analyzer to a Grunt and Gulp extension. You can now check your web code quality during your build workflow:

 

What’s next ?

We have multiple plans for the next version of Vorlon.js. The main focus now is certainly the Node.js debugging capability. Right now you can connect your node process to Vorlon and debug it but we want to create more specialized plugins. We have 3 of them in mind:

  • Node.js info (what you required, which version, and stuff like this)
  • Express.js (what view are loaded, automatic logs when a route is called, etc.)
  • Mocha (advanced remote test monitor)

 

Sebastien Pertus is also working on a plugin to help Office addin developers to debug their JavaScript code inside Vorlon. That should be released soon!

If you have other ideas for the Node.js area or for Vorlon.js in general, do not hesitate to do some pull requests or to add issues to our backlog!

We also now have a Slack account. If you want to join and chat about Vorlon, feel free to contact me on twitter 😉

Happy debugging! 🙂