Cloud JavaScript Editor – Codemirror, tern for Tabris.js

Cloud JavaScript Editor – Codemirror, tern for Tabris.js

tern-tabrisjs-in-actionRecently we introduced a cloud JavaScript editor as a playground for Tabris.js - we are calling it Scratchpad. In todays world it is really important to give developers an easy path to trying things out, and it is quite amazing what cloud editors can do.

Our editor is based on CodeMirror and tern.js, and with just about 200 lines of code (plus 750 lines of JSON type definitions) we got an editor that provides code completion, shows inline help and links to more in depth documentation. Angelo Zerr (@angelozerr) made us aware of the capabilities of tern.js and was kind enough to write a first integration for Tabris.js. The code completion knows about different types of widgets and the associated properties.

I sometimes find myself pressing ctrl-1 for getting a quick fix, sadly to no avail. But this is only the start and we will reserve some time for future improvements. Anyhow, it is already incredibly practical for working with code snippets.

You can try it out directly here, if you want to run the code directly on your phone you need to get a Tabris.js developer app (App Store, Play Store) and sign up on tabrisjs.com. The editor integrated there aumatically saves your script and makes it available to your mobile device.

Eclipse and tern.js

We obviously thought about using Orion, but with Angelo’s contribution available and tern.js not being compatible with Orion we decided to start with Codemirror. There are plans to integrate Orion with tern.js (see bug #432940). Angelo is also working on a JSDT tern.js integration.

1 Comment
  • Angelo
    Posted at 17:47, 2015-02-06

    Many thanks Jochen for your article.

    I would like to give you several informations :

    * JSDT & Tabris completion is explained at https://github.com/angelozerr/tern.java/wiki/Tern-&-Tabris-support
    * you will see several cool completion inside string like

    => tabris.create(” // Here Ctrl+Space shows Button, etc
    => button.get(” // Here Ctrl+Space shows text, etc (the welll properties of the button

    * I will add soon a demo with CodeMirror and tern-lint and you will benefit with semantic validation (like tabris.create(“XXXX will highlight XXXX

    * For Tern & Orion, I had started a POC at https://github.com/angelozerr/tern.orion (only completion is available)

    * The demo with CodeMirror should provide too Refactoring to rename variable (Ctrl+Q) and Hyperlink with Alt – + (the official demo shows those features https://ternjs.net/doc/demo.html)

    * Note that if you ar einterested I have written a CodeMirror addon to support hyperlink with Ctrl+Clic