In-Browser IDE on Client-Side JavaScript

on under Technology
3 minute read


'11' + 1 // 111
'11' - 1 // 10

A language famous for it’s unique behaviour.

Some people love JavaScript, swearing that it’s one of the best languages ever. People like these are complete wizards with the language, able to deploy websites, webhook, and just about anything quickly using their extensive knowledge of JavaScript packages.

Others, absolutely hate it and dream of a world without it. These folks cringe at the thought of encountering yet another found 2235 low severity vulnerabilities when doing npm install. In most cases, they tend to disable JavaScript in their browser, viewing it as an unnecessary bloatware / security concern.

Love it or hate it though, JavaScript is literally everywhere.

Me and JavaScript

I personally have pretty lukewarm opinion on JavaScript.

Do I think it’s an awful technology and refuse to let it run on my browser at all? No.

Would I still make fun of it? Absolutely.

Would I use it to develop something? Maybe, if it suits my need.

In most cases though, it doesn’t suit my need as I enjoy working on lower-level systems more. Due to a certain circumstance however, I’m currently working on a web application where JavaScript is a perfect fit–a pretty rare occurrence for me.

The Project

My current project aims to create an educational platform that can teach people how to write clean code. The idea is to create a website similar to LeetCode / HackerRank, except solutions are ranked in terms of their cleanliness–judged using metrics obtained from static analysis.

While working on the project though, I discovered just how much of its part can be done on the client-side, which led me down to a rather interesting rabbit hole.

Porting My Project

With relatively minor modifications, I managed to port some of the interesting parts of my project here, running on a static page.

The demo features an IDE with most modern functionalities (linter, auto-format, auto-complete, Vim emulation, etc.) and an interpreter that can run user code in a sandbox while visualizing the code interpretation steps. It also supports basic static analysis of user code (other static analysis metrics were non-trivial to port).

I was honestly surprised by how much the simple port can do, given that it only took me ~10 minutes of yanking and deleting lines on Vim, with tendency to throw out anything that is not easily moved.

Client-Side Shenanigans

Seeing just how much we can do with relatively simple client-side JavaScript got me thinking of various possible use cases. For example, we can make a lot of high-quality free educational websites hosted on GitHub pages (I’m currently considering on making a more complete port of my project and turning it into something like codingbat).

I also ended up discovering a lot of interesting projects that run purely on browser JavaScript:

Seeing these projects were honestly mind-blowing and inspired me to keep exploring what I can do with JavaScript. The next time I find myself with some free time, I’m definitely going to be trying some more client-side shenanigans.

JavaScript, IDE