Eclipse Orion Online IDE Provides Effective Tools for Web Development

By Jeff Cogswell |
Posted 2013-03-12

Eclipse Orion Online IDE Provides Effective Tools for Web Development

With so many tools moving to Web-based solutions, the Eclipse community has recognized the need for a browser-based version of their Eclipse integrated development environment. As such, they've been working on the Orion Online IDE, which includes many Eclipse-like features, but runs in the browser with the support of back-end server software. I spent some time with it, and here's what I found.

First, the editor is good. They've done a good job of including editor tools many programmers would probably find useful. For example, on the right side are little markers showing the locations of errors in the code.

These markers are positioned relative to the height of the window to give you a visual indicator of where in the document the errors are. You can click on a marker, and it will take you right to the error in the code. Hotkeys also work, such as Ctrl+S to save the current document you're working on, and of course, color syntax highlighting is there.

There's also a nice outlining feature. When you open a JavaScript file, the editor (which is itself written in JavaScript), displays an outline view of the file. On the left side, it will list the functions present in the file, and you can click on any function name to be taken there.

Behind the scenes, the editor uses JSLint to provide the function hierarchy and to find the errors and warnings. Remember, this editor is really a JavaScript application running inside your browser, and it includes various third-party libraries to provide functionality.

Code Search Is Built In

The editor also supports other languages such as HTML and Cascading Style Sheets (CSS) while similarly showing errors and hierarchies. Syntax highlighting is also available for Java, but no outlining is done. The "Getting Started Guide" in the documentation actually explains this. They hope to add more features for server-side languages, but they were using an early version of Orion to develop Orion itself and, as such, had to implement the features they needed first.

One feature I really liked was the text-search capability. I had loaded a JavaScript file that I wanted to edit. Out of sheer habit, I pressed Ctrl+F and immediately started typing. I was expecting to be in the usual browser search box, but in fact, Ctrl+F launched Orion's own code search box. I typed the word "target" (which was present in multiple places in the file) and I saw it highlighted in all places, just like in a nice desktop-based code editor. There's a drop-down with several options, such as Case Sensitive and even Regular Expression.

There were a couple things missing that I would have expected. For example, I wasn't able to edit multiple documents at once via tabs like you can in most text editors.

It also seemed to lack Ajax features in places I would have expected. When I opened a file, instead of using Ajax to refresh just the editor, the whole browser page refreshes with a different URL.

Eclipse Orion Online IDE Provides Effective Tools for Web Development

The benefit to that, however, is that you could bookmark the pages so they open up directly. Compare that with, for example, Cloud 9 IDE, where you have a single URL and the entire app operates within a single "page" in the browser. (I hesitate to use the word "page" these days, however, as it's an entire application, not just an HTML page.) But in the case of Cloud 9, you get multiple tabs and the app maintains its state so that if you close it, you can come back later and it will open the tabs up right where you left off.

However, there's actually a good reason for the URL switching when you open a new file in Orion. The whole system is built on the Representational State Transfer, or REST, architecture. So the URLs show exactly where you are and the underlying code makes heavy use of these URLs, which can be used to support system extensibility. I'll cover this shortly.

As for projects, you can create projects in a few different ways. One is to click the Sample HTML5 Site, which creates a starter project for you, including a .css file, a .js file and a .html file—but no server side code. You can also import a project in a couple of ways, including using SFTP to directly import from your local file system, or by cloning a GIT repository.

Orion Designed to Be Extensible

Like much of Eclipse itself, Orion is built with extensibility in mind. The entire back-end is built to be both extensible and loosely coupled so you can actually scale it down to a subset of components. That means you can choose to only use the components you need for your development environment. Right now, at the stage it's in, this doesn't seem totally necessary, but I would expect later on we're going to see many different builds of Orion that support different languages and platforms in the same way that the desktop version of Eclipse has many different editions.

For example, when you install the desktop version of Eclipse, you can choose from more than a dozen different configurations, such as one for C++ developers, one for Java EE developers and so on. I suspect that's the direction they're headed with Orion, as well. As such, the entire system is architected as a set of Web components and a set of back-end services. The services are published in a local registry so that the client side can know what features are available.

Also, like the desktop version, you're encouraged to extend the product. This is a smart move, as this extensibility is one reason Eclipse has been so successful over the years. For front-end extensions, there's a sample starter project in the list of types of projects you can create. This project starts you out with a nicely written skeleton JavaScript file that's 212 lines long and an HTML file that describes the plug-in. The initial sample itself is a demonstration of code that interacts with the code editor and converts text to uppercase.

Eclipse Orion Online IDE Provides Effective Tools for Web Development

There's even a page where optional plug-ins are published, which you can get to from a "Get Plug-ins" link at the top. That page lists the plug-ins and includes an "install" link for each. I was curious how it would go about installing the plug-in since we're dealing with software on our own server. So I looked closely at the URL for the install links.

Sure enough, it points to a local URL running inside Orion, again using the REST interface. Included in the URL parameters is a link to the actual plug-in. This presumably makes the REST request to the Orion installation by sending it the plug-in URL and allowing the plug-in to be downloaded and run.

Great Start but Room for Improvement

This seems like a bit of a security concern as it will allow Java code to be downloaded and run on your server. However, if you're installing plug-ins through this main Eclipse Foundation-approved server, I think it's pretty safe to assume they'll be legitimate plug-ins and not malware.

As such, I installed a plug-in called "HTML5 local filesystem." Clicking on the Install link takes you to a page within Orion featuring a text box labeled "Plug-in URL" that's filled in with the URL of the plug-in, and a "Submit" link. After clicking it, I saw a message at the top that says that the plug-in was indeed installed.

This approach to plug-ins was actually very similar to the way plug-ins work in the desktop Eclipse. There, you click a menu to add new software, and you can provide a URL. You can then install the software found at that URL by simply clicking a button. It's the same idea.

The plug-in architecture itself is a bit unusual, but it makes sense. The plug-ins are loaded by the browser through a hidden iframe. That iframe loads an HTML file for the plug-in, which includes JavaScript code and can load additional JavaScript files. The JavaScript code uses a plug-in API to communicate with the server and with the client side, including the editor. For communicating with the server, the JavaScript code uses the HTML5 messaging system.

All in all, this looks like a great start. It has been successfully tested in virtually all the modern browsers (Chrome, Firefox, Internet Explorer 10 and Safari 6.0.2). The server-side code is written in Java. So it will run on nearly any server that supports Java. The documents say they're also working on porting the server-side code to Node.js.

It's still lacking in some features such as what you find in products that are more mature, including the aforementioned Cloud 9. But it's moving along quickly, and in the future, I'm sure we'll see some great features come out of it—just like good old desktop Eclipse. For example, there is work under way to support full debugging.