Meet Eclipse Orion: For the cloud, in the cloud

Get JavaScript development tool functionality within the browser


The Eclipse Orion project's objective was to create a browser-based, open source, tool-integration platform, one entirely focused on developing for the web, in the web:

  • Orion tools are written in JavaScript; they run in the browser. The Orion browser-based development IDE doesn't just run in a single browser tab — all the links work and can be shared, giving developers a true web experience for development tasks.
  • Orion components are individually consumable by other projects (for example, Firefox Scratchpad and Scripted Editor at GitHub). Put together, all the components of Orion can be viewed at the public-facing OrionHub site where you can create an account and try Orion out.

The function and impact of Orion

In March 2013, eWeek magazine's Jeff Cogswell explored Eclipse Orion:

Eclipse Orion is an online integrated development environment that was created with the goal of providing similar functionality to the Eclipse desktop IDE, except it runs inside the browser.

  • Orion consists of a server that is written in Java™, which you connect to through the browsers.
  • The browser app consists of a large amount of JavaScript code, including several open-source libraries, to provide for a nice IDE experience.
  • The text editor lets you edit any text file, and it includes syntax highlighting for several languages such as JavaScript, Cascading Style Sheets (CSS), and HTML.
  • The IDE lets you manage folders, create and edit files, create new projects and even work with Git.
  • You can build projects from scratch or use any of the pre-supplied starter templates.
  • The editor is also fully extensible, including a full REST-based interface, whereby you can create extensions that include both server-side Java code and client-side JavaScript code.
  • Extensions are easy to add right from within the IDE and through various extension pages on the Web.

He then reviews his interaction with Orion, the "online version of Eclipse," and highlights his favorite features, including:

  • The editor's code-search and text-search capability.
  • The editor use of JSLint to provide the function hierarchy and to find the errors and warnings.
  • The ability to create and import projects in a few different ways.
  • That it's built with extensibility in mind; the back end is built to be both extensible and loosely coupled so you can scale it down to a subset of components.

The people behind Orion

author photoKen Walker is the co-lead and a committer on the Eclipse Orion project. He has worked on the Orion team since fall of 2011 and, as well as being a developer, loves to present about the technology and concepts behind Orion.

On June 18, 2013, Ken Walker discussed the Orion IDE and its design goal, its difference from the main Eclipse projects and which technologies you can pull into it, with JAX Editor Chris Mayer at JAXConf 2013.

Ken emphasizes the difference between Eclipse and Orion ("Eclipse is a desktop IDE ... Orion is for the cloud") and explains that for cloud adaptation, the IDE is JavaScript at the browser, which connects to a Java- or node.js-server backend.

At the MLOC.JS international JavaScript conference in April 2013, he spoke about the Orion IDE, explaining two camps of thinking on web development: native and non-native.

author photoSimon Kaegi is the other co-lead and a committer on the Eclipse Orion project. He is the technical lead for the Orion architecture and implementation and represents IBM for evolving the JavaScript Language (ECMA) and Browser API (W3C). He is a member of the Eclipse core team and in the past been involved with Equinox (server-side, p2, and compendium), e4 (JavaScript modularity and debug), and JSDT.

The technical basics of Orion

Ken Walker details the fundamentals of the Orion project in the June 2013 issue of the Eclipse Newsletter. He addresses general developer confusion about what Orion is trying to accomplish and how it is "technically" different from a standard Eclipse IDE:

Orion is a set of components that together provide the server and client side code that make up an extensible browser-based development platform. The components differ from many other Eclipse projects primarily because they're written in JavaScript, CSS, HTML5 and target modern browsers such as Firefox, Chrome, Safari and IE10. This is the initial target for Orion, web developers.

He goes on to explain that current web development tools aren't as complete as the tools the Java development team provides for Java developers. Most use a standalone editors or command-line tools for day-to-day development tasks. Orion provides the language capabilities of Java and a tight integration with cloud services that make it easier to develop and deploy cloud/web applications and services.

The article describes the major Orion components:

  • The Orion server: The Java server-side services are exposed via REST-oriented HTTP APIs. The APIs provide such services as file system, search, Git support, and preferences. Because the client simply requires these services to be available on the server to operate, the choice of server can be flexible; the Orion team recently wrote a new server atop node.js and a community member wrote one atop Go.
  • The Orion client: Where the major amount of development work happens, an Orion browser "page" might seem a little barren at first look because it is task- and resource-focused and can easily support exploring and leveraging cross-site workflows; these pages are designed without building everything you might be able to do in the same browser tab and this is what sets Orion apart from a traditional IDE experience. Orion behaves like a web app. You can use the forward and back features of the browser, bookmark the page you're on, and open up new pages in new tabs to build more functions.
  • The Orion plugin architecture: Orion provides a number of extension point service types that plug-ins can contribute to in order to customize the client and add functionality, including adding more commands to editor toolbar or to the navigator view; adding content assist for new file types; and adding syntax highlighting rules. Developers write plug-ins as an HTML file containing some JavaScript that knows how to connect to the Orion client.

Orion is designed to be extensible. The pages contribute to and consume from a JavaScript implementation of OSGi Services API; the plug-ins, written in JavaScript, CSS, and HTML follow the Lifecycle and Bundle State semantics used in the standard OSGi specification.

Orion at work

To wrap up this roundup of Orion resources, this section provides several presentations, videos, and blogs that show you various ways to use Orion.

New in release 4.0

Orion project committer John Arthorne details some of the new features of the latest Orion 4.0 M2 release in this blog, including:

  • Embedded Markdown Renderer for README.MD files
  • Editor features like bracket completion, smart indent and block comment completion
  • Customized local editor settings dropdown
  • Content assist in JavaScript for Node.js modules
  • Save files to the server as diffs vs entire file
  • Git Blame annotations in the file viewer
  • Git Revert to undo a specific commit in the Git Log
  • Initial Support for Orion Projects with expanded capability coming

Orion on node.js

Ken Walker contributes a slide presentation on node.js and how Orion works on it, including how to tie node.js to Orion (by tying the Java REST APIs to the appropriate Orion plug-in), the dependencies necessary to make the combination work, and how file search works in this environment.

He also provides a video that demonstrates how to hack node.js on a Raspberry Pi using Orion, demonstrating just how much easier Orion makes it to perform many of the development tasks.

Embed Orion compare into your web page

Project committer Libing Wang demos how to embed a compare widget into your web page (remember, the latest version of Orion supports a standalone compare build). The widget — a pure, client-side JavaScript that can be consumed anywhere in the client code — can be added into any DOM element in your page without accessing an Orion server.

Embedding is relatively painless because no dependencies exist on the server side. You can launch the demo or see the source code.

Embed Orion editor into your web page

Project committer Bogdan Gheorghe blogs on how to use the Orion Editor in your blog, including whether to embed the code in the header (if you're going to be including lots of code in your blog) or running the code inline (for less code). WordPress and Blogger are used as examples.

Editing COBOL in the browser

Micro Focus's Chris Whitty demonstrates how to use Orion to edit COBOL. He details the project from Summer 2013 in which Micro Focus had a team of interns work with them to create a COBOL extension for Orion. There are a few flavors, including a full-hosted Orion instance (demo) that supports things like syntax checking and formatting. They've also reused the editor in a couple of other contexts such as an online code samples browser.

The future of Orion

The future of Orion revolves around your interest in the IDE and desire to learn more about how to use it and develop with it in projects you consider appropriate. With that in mind, here are a few final resources to help you start exploring Orion for web and cloud development.

Downloadable resources


Sign in or register to add and subscribe to comments.

Zone=Cloud computing, Open source
ArticleTitle=Meet Eclipse Orion: For the cloud, in the cloud