Orion’s new Markdown editor

Markdown has emerged as a popular authoring format for on-line documentation. The recently released Orion 6.0 includes a new split-pane Markdown editor that previews your generated HTML document as you type. You can try it out now, along with the rest of Orion 6.0, on OrionHub.

Initial editing of a .md file: Features typical Orion editor responsiveness, syntax styling and annotations. The preview pane is auto-scrolled to keep it in sync with the source editor, and its highlighted region reflects the caret position in the editor.
mdEditor_initial

Some editor options you may wish to change (note: to add Word Wrap to this menu go to Settings > Editor and select the little circle beside the Word Wrap option)
mdEditor_options

Vertical split orientation: The preview pane is still auto-scrolled to keep it in sync with the source editor.
mdEditor_vertical

gfm extensions: The editor handles extended markdown syntax supported by the marked library, which includes Git Flavored Markdown. The following screenshot shows a gfm table, fenced code block and strikeout text.
mdEditor_gfm

What’s next?

The Markdown editor will continue to improve during the Orion 7.0 timeframe. We have some initial enhancement ideas in mind, including content assist, warning annotations, and various usability tweaks. We’d also really like to hear your enhancement requests and bug reports, to ensure that it’s the best markdown editor out there. Thanks in advance!

Posted in New & Noteworthy | Leave a comment

Orion and ESLint 0.6.2

In 7.0 we updated the version of ESLint used in Orion to 0.6.2 which has many improvements over the last version we were using (0.4.2).

There is a catch though.

Since version 0.4.2, ESLint has dropped support for the jslint / jshint directive used in-source to describe your environment.

For example: /*jslint amd:true*/

The new way to do this is to use the eslint-env directive.

For example: /*eslint-env amd, browser*/

Configuring ESLint has the complete rundown on setting up your desired environment(s), but the basics are:

  • Use only the name of the environment to indicate it should be used, i.e. there is no amd:true or amd:false, amd alone means amd:true, leaving it out means amd:false
  • If using more than one environment, they are defined in a comma-separated list like: /*eslint-env amd, browser, mocha, node*/

Just in case you forget all about these directives Orion has a linting rule to remind you to update them….

Unsupported directive warning

Unsupported directive warning

 

Posted in Integrations, New & Noteworthy, Tips & Tricks | Comments Off

Article on Orion and BeagleBone Black development

There’s a great article by Benjamin Cabé over at Element14 about utilizing Orion to do development on a BeagleBone Black leveraging Node.js, MQTT and all sorts of other Internet of Things technology.

Eclipse Orion, Arduino and BeagleBone Black – Prototyping your Internet of Things

Posted in Integrations, Tips & Tricks | 1 Comment

Orion 6.0 – Language Tooling Enhancements

The upcoming Orion 6.0 release will bring many improvements to your online IDE experience.  Many enhancements and improvements have been added to the language tooling support in Orion, especially for Javascript development.  Here is a list of the more notable changes prepared for 6.0!

Additional syntax highlighting

Orion now provides syntax highlighting for .c .h. cpp and Arduino (.pde/.ino) files.

image20

Generating JSDoc

A new command has been added to help with creating JSDoc for function declarations and function expressions. It is found in the Tools menu for JavaScript source and is called Generate Element Comment with the key binding Alt+Shift+J (Win / *nix) and Ctrl+Shift+J on Mac OS.

The command:
image13

… will insert JSDoc like this on function expressions:
image07

… and will insert this JSDoc on function declarations:
image06

Javascript tooling inside HTML script blocks

Much of the Orion Javascript Tooling support is now available while working in the HTML editor.  Linting support will now run on Javascript code inside of <script> tags.  Show occurrences will function when variables and functions are selected inside your scripts.

image22

Javascript validation overhaul

The validation/linting support for Javascript in Orion, built on ESLint, has been given an overhaul with new rules, an updated engine and more user flexibility.  The validator will scan your Javascript files (as well as HTML <script> tags) and add errors or warnings to the margin of the editor.  Hovering provides a more detailed explanation of the issue.

image14

Users can now customize the warnings they see on the new validation settings page, Settings > Validation.  Each validation rule can be set to error, warning or ignore.

