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

The Vorlon.js core team is split between Paris and Redmond. Last week we decided to ship a new big release and we all took a plane to Redmond and get together for a 2 days intense pair programming session. After multiple hours of bug bashing and last minute features coding we are happy and proud to announce that we published the new version of Vorlon.js : 0.1.0 !

vorlon

You can get it by running the npm install –g vorlon command, clone the GitHub repo: https://github.com/Microsoftdx/vorlonjs or install it using the new deploy to Azure button we added between the last version and the new one (read more about this).

image

4 month between the 0.0.15 and the 0.1.0 version and we are now up to almost 1000 commits, 100 pull requests and we closed and fixed 120 issues. Vorlon.js is heading the right direction and this is mainly thanks to the web community: thanks to you guys ! 🙂

What is new in this release

Unit testing plugin

We now have a unit testing plugin based on qUnit. You can upload you Qunit file or directly type your test on the Vorlon.js dashboard : it will run it on the client side and get you the result summary.

image

This has been done by Cubitouch.

Device plugin

This is inspired from the http://mydevice.io website created by Raphael Goetter. It is giving you information about the device you are running your website on like the pixel ratio, the pixel per points, the meta viewport or even the User Agent.

image

Best practices plugin

Creating a web site can be challenging sometimes because you have to follow a lot of rules and best practices to provide the best experience possible. We decided to help you improving your code with Vorlon.js through the Best Practices analyzer. It is performing static and dynamic analytics on your code to tell you what could be better. It is organized into 4 categories:

  • Accessibility: Warn you if you have forgotten thing like alt on images or aria attributes
  • Mobile Web: Are you using responsive practices ? do you use the meta viewport tag?
  • Performances: Are your files minified? Did you bundle them do reduce http request count ?
  • Web standards: Are you doing browser detection? Are you correctly using CSS prefixes?

 

This is only a subset of all the rules we have here, and the two guys who did it (Guillaume Leborgne and Mehdi Lahlou) made it extensible. You can create your own rules and easily add them to this analyzer.

image

Improvements and other plugins :

Vorlon.js got its first third party plugin : Wappalyzer which is available in the GitHub repo folder plugins library.

The DOM Explorer has been highly improved with :

  • All of the nodes displayed (not only body, but head too)
  • CSS updates
  • A better search UI
  • Select a DOM on the client

 

Object explorer is better integrated in the dashboard and we did some bug fixes.

Dashboard

We did a lot of refactoring, performance and stability improvements on the dashboard. You can also refresh the client side from there by clicking on the reload client button.

image

HTTP Proxy : use Vorlon.js without changing your client code

We created a new awesome feature we were able to ship on this version : the HTTP proxy. This allows you to inject the Vorlon.js client code automatically while browsing your website.

The way it works is really simple: all the http requests you do for your client site are redirected through an http proxy hosted on node.js side by side with the Vorlon.js server. Each time an HTML page goes there we inject the script tag you would have had to add yourself.

To use it: only browse this url : http://localhost:1337/httpproxy (or any domain name you are using instead of localhost).

image

Enter your url and click on  :

  • Open website only : to open a proxified url for your website
  • Open dashboard only: to open the dashboard plugged to a session according to the proxified version of your website
  • Inspect with Vorlon.js: to open both in one click

 

You can notice than the URL is different from your original one :

image

It is composed of multiple parts:

http://localhost:5050/vorlonproxy/root.html?vorlonproxytarget=[YOURWEBSITEURL]&vorlonsessionid=[DASHBOARDSESSION]

You just have to browse your Vorlon.js instance using the correct session :

http://localhost:1337/dashboard/[DASHBOARDSESSION]

And everything works the same way you already know ! 🙂 Isn’t that awesome ?

A huge thanks to Guillaume Leborgne who did a really strong work on this one.

More improvements

We added support for authentication  :

vorlonauth

And automated deployment from GitHub to you Microsoft Azure account:

image

You can read more about this here : http://blogs.msdn.com/b/emargraff/archive/2015/09/17/how-to-deploy-an-online-vorlon-js-server-with-authentication.aspx

Do not hesitate to share about this with us on twitter or to create an issue on GitHub: https://github.com/MicrosoftDX/Vorlonjs

And if you want to participate, jump in and create new plugins ! Here is something to get you started : http://blogs.msdn.com/b/emargraff/archive/2015/06/01/how-to-create-a-vorlon-js-plugin.aspx

Have fun 🙂

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