Experimental web IDE brings power of data notebooks to JavaScript

Carbide is designed more like a Jupyter notebook, allowing for live markup, annotation, and manipulation of code and data

A blank page in a notebook
Credit: Pink Sherbet Photography CC BY 2.0

An experimental new in-browser IDE is attempting to provide software developers with a programming environment that has the interactivity and richness of data notebooks like Jupyter.

Carbide is initially focused on providing an environment for running JavaScript (ES2015) code, but its long-term plans call for supporting multiple languages.

Carbide can be used either anonymously or with a GitHub account to save work as GitHub gists. The Carbide editor lets you type code in a right-hand pane and execute it interactively; the left-hand pane can be used to provide line-by-line Markdown-format code annotations. In-line comments can still be used, but this method allows code comments that are more freeform -- they can include hyperlinks, images, or anything else Markdown allows.

carbide Carbide

Carbide's notebook-like UI allows code to be marked up with Markdown annotations, and allows elements in the code -- such as variable assignments -- to be manipulated with sliders or direct inputs.

Highlighting any expression in the code and hitting Ctrl-I (Cmd-I on the Mac) attaches a "probe" to that expression. Probes are essentially live inspection tools that show the value of whatever they're attached to, but also allow live manipulation of those values, with the results shown in real time.

Multiple blocks of code, aka cells, can be inserted into a document, and they work in much the same manner as different files would in a conventional IDE. Cells can interoperate with ES6's import/export syntax. 

Carbide's creators have provided several example notebooks to get started, such as a 3D graphics demo or a React-powered YouTube widget.

In an intriguing development, Carbide allows live manipulation of values that are computed rather than assigned. "To figure this out, we have to essentially run the program backward -- fixing the outputs, and solving for the inputs," states Carbide's documentation. It's unlikely that Carbide could do this for all data types in all circumstances, but the point is clear: It allows programmers to experiment with data as freely as possible in conjunction with running code.

Another currently available project, Tonic, has many of the same live-notebook-coding features as Carbide. Kevin Kwok, one of Carbide's creators, stated in a discussion thread on Hacker News that the two have key functional differences: 

As far as I'm aware, Tonic is designed so that there is only one way that a program can execute, so there's any notebook is automatically trivially reproducible. This has the side effect of making every notebook essentially equivalent to a single file which is evaluated in-order. Essentially, they've made it so cells only mediate what output is displayed, and not what gets executed. Carbide takes the opposite approach -- leaving cells to only control what gets executed, and introducing something else (probes) to visualize output within a cell.

Rough and prototypical as Carbide is right now, its creators already have plans for how to accommodate other languages. Mostly this is done by wrapping access to another language's interpreter in a JavaScript module; so far there are prototypes for Python, Scheme, and Watlab, a Matlab-style language that compiles to JavaScript.

It'll be intriguing to see how future versions of Carbide make use of WebAssembly. In theory, that proposed portable code format can be targeted by language runtimes apart from JavaScript, allowing projects like Carbide to become even more language-agnostic.

From CIO: 8 Free Online Courses to Grow Your Tech Skills
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.