A large number of rules have been added, warning you of discouraged code styles, missing documentation, unused variables, unreachable code and many other common programming problems.  All of the rules have variable severity which you can set on the Validation settings page.

New code validation rules

There have been a lot of new rules added to ESLint in Orion in 6.0, some of the more notable ones are:

Unused params:
image05

Duplicate object keys:
image11

Unreachable code:
image18

Scoped code templates

When activating content assist (Ctrl-Space) the Orion Javascript Tooling Support provides many code templates for common code patterns and common library usage.  Previously the entire template list would be made available to the content assist proposal list, only being filtering by the characters typed.  Now, the location you are in is used to scope the proposals so that only applicable code patterns are provided.

Unscoped proposals:
image00

Scoped proposals:
image04

Show occurrences of object properties

Selecting a named object property with Show Occurrences turned on will highlight the property definition as well as all references to it within the object expression (via this object).

image15

The outliner has also been improved to list the properties of an object.

image09

ESLint updated

Orion is now using the the latest version of ESLint – 0.4.2

Esprima updated

The Esprima parsing library that underpins much of the Javascript tooling support in Orion has been updated to 1.1.0-dev.

Parser updates

The Orion customized version of the Esprima parser has seen many updates in 6.0, from performance improvements in  the token stream and ESLint integration to improved parser errors that direct users how to correct their code problems.

There have also been a few updates to the parser’s tolerance while parsing code with errors in it. Additional recovery support has been added for the following scenarios:

Missing tokens in call expressions:
image02
Missing tokens in object expressions:
image19
Missing declarations in object properties:
image03
Missing tokens in if statements:
image08
Missing tokens in while statements:
image17
Missing tokens in for statements:
image10

Experimental Web Worker Support

The JavaScript Tools engine can now be hosted in a web worker, off the main browser UI thread. The worker delivers increased responsiveness when editing very large files, as expensive operations like parsing and validation do not block the UI. The worker is turned off by default in the Orion 6.0 release, but users can enable it by doing the following:

  1. Go to Settings > Plugins.
  2. Scroll down to “Orion JavaScript Tool Support” and click the Plugin link.
  3. Click the “Use a web worker” checkbox:
    image16
  4. Reload the Orion editor. You won’t see any visual changes, but under the hood, the JS tooling will be super fast.
Posted in New & Noteworthy | Comments Off

Orion 6.0 – Continuous Delivery

It has been a couple of months since any form of new Orion milestone has been announced, so you may be wondering just what the heck is going on with the Orion team! Rest assured there has been a ton of work going on behind the scenes, and OrionHub has even been silently upgraded with new features a few times since the 5.0 release. The Orion 6.0 release will be out at the end of June 2014, and a recent stable build is now available for download.

What’s been happening is that the Orion committers are moving towards a continuous delivery development model. Quick, can you tell me what version of Facebook you are using? When was the last time you upgraded to the latest version of Google Docs? Web applications (and to a lesser extend mobile applications) don’t lend themselves to sudden, drastic feature releases.

Rather than produce a stable build every six weeks with a big bang of new features, we are aiming for a continuous stream of new features, each released on its own schedule when ready for consumption. This is a delivery style that is much better suited for web applications, rather than the milestone process that we inherited by osmosis from the Eclipse release train. The release train rhythm works very well for a project that releases once a year, but quickly lost any meaning to us once we started down a path of continuous delivery.

The Orion team is still working out the best development practices for this sort of delivery model. For now, we are using a form of the Feature Branch pattern, so you can get a sneak peak at our upcoming new features by taking a look at our Git repository:

6.0-branch-list

Each major new feature gets a branch. Once a week (or maybe more), we cut a stable build branch. We use that branch for final integration testing and fixes, declare the stable build, and then start the process over again. We still have a lot more details to work out before we arrive at a process and infrastructure that we are happy with. In particular we need to improve our automated integration testing so that developers can test their topic branches and deliver to master with confidence that they didn’t introduce integration problems. We also need to improve our server architecture to support clustering and instant fail-over, so that continuous delivery doesn’t turn into continuous downtime for those delivering Orion-based web applications.

