Language Tooling in 10.0 – Moving at the furious pace of web development

The 10.0 release of Orion is now out in the wild.  A ton of work has gone into language tools since the last official release, but I hope you haven’t been waiting over 4 months to check it out.  This is a DevOps world, with fixes and improvements being delivered continuously.  Sign up for OrionHub or IBM Bluemix DevOps Services and use the latest and greatest in language tooling on the web.

Meshing HTML and JavaScript tooling

In the last release, our focus was improving our JavaScript tooling to be best in class, matching or exceeding what is being done on a desktop IDE. Orion provides a strong set of tools that could go beyond a single script file and understand your Node.js or RequireJS dependency graph.  For 10.0 we have extended this cross-file support for HTML pages.

If you add <script> blocks to your HTML you will have access to all of our excellent JS tooling.  Content assist, syntax highlighting, navigation hovers, ESDoc support, occurrences, etc.  This tooling works in embedded scripts as well as onLoad, onClick and other DOM event attributes.



We also enabled our CSS tooling for embedded CSS blocks.


The biggest change here is having tooling that is aware of your other scripts.  If you have a script block that points to an separate JS file, we will lookup the contents of that script.  You can navigate in-between files using tooltip hovers as well as Open Declaration and Open Implementation (more on this later).  Content assist proposals will list variables and functions you declared in other files, neatly organized by their source.



What if you have a project setup where you reference multiple files without a definitive <script src=…> link?  While not out for the 10.0 release, going forward we will allow you to customize your project setup.  Give you control over what scripts and pages should be connected to the tooling.  Currently this will be implemented using .tern-project files which can specify files to load or avoid in the tooling.

There are massive improvements to the tooling for writing HTML too.  The content assist got a complete rewrite and now the proposals you see are limited to what is valid in HTML 5.  There are proposals for attributes as well as element tags.  The tooltips for these proposals include descriptions of their purpose, annotations if they have been deprecated in the ongoing HTML 5 spec, and links for more information.  Moving forward we are investigating htmllint as a validator and adding accessibility tooling as well.



Innovative JS

Many of the Orion developers have a background in Java development using Eclipse.  Developers in Eclipse have many features at their fingertips for navigation and refactoring.  These operations are key to speeding up development, but the nature of JavaScript makes it difficult to provide them.

Open Declaration (F3) and Open Implementation (Ctrl-F3) are now available in the Orion editor.  Open Declaration will jump you to where an expression was defined, anywhere in the dependency graph.  No need to explore the file system or do a global text search to figure out who defines the function you are using.  Open Implementation operates similarly but goes an extra step, following the right hand side of assignment expressions until a final ‘code’ stopping point.  Rather than jumping you to a require() call or the define statement of a RequireJS module, Open Implementation will take you to the implementation of the function.


Currently Orion allows you to perform a rename command.  This will find all references to the selected type and rename them.  This is much faster than Search and Replace.


Right now this is limited to a single file, but there is a huge new feature coming shortly that will change this!


The Orion language tools have support for ES6 constructs.


No single blog post is going to cover everything we have done for 10.0 and new functionality is getting released daily.  Here are a few other ways we are improving the user experience:

  • Speeding up common operations: New quick fixes are available, there is a context menu for the editor, and shortcuts were added to editor settings.
  • Let the user know what it going on: There is progress reporting as the tooling starts or as longer operations run and more detailed explanations are shown when a command doesn’t work.
  • Fixing bugs: If you found a case where the tools just didn’t work, try it again.  We are constantly making fixes and we updated to the newest versions of the libraries we use to pick up all of their hard work (escope 2.0.4 Tern 0.10.0 then 0.12.0 Acorn 2.0.4).  The language tooling has over 1800 unit tests to check for regressions as we deliver new features.
This entry was posted in New & Noteworthy. Bookmark the permalink.