Recently at //BUILD/ 2015 and in the Microsoft Edge Web Platform Summit, we have talked about how our focus on bringing our teams and the technologies behind our web platform closer to the broader community of developers. We’ve made it a priority to contribute to open source projects that improve web interoperability and help developers spend less time testing across browsers and devices.
One such project we recently announced is vorlon.JS– an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. vorlon.JS itself is a small web server you can run from your local machine or install on a server for your team to access, which serves the vorlon.JS dashboard (your command center) and communicates with remote devices. Installing the vorlon.JS client in your web site or app is as easy as adding a single script tag. It’s also extensible, so developers can write plug-ins that add features to both the client and the dashboard, such as feature detection, logging, and exception tracking.
It takes a village – in this case, it was a team of passionate evangelists, engineers, and &yet open source developers building together:
Happy to have had a small part to play in Microsoft’s Vorlon project that they announced yesterday: https://t.co/IFzEIq22Fd
— Henrik Joreteg (@HenrikJoreteg) May 1, 2015
It’s also great to see some of the community responses like this:
Vorlonjs looks dope. Is Microsoft making a comeback? I think so. http://t.co/5aoK8pZbi8— Stefan Richter (@stefanrichter) May 1, 2015
We think so too. So we’d like to share a bit more about our upcoming roadmap, how vorlon.JS was made, and how you can contribute to the project too.
Our vorlon.JS roadmap
It’s been a week since we announced it and we’re already getting some great input in how to make it better. Here are our vorlon.JS plug-in priorities over the coming months:
- AngularJS– We know Angular is quite popular for building dynamic web apps. Both vorlon and Angular 2 are built on TypeScript so it’s a natural next step for our team.
- Web Audio API – It’s a powerful, high-level API for processing audio. But synthesizing and mixing are complex to debug across so device and browsers alike so we think developers building game or music web apps will particularly find vorlon.JS as a useful tool.
- Hosted vorlon.JS dashboard– Currently the dashboard can be accessed in your dev environment through localhost.
We can help save developers more time by making vorlon.JS accessible on any device through Azure.
Please share with us what you’d like to see in the next version on Twitter @MSEdgeDev!
Building vorlon.JS for extensibility
From the very beginning, we wanted to be sure that vorlon.JS remains as mobile-first and platform-agnostic as possible. So we decided to use open source tech that worked across the broader number of environments.
Our dev environment was Visual Studio Community, which you can get for free now or use something like Visual Studio Code on your Linux, Mac, or Windows device. We used the node.JS tools for Visual Studio and Azure for the back-end. Our front-end was JavaScript and TypeScript. If you’re not familiar with TypeScript, you can learn why we’ve built JS libraries with it here. But you don’t have to know it to use vorlon.JS or contribute.
Here’s a global schema of how it works:
Here are the parts with built with:
- A nodeJS server is hosting a dashboard page (served using express) and a service
- The service is using socketIO to establish a direct connection with both the dashboard and the various devices
- Devices have to reference a simple vorlon.js page served by the server. It contains all the plug-ins client code which interact with the client device and communicate with the dashboard through the server.
Every plug-in is split in two parts:
- The client side, used to capture information and to interact with the device
- The dashboard side, used to generate a command panel for the plugin inside the dashboard
For instance, the console plug-in works this way:
- The client side generates a hook on top of log(), console.warn() or console.error() . This hook is used to send the parameters of these functions to the dashboard. It can also receive orders from the dashboard side that it will evaluate
- The dashboard side gathers these parameters and display them on the dashboard
The result is simply a remote console:
Share with us what you’d like to see next
We want to make the Web “just work” for your users and ours. If you’d like to see a new feature or have feedback– on Microsoft Edge, on the new Microsoft Edge Dev site, or on open source projects like vorlon.JS, just reach out to @MSEdgeDev and let us know!
– David Catuhe, Principal Program Manager, Developer Experience