Read my book

I wrote books about Webpack and React. Check them out!

Thursday, June 16, 2011

Review - jsdoit -- a Web Based JavaScript Editor

Web based JavaScript editors seem to be all the rage these days. There are quite a few of them already. I've grown fond of jsdoit in particular. You'll find a couple of simple demos at my profile page to get an idea of what kind of stuff I've been coding there.

So what makes a web based editor interesting? In this case it's instant feedback. You just write some HTML/CSS/JS and see the results pretty much instantly. Never has it been faster to see what you are doing. This is great for dealing with visuals in particular. :)

The editor has some issues and I have my qualms about it. I do think, however, that this single feature makes it so nice to use I'm willing to overlook some minor things. I really recommend checking it out.

There are some other interesting alternatives available as well. I think jsfiddle is fairly popular. It's missing the auto-run feature I like so much, though. :(


As mentioned earlier, jsdoit is just a web based development tool. Instead of firing up some kind of desktop application and browser for inspecting the results, you just do the development in your browser. This is a highly effective way of working in case you are dealing with something visual.

The benefits are not so great if you are dealing with some code not causing any visual results. In this case the traditional approach may be more productive. This is true particularly if you set up testing wisely (run tests on file change or so).

In addition to having the great auto-run feature I so much like, jsdoit offers some other neat stuff as well. It is a communal service meaning you can fork code written by other people and make changes to that. I haven't tried this out yet but at least it sounds good in principle. There also appears to be some kind of forum available. Plenty of Japanese in there, though. :)

The editor also provides basic syntax highlighting. Another subtle, yet valuable feature. Interestingly the editor "lints" the code while executing it automatically. This gives you valuable insight to why your code might be failing. Perhaps you are missing something or made a typo. I really dig this kind of functionality.

The service provides a simple way to embed your snippets to your site. Here's a quick example showing my implementation of an analog clock:

Analog Clock (Canvas) - - share JavaScript, HTML5 and CSS

That's really useful piece of functionality to have! I'll probably utilize this a bit more later. Keep in mind that this sort of things won't work well with RSS, though.

Bugs and Warts

Even though the service is pretty great even "as-is", there are a few issues that have been bothering me. These have to do with "edit" mode of the service.

Note that I've been testing it a stable build of Chrome (11.0.696.68). It's possible these are Chrome specific issues. Hopefully they'll get fixed soon. :)

It looks like the implementation of line numbers is broken. They just don't seem to be in sync with the code area. This is visible when I scroll it around.

In case I move my code area text cursor low enough, it looks like the whole screen moves down a bit hiding the header part containing project title and such properties. It does not get restored properly even if I move cursor up. I noticed I can get the header area to appear again if I resize the window. Seems like a some kind of bug in their layout.

I can live with these two. Perhaps some user script hackery would help to remedy those...

Oh, forgot to mention this earlier... It seems the editor enforces indentation of two spaces. Don't even think about using four. It will just mess the editor up as it does some automagic indentation. It might be cool if there was some way to disable this behavior or set some global indentation rule to support both conventions. I personally just like four space indentation system more.

Feature Ideas

There are a few features that could improve the service quite a bit and make it more lucrative for developers.

It would be really neat to have some way to split JavaScript code into multiple files or views. I would really like to have both library and application code visible at the same time. This would work well for testing as well.

I also miss some kind of revision control. It would be really awesome to have a simple, fluid way to commit new chunks of code and then have a way to inspect the history. As far as I know there is no support for revision control whatsoever.

Even though I probably won't need it a lot, it would still be great to have some kind of support for integrated API docs. Ideally you should be able to inspect the documentation of some function or method via a tooltip (hover) or so.

I also miss a few standard IDE features. These include "jump to definition", interactive rename, delete line, delete block and such. It's possible some of these features are already there. I just haven't been able to find them yet.


Overall I like jsdoit. It's a great little service that serves its niche well. If you are into programming dealing with visuals, you are likely to love it.

I think this might very well be the future of web development. It's going to open a world of possibilities. What we are seeing here might very well be just a tip of an iceberg.