There is of course one very valuable by-product of the milestone process that we lost along the way. The milestone ritual reminded us to gather up and announce all the big new features we had introduced over the past six weeks. Over the last couple of months we have completely failed to let the community know about all the cool things going on in Orion, which is something we need to fix and integrate into our continuous delivery practices. Expect to see more frequent (but smaller) posts about new Orion features over the coming months. If you have any continuous delivery wisdom to share that can help us, please let us know either here or on the orion-dev mailing list.

Posted in Announcements, New & Noteworthy | 1 Comment

Ken’s Top 5 JavaScript Sessions at EclipseCon 2014

If you’re interested in JavaScript and/or Node.js development this years EclipseCon North America has some great sessions in store for you! It starts off with a Tutorial Monday with the Orion team titled END TO END WEBAPP DEVELOPMENT WITH ORION. We’re going to run through building an application from scratch leveraging Bootstrap and TableTop.js.

You can click on this link for the JavaScript sessions at EclipseCon but if I have to pick a top 5 I’ll go with:

NEXT-GENERATION JAVASCRIPT LANGUAGE TOOLING by Ariya Hidayat
Ariya is well respected in the JavaScript community for his libraries like Esprima and his conference presentations on performance and optimization.

JAVASCRIPT: DON’T BELIEVE THE TYPE! with Manu Sridharan and Simon Kaegi
Manu has worked on language tooling in IBM Research and is now at Samsung carrying on his passion. Simon has been digging deep into core JavaScript design and development for many years (has the scars to prove it).

NODE.JS ON POWERPC – A STORY ABOUT PORTING NODE.JS & V8 by Andrew Low
Andrew is a veteran in the Virtual Machinist space. He lead the IBM J9 Virtual Machine team for many years and is applying that knowledge to porting V8 to IBM Hardware.

WIRING THE INTERNET OF THINGS WITH NODE-RED by David Conway-Jones
If you know nothing about NodeRED you should definitely
attend this session. Imagine wiring the Internet-of-Things with… well visual wiring. A visually compelling palette of connections and ease of use make NodeRED an amazing tool (also, the JS editor is incredible)

MODULAR JAVASCRIPT by Andrew Eisenberg
Andrew is well known in the Eclipse community and has contributed to Orion as part of his work at VMWare. His talk about module loading with respect to large applications in JavaScript should be a great talk!

Ok, kind of a 6th… While not a talk, IBM is hosting a WEB IDE BOF on Weds night with refreshments. Come demo what you’ve been working on or chat about what you like/dislike about the concept or current implementations of Web IDEs.

Hope to bump into you at EclipseCon and if you haven’t registered yet… there’s still 7 days!

Posted in General | 2 Comments

Orion 5.0 – New and Noteworthy

Orion 5.0 is now available! Check it out now on OrionHub, or download your own server. An updated JavaScript implementation of the Orion server is also available from npmjs.org. The following are some of the notable new features and changes in Orion 5.0. Make sure you also check out the 5.0 M1 news for other features added earlier in the 5.0 release.

New Orion look and feel

New Orion users have consistently reported that they found our cluster of iconic Actions and Navigation buttons confusing. Developers often have trouble finding the commands they are familiar with in their old desktop-based tools. So, finally we are caving to user demand and incorporating some familiar navigation elements such as a menu bar and context menus. You can find more details on the various UI changes further down in this post. User feedback has been a tremendously important part of these changes, and we strongly encourage all users to continue providing this feedback as the design evolves. Please don’t hesitate to raise bugs, report feedback on the orion mailing list, or grab us in person at conferences such as EclipseCon.

The old Navigation menu has been replaced by a narrow band on the left hand side with links to all of Orion’s different pages. All links are contextual and will navigate you to the closest corresponding page related to the artifact you are currently viewing. For example when editing a file, navigating to Git Status will show Git status for the repository containing the file you were just editing. Icons in the navigation bar match the page icon in your browser tab, to help you keep things straight. You can collapse the navigation bar at any time by clicking the toggle button in the top left hand corner of each page.

New navigation bar

The Actions menu, and some navigation elements, have been replaced with a more traditional menu bar. The key binding shortcuts have been added to the menu label for all commands that have them. The options to toggle between navigation and outline panels have been moved to the View menu.

Menu bar

Context menu in Navigation pane

Context menus have been added on files and folders in the Navigation pane. In these menus you will find the most common file operations such as copy, paste, rename, compare, etc. You will also find commands for navigating to other pages related to that file or folder.

