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 !
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 :
- Accessibility rules added in the Best Practice Analyser (thanks to Deque and their wonderful project : aXe)
- Vorlon.js Desktop : a new way to install Vorlon
- Node.js process debugging !
- We setup some DevOps practices to help us test and deploy our staging environments
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 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.
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.
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/
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:
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!
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:
- Here is the grunt task: https://www.npmjs.com/package/grunt-webstandards
- Here is the gulp task: https://www.npmjs.com/package/gulp-webstandards
- Here is a blog article talking about this : http://www.sitepoint.com/three-plugins-every-gruntfile-gulpfile-needs-make-website-great/
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)
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! 🙂