Benchmarking JavaScript: Spring Tool Suite, Red Hat Dev Studio, and CodeMix

When working with JavaScript in Eclipse, whether you’re just editing a few files or working on an advanced front-end application, there are both performance and functional considerations you need to be aware of. Let’s take a couple of Eclipse-based IDEs and put them through their paces with a couple of applications, both without and with CodeMix.

We’re going to be using BlurAdmin, an AngularJS-based application, and the Node-based Express framework. If you wonder why we’re choosing an AngularJS application in today’s world of Angular 2+, Vue, and React, it’s because Spring Tool Suite (STS) and Red Hat Developer Studio (RHDS) don’t support these frameworks out of the box. In fact, outside of CodeMix, these frameworks aren’t well supported in Eclipse.

Performance

Some notes on how we tested:

• OS: Windows 10 Pro 64-bit
• Processor: Intel i7-6700 @ 3.4GHz
• RAM: 32GB
• Storage: Samsung 850 EVO SSD
• Versions tested: STS 4.1.2, Red Hat Dev Studio 12.9.0 GA, CodeMix 3
• Import times were measured after restarting the machine for each IDE, so OS / file-system caching would not skew results

So, let’s talk about these results — import typically takes a long time, because as soon as you import a project, a validation cycle runs, validating all the JS files in your project, even those in your node_modules folder. Yes, you could exclude this folder from the JavaScript path, but then, you can only do that after you import the project. With CodeMix in the mix (ha!), our validation logic intelligently skips this folder — it’s a lot smarter than that, but we’ll cover that later.

When we come to content assist, the Tern integration in RHDS frequently synchronizes source with the Tern server. You get a very limited set of results immediately, just like STS, but if the synchronization is successfully completed, it gives you somewhat better results. Synchronization takes time even when the node_modules folder is excluded from the JavaScript path, and it sometimes fails, so the results are hit-and-miss. CodeMix provides accurate suggestions immediately, and we’ll look at a couple of examples in the next section.

Functionality

When it comes to working with JavaScript, if you’re just editing a few files, you’ll want validation to stay out of your way. Or when working with a large project, you’d appreciate good IntelliSense and code navigation capabilities. You want to be able to build your projects using the same tools you use in production, and finally, if you had an easy to use debugger, perhaps you’d use it more often!

Having accurate type information is vital to providing good IntelliSense, navigation, validation, refactoring, and even formatting capabilities. CodeMix achieves this by using type inference, JSDoc, or even TypeScript declaration files, often available for key JavaScript libraries. RHDS uses Tern and Tern modules for the same, while STS is stock JSDT.

IntelliSense

While RHDS can take a while to provide suggestions (see chart above), it eventually gets there. CodeMix provides suggestions instantly, in most cases, and has the added benefit of providing parameter hints as well.

Navigation and Peek

Being able to navigate around a large code base, or even back to the function you were just working on, is an often underrated ability. Sometimes, you don’t need to actually navigate to that point, just peeking at the code for a bit is good enough. With CodeMix, press Ctrl and hover to either navigate or just peek. Hyperlink navigation does exist outside of CodeMix, but results vary based on the quality of the created model — peek, on the other hand is MIA.

Validation and Build Pipelines

In many cases, you just need to edit a few lines of JavaScript and can’t be bothered to deal with errors, mostly spurious, that are reported against other JavaScript files in your project. Nor do you have the patience to deal with long validation cycles when you first open or build the project.

CodeMix takes an intelligent approach to validation; by default, it validates only the file being currently edited. If you want it to validate the entire project, you can change the settings to achieve that. Now, the pièce de résistance is our build pipeline support, with which you can utilize external tools for building and validation and see the results directly in your editor. By using the same tools you would normally use to build your application for deployment to production, you are guaranteed to have an experience that is consistent between your dev and production environments.

In Closing

We haven’t explored all of what CodeMix can do with JavaScript, and there’s more, like linting, refactoring, and debugging. If you need more than what we provide out of the box, there are a plethora of Code extensions that you are free to install. These provide everything from snippets for popular frameworks to extensions that convert JSON to JavaScript. 

If you do any amount of JavaScript development in Eclipse, you’ll, unfortunately, likely be familiar with the problems we discussed, and we’re quite sure your current JavaScript dev experience doesn’t “spark joy.”