Mozilla Launches Built-In HTML5 App Development Environment For Firefox

Starting today, Firefox users on the Nightly release channel can begin testing WebIDE, a development environment for HTML5 apps that is now built right into the browser.

If you have been following Firefox long enough, chances are you remember a somewhat similar project called Bespin. That, too, was an effort to build a code editor right into the browser. Those efforts didn’t quite pan out, however, and the project was later spun off and now forms the core of the Cloud9 IDE. Compared to WebIDE, Bespin’s ambitions were pretty limited, however.

With WebIDE, Mozilla’s principal developer evangelist Christian Heilmann told me last week, Mozilla hasn’t just built a code editor into the browser — though that’s a nice perk, too — but it has created a full toolchain for creating responsive apps for desktop and mobile devices. Unsurprisingly, there is a strong emphasis on Firefox OS, with a built-in simulator and tools for testing right on a device, but nothing would stop you from using this for building apps for any modern browser.

2014-06-22_1150

WebIDE ships with a sample app that gives developers a starting point for their own work. With this, it just takes a few clicks to get started on a new web app right in the browser. The sample app provides new users with all the code they need and every time they make a chance and reload the app, WebIDE will automatically validate and repackage the app.

Many of the most popular IDEs today, Heilmann argues, are not set up for writing web apps and it can take a lot of work to get them configured for this kind of task. That can often be a hurdle for beginners, but with WebIDE, everything you need to get started is already built right into the browser.

As Mozilla’s director of engineering for its developer tools David Camp also stressed when he joined my call with Heilmann, it’s important to note that while the code editor, which is based on CodeMirror in combination with the tern.js code analysis framework, is a central part of this effort, developers can also bypass this and continue to use any other editor they are familiar with.

2014-06-22_1152

Even with the editor turned off, developers can still make use of the service’s interface for managing runtimes and validation applications. There will be three ways to access these features: WebIDE can simply watch a director for changes, developers can use a soon-to-be-released command-line API and other IDE and code editor vendors can use these APIs to integrate Mozilla’s service right into their own app.

Looking ahead, Heilmann and Camp told me, the team is also working hard on integrating WebIDE with the Firefox Remote Debugging Protocol. The idea here is to allow developers to easily test the apps they are writing on their desktops right in a mobile browser, without the need for an emulator. Right now, this works for Firefox on the Desktop and Android, as well as for Firefox OS apps. The idea, however, is to create a protocol adapter that will also support Chrome for Android and Safari on iOS. As far as I am aware, this hasn’t been done before, but Camp tells me the team is pretty optimistic that it can get this working over the course of the next few months and that the team has already figured out many of the more complex issues around this.

For now, this feature will still hide between a switch, but if you want to give it a try, just install Firefox Nightly, head to about:config and set devtools.webide.enabled to ‘true.’ Mozilla expects to enable it by default in a few weeks and that it will then make its way through Firefox’s regular release channels over the course of the next few months.