Meet Eclipse Orion: For the cloud, in the cloud

Get JavaScript development tool functionality within the browser

The Eclipse Orion project's objective is 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, and its components are individually consumable. This article introduces you to Orion, and provides resources and commentary to help familiarize you with the tools.

developerWorks Cloud team, developerWorks, IBM

The developerWorks team works hard to gather and create content that helps you learn more about cloud computing and the online distributed environment.



01 November 2013

Also available in Chinese Russian Japanese

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.

JazzHub: Powered by Eclipse Orion

See Orion in action at JazzHub, a collaborative, cloud-based development environment. Register now and get free private projects through 2014.

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.

Martin Lippert: Embracing Eclipse Orion

JAX Editor Chris Mayer catches a few minutes with Eclipse Orion project lead Ken Walker to discuss the browser IDE and its design goal, its difference from the main Eclipse projects and which technologies you can pull into it.
Video, 30:51 | Transcript

Martin Lippert is an engineer at VMware, working on the Eclipse-based developer tooling for Spring. At the ECE2012 conference in November 2012, Lippert presented how his team reused Orion to build their own browser-based developer tooling, showcasing an editor-centric and browser-based approach for JavaScript developers that is built on top of Eclipse Orion.


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.

Discussing Eclipse Orion with Ken Walker

Ken Walker shows how he re-used Orion to build his own browser-based developer tooling, show-casing an editor-centric and browser-based approach for JavaScript developers that is build on top of Eclipse Orion.
Video, 6:50 | Transcript

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.

Installing the Node.js version of Orion on a Raspberry Pi, 5:11
Video: Installing the Node.js version of Orion on
                        a Raspberry Pi, 5:11
Transcript

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.

Resources

Learn

Discuss

  • Get involved in the developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Cloud computing on developerWorks


  • Bluemix Developers Community

    Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.

  • Cloud digest

    Complete cloud software, infrastructure, and platform knowledge.

  • DevOps Services

    Software development in the cloud. Register today to create a project.

  • Try SoftLayer Cloud

    Deploy public cloud instances in as few as 5 minutes. Try the SoftLayer public cloud instance for one month.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Cloud computing, Open source
ArticleID=947003
ArticleTitle=Meet Eclipse Orion: For the cloud, in the cloud
publish-date=11012013