Making a text editor for JavaScript using JavaScript
I'm currently using Notepad++ for my coding needs. It's free (as in both freedom, do what you like, and free beer).
It's lightweight (takes up little computer resources), and has a bunch of neat features like parenthesis highlighting/matching.
Before I switched to Notepad++ I used Textpad. And before that I used Notepad, the text editor that comes with Microsoft Windows.
I used Notepad for quite some time, and today I can't imagine how I put up to it. At that time, it didn't even have the GoTo-line function.
Meaning, that if there was a error in my code at say line 500, I had to manually count down to that line ... *grin*.
I used a few tricks though, one was that I made comments in the source files, that said "This is line 100", "This is line 250" etc...
Worth noting is that I also didn't indent my code, because that is not supported in Notepad :P
At one point I couldn't put up with this any longer, so I asked around if anyone knew a text editor that had line numbers and if possible also support text indentation. And I was recommended to use Textpad.
Textpad was such a relief, it had both line numbers and supported tab indentations. It kept me happy for many years!
But then Texpad got a big update, that changed how some stuff worked, like the search box now felt backwards. But it also got, if I remember correctly; code highlighting! Witch was really nice. Didn't know I wanted it until I saw it.
I was now hungry for new features and was kinda looking for a new text editor when I found out about Notepad++. Notepad++ was very buggy at the time and crashed a lot, so I didn't start to use it fully since about a few years ago.
When starting to write more and more JavaScript, I felt the need to have a function list, so that I could quickly jump between them. Notepad++ had this great function-list plugin that made the job very well.
It didn't - however have argument hints - when calling the functions. Which I soon realized I needed, after using JavaScript functions that sometimes could have up to ten arguments *grin*
I've searched for a code editor that supports JavaScript intelligence for a while now, and so far found two that are actively maintained. Those are Codemirror with Tern, and Microsoft Visual Studio. There are also a few editors built upon Codemirror ...
I tried to implement Codemirror with Tern myself, but it didn't work out.
I don't think the Browser's Document Object Model (DOM) is optimal for text editing. And editors built upon Codemirror tend to be very slow, even though Tern it self is reasonable fast.
Visual Studio is quite bloated and slow, and cost a bit too much, like five hundred dollars and new releases every year (no free upgrades).
I have thought about making a code editor myself for a while now, but not having the slightest idea how to do it. The famous droplet that caused the beaker to overflow was when Notepad++ made an update that disabled the "old obsolete" function list, and was stuck with their built-in buggy and annoying one. Heck, not even all JavaScript function's show up in it!
I totally depend on that function-list, so it was time to build my own code editor! One I could tailor for my specific needs.
How to make an editor
After spending weeks trying to find a code editor that fits my need, I started searching on how to implement one. I had already tried Codemirror, but it was too hard. It would be easier to make my own. At least I though so =)
A decision I had to take early on was whether it should work in the console (via SSH) or not. There are already two very good and known editors for that: Vim and Emacs. They are however way too complicated for me. Sure I could learn, but it also feels like I'm on the Commandore 64 when using them, which is a bit depressing, for those days are way gone.
So I decided to make a "graphical" code editor. One that would run on a graphic platforms like Windows or the browser. Sure I could extend on Notepad++, but I have no C++ coding skills and I want to make my own from scratch!
I decided to make it run in the browser, where I'm very confident, and I can bundle it with Webkit (io.js) to make it feel "native".
I first experimented with the DOM, the way CodeMirror and many other web editors do it, via "contenteditable=true". But I felt that the DOM was just in the way.
I then searched for implementations with Canvas and 2d context. The Canvas is very nice to work with and is supported in virtually all modern browsers.
But all I saw was advice NOT to use the Canvas to implement a code editor. Even w3.org advice against it!
I have used the Canvas for making games and I'm actually happily surprised on how good it works. The Canvas even got hardware acceleration! I also have a few tricks, like rendering sparingly, to make it even faster.
So what about a hardware accelerated code editor? *grin*. It sure sounds fast, I'll make sure to use that in my "copy" for marketing my editor =)
My plan was almost crashed right away, when I found out the Canvas didn't have sub-pixel text, sometimes called "ClearTyp" which makes the text crisp. But thankfully there was a fix (alpha: false).
JavaScript parser
To have a function list, with argument hints and code completion, I need to parse the JavaScript code ...
I have done a JSON parser for classic ASP (vbScript) before. It runs a recursive loop, digging deeper for each object in the JSON. This means the code first makes one "pass" to find each object, then another pass on that object, then another pass on each object in that object. This is fairly simple and can be done in short an neat code, recursively reusing the same function.
For my JavaScript parser I decided to only have one pass, meaning the parser only goes through the code once, only reading each character once. This turned out to be a bit mind boggling, but totally doable.
Last night while surfing the web I found someone bragging about the speed of CodeMirror/tern VS Notepad++. I personally though Notepad++ was very fast, so I got interested and eventually ended up on Marijn Haverbeke's blog, the author of CodeMirror/Tern. He seems like a very smart and nice guy, but I'm not a fan of his JS code, or maybe I'm just too stupid to understand it :P
That dude has a pretty impressive merits ...
Imagine if you are on a job interview or something like it, and the interviewer ask you who your "customers" are, those that depend on your software, and you could just answer:
-"Hmm, lets see, Microsoft, Google, Mozilla ..."
Who wouldn't like to have those companies on their reference list!?
Anyway ... On his blog I found a benchmark comparing his Acorn parser with two others. And I got a bit curious on how well my own parser would perform comparing to them. It only uses one pass, I know it must be fast. Or how else would you make it faster!?
So I saved the benchmark page locally and included my own parser. And here's the results:
Acorn 280118 lines per second 100% Esprima 181336 lines per second 65% Zparser 789723 lines per second 282% (my parser) Traceur 123914 lines per second 44%
My parser is yet not as advanced as the others, but it sure is faster! So fast that I currently can parse the entire document on every key stroke, without noticing any lag.
PS. I'm not ready to show the editor to the world just yet, because I know you will do weird tests on it, that is totally out of context for the indented use case (writing JS code). Like pasting 100,000 lines of code, and then posting everywhere that my editor is crap, because it can't handle that.
So I first have to make some "benchmark optimizations" before releasing it ;)
Written by Johan Zetterberg May 26, 2015.