Context menus

Content assist enhancements

The Orion content assist infrastructure has had a major overhaul. Orion content assist is now:

  • Faster. Computing, loading, and rendering of content assist proposals has been made much snappier.
  • More stylish. The proposals have been styled, so that the value to be inserted is highlighted, and peripheral information such as type information and descriptions are less distinct. Also, template proposals have been moved to a different section with a colored background to separate them from completions inferred from the current context. Highlighting of the current proposal has been improved, and scrollbars now only show when needed.
  • Easier to use. Content assist will now trigger automatically in the places where you most expect it to, such as after typing ‘.’ in JavaScript or opening a tag in HTML. Also, if you invoke content assist and there is only one possible match, it will be inserted automatically. Finally, the Home/End keys can now be used to quickly navigate around the proposal list.

To give you a feel for the overall changes, here is a comparison of content assist in Orion 5.0, versus the previous release:

Improved content assist

Content assist for popular Node.js libraries

Orion has added indexes to support content assist for some of the most popular Node.js libraries. On the database front there is now content assist for Redis, MySQL, Postgres, and MongoDB. Content assist is now also available for the AMQP messaging library, and the Express.js framework. Templates for popular code snippets with these various libraries are also available. Orion plugins can now contribute indexes for other libraries using the orion.core.typedef service.

Fully configurable JavaScript syntax validation

Orion is now almost fully converted over to the fantastic eslint library for JavaScript syntax validation. The only exception is script tags in HTML files, which are still validated with jslint for now. A huge advantage of eslint is its configurability. As a result, we now expose a large selection of lint configuration options on the Validation settings page.

50m2-validation-settings

Syntax validation of JSON

Orion now provides syntax validation for JSON files.

JSON syntax validation

Improved Gerrit support

Orion is steadily making progress towards support for Gerrit workflows. In the current release the following features have been added to make it easier to use Orion with Gerrit:

Support to attach a Gerrit change-id to your commits:

Gerrit change id in commit dialog

Git push without tags. When pushing a change to Gerrit for review you don’t want to push tags as well. The Push button now has a drop-down menu on the right that provides a Push Branch option to push commits only.

Push branch without tags

Push for review. When a contributor wants to submit a proposed patch for review in Gerrit, they push to a special branch with the format refs/for/[branchName]. Previously Orion always assumed pushes occurred to heads branches. Now, when you select Push followed by More, you can enter a branch name such as refs/for/master to push a change for review that is intended for the master branch.

Git push to Gerrit for review

New pluggable syntax highlighting system

The Orion editor has adopted a new syntax highlighting framework, designed specifically for Orion. Notable improvements include better performance, and built in support for more languages (currently JavaScript, JSON, XML, CSS, HTML, Java, PHP, Python, Ruby, and YAML). Syntax highlighting for additional languages can be provided by plugins. In addition, the syntax highlighting framework can be used with the standalone Orion editor, which is handy if you want a smaller package for embedding in your web application.

For more details on the new syntax highlighting framework, checkout this recent blog post on Planet Orion.

Filter by folder when searching for files

When using the Orion Find File command, you can now filter the results list based on keywords in the directory path by specifying a second search term in the find box. This is very handy when there are a large number of duplicates of the same file name and you want to quickly narrow down to a particular match.

50m2-find-file-filter

Edit while comparing files

When you select two files and pick Compare with each other from the context menu, the resulting compare page now allows you to edit both files directly within the compare editor. Unsaved changes are indicated by an asterisk next to the name, and Save buttons appear above each editor. Saving changes on either side will cause the comparisons to be updated immediately.

50m2-edit-compare

Last but not least, deploy to Cloud Foundry!

Within the Orion client we’ve enabled being able to push an application directly from Orion to any compatible PaaS provider leveraging the Cloud Foundry APIs. If you already have an OrionHub account, you can click here to clone a simple Cloud Foundry example into a new project. Once you’ve cloned the project, you can see in the readme that you need to setup the deployment information on the Orion Cloud Settings Page. See the readme for a couple of example destinations. Once you’ve done that, you can simply press the Deploy button to push the app. You’ll need to edit your credentials for the PaaS provider and then the app is packaged and delivered just like the terminal cf push command. In the following diagram you can see the Deploy button and the new section regarding deployments including status of the running app and the URL for the resulting App.

Cloud Foundry from Orion

CloudFoundry from Orion

Not all the commands and features in the v6 Cloud Foundry command line are supported but we’ll continually add capabilities throughout the Orion 6.0 timeline and into the future.

Posted in New & Noteworthy | 2 Comments

Orion 5.0: Syntax Styling Revisited

The orion.edit.highlighter service gives plug-ins a way of contributing syntax stylings for arbitrary languages. Prior to Orion 5.0 these stylings were defined as either TextMate grammars or CodeMirror modes. While both of these styling approaches are well-established and have their respective strengths, they each have shortcomings in the context of Orion:

  • The TextMate spec expects support for some regular expression functionality that is not supported by Javascript’s RegExp implementation. As a result, Orion claimed styling support for only a subset of TextMate functionality (and consequently a subset of TextMate grammars).
  • CodeMirror’s programmatic model proved to be inefficient and error-prone in Orion as a result of Orion’s service methods being run in isolation.

For the Orion 5.0 release a new syntax styling service has been defined (still with id orion.edit.highlighter) which is its official story going forward. The TextMate- and CodeMirror-based styling implementations are considered to be unsupported, though are still in the Orion release to preserve backwards-compatibility.

The new styling service maintains a strong resemblance to TextMate because its declarative approach is well-suited to Orion’s isolation of services. Additionally, TextMate’s grammar syntax has proven to serve its purpose well over time. So anyone with TextMate grammar-writing experience should find writing grammars for Orion to be very familiar.
The new shape of this service is described in orion.edit.highlighter, along with an example that shows Orion’s grammar for styling of .json files. The example highlights how small a functional language grammar can be made by including styling patterns defined in other grammars. Orion provides a generic grammar containing a set of common patterns that other language grammars can inherited as needed.

Inclusion of patterns from other grammars is also useful for handling embedded content. For example, Orion’s HTML-styling grammar includes the following rule to style CSS within <script> tags:

{
    begin: "(?i)(<style)([^>]*)(>)",
    end: "(?i)(</style>)",
    captures: {
        1: {name: "entity.name.tag.html"},
        3: {name: "entity.name.tag.html"}
    },
    contentName: "source.css.embedded.html",
    patterns: [
        {
            include: "orion.css" // <-- this is it
        }
    ]
}

A consequence of (and test cases for) this new styling service implementation is that Orion now provides syntax styling for additional languages. The updated set of supported content types are:

  • application/javascript
  • application/json
  • application/schema+json
  • application/x-ejs
  • application/xml
  • text/css
  • text/html
  • text/x-java-source
  • text/x-php
  • text/x-python
  • text/x-ruby
  • text/x-yaml

Finally, embedders of Orion’s stand-alone editor can also get automatic styling of these content types by providing a contentType value when invoking the editor. For example:

require(["orion/editor/edit"], function(edit) {
    edit({
        contentType: "text/x-ruby"
    });
});
Posted in Tips & Tricks | 3 Comments

Orion 5.0 M1 – New and Noteworthy

Just in time for the holidays, a new Orion milestone is available! This milestone has crammed in a whole lot of developer tooling improvements, and enhancements to several aspects of the user interface. There is also a ton of work going on behind the scenes on bigger features that we’ll hopefully be able to share in the next milestone. You can take the latest build for a spin on OrionHub, or download it.

Mark occurrences

The Orion editor will now highlight occurrences of variables in JavaScript files. Simply move the cursor over a variable to highlight all occurrences in the file. Occurrences are shown both highlighted in the text, and in the overview ruler which shows you all occurrences in the file at a glance. This is implemented using the orion.edit.occurrences service, which allows plug-ins to provide occurrence computation for arbitrary content types. This feature can be turned on or off from the editor settings page.
Mark occurrences

New JavaScript outline

Orion has added a brand new JavaScript outline view! This new outline shows all functions and closures in a hierarchical format matching your source. The outline is built using the esprima parser and estraverse AST traversal library to get zippy performance and high accuracy. View the outline by selecting Source Outline from the drop-down menu at the top of the navigation pane on the left hand side of the editor.
JavaScript outline pane

Outline filtering

The outline pane now includes a filter box to help you quickly find the function you are looking for. Simply type in the filter box to filter the contents of the outline.
50m1-outline-filter

New icons using an icon font

Orion now has a completely new set of icons, implemented using an icon font. Implementing icons using a font improves page load performance because images don’t need to be fetched individually. Because they are vector-based, they also scale up and down very well. The following image shows our old icons alongside the icon font replacements on a high resolution iPad display:
50m1-iconfont

New syntax highlighting framework

This milestone includes a branch new syntax highlighting framework designed to suit the Orion plugin architecture. This framework uses declarative rules to match patterns in a source file to styles. The Orion plugin provides simple rules, and the calculations all happen in the main editor page. Stay tuned for more documentation on how to plug-in your own highlighter using this new framework. The Orion editor already uses this new system to provide highlighting of JavaScript, Java, CSS, and HTML source files.

New JavaScript validation

Orion has switched to a brand new syntax validation service based on eslint (previously we used JSLint). This new validator is currently roughly comparable to our old one, and provides much greater flexibility that we plan to expose to users in the future.

Accessibility deep dive

Many Orion committers attended a special master class with web accessibility guru Derek Featherstone this month. We did a deep dive on various parts of the Orion UI and how to make them more accessible to keyboards, screen readers, dictation software, etc. So far the net result has been a long list of new bug reports and design ideas, but we are certain this will ripple through into a more accessible Orion user interface over the coming months.

Compare images

The Orion compare editor now allows you to compare common image types. You can now see outgoing changes to your images in the Git staging page, and compare pairs of images in the standalone compare page.
50m1-compare-images

Drag to move files in navigation pane

You can now drag files and folders in the editor navigation pane to move them to another folder.
50m1-drag-move

Show in Navigator

When browsing around in the editor navigation pane it can be easy to lose track of the file you are editing. You can now click on the filename in the breadcrumb at the top of the editor to immediately reveal and select the currently edited file in the Navigator.
50m1-show-nav

Completion support in editor find bar

The find and replace bar in the editor now provides a drop-down of suggested completions for your search term based on your search history. You can delete entries from the history directly in the down-down if you don’t want to see that suggestion again.
50m1-find-completion

Open file with different editor

A drop-down menu has been added to the editor to allow you to view the same file in a different editor. For example, when editing a markdown file, you can use this to toggle between the Orion text editor and a rendered markdown view.
50m1-switch-editor

Find user command for administrators

A new command is available to administrators in the user profile list to quickly jump to the profile for a particular user. If you manage an Orion install with thousands of users you will be thanking us for this one.
50m1-find-user

That’s all for this milestone!

Posted in New & Noteworthy | Comments Off

Orion 4.0 Released

Another 4 month push and Orion R4.0 is available for Download, for use at OrionHub or if you’re running Node.js you can npm install orion and then npm start orion (There’s a video of installing the Node.js version of Orion on a Raspberry Pi if you like to follow along).

The Orion team has been working across the server, core code and client side UI. The most noticeable change is the removal of the Navigator Page in favour of the NOL (Nav on left) as we call it. If you land on a folder with a readme.md then this is now rendered on the right, like one would expect. Further UI work was done on an alignment of icons, selection policies, and colour themes through the various Orion pages.

R40EditorScreenShot

The concept of a Project has been introduced as well. Currently, there is a small amount of meta-data stored in a project.json file however this will be where additional Project features will be placed. There is a separate Project view and an extensible area on the project overview do describe project relationships or capabilities.

There’s a new Getting Started link on the Persona icon to describe a few common tasks.

GettingStarted

The underlying User model in the Java server implementation was changed to more easily support scalability. A users ‘workspace’ is now completely stand-alone to support sharing between Orion servers (Java, Node.js, others). The server config file needs to be altered to migrate to this new format.

You can see another long list of the changes in R4.0 in John Arthorne’s post Orion 4.0 M2 – New and Noteworthy

The project has picked up a lot of new contributors and a few new committers in this release. The Orion Client is easy to clone and start working on since it’s just self hosted development. We hope you can help us fix some of the bugs entered or add features you think are missing from an online IDE.

Onto another 4 month release cycle for R5.0!

Posted in Announcements | 4 Comments