Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Brian Fernandes
Director of Customer Engagement - Loves technology and almost everything related to computing. Wants to help you write better software. Follow at @brianfernandes.
Posted on Mar 19th 2019

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

Take a look at the following charts that show how long it took to import the projects, along with the time it took to see the content assist results.

Testing specifics:

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

Code Your Best Code Today

Speed is just one reason to love CodeMix, you also get the best of VS Code extensions right inside your IDE! Try something new, like Vue or React. Built-in eLearning makes it a breeze and if you need help, Live Chat is just a click away.
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 & 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 & 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, 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. And of course, CodeMix does more than just JavaScript – there’s Angular, React, Vue, TypeScript, Python, Rust, … anything and everything that is supported by VS Code.

If you do any amount of JavaScript development in Eclipse, you’ll likely be unfortunately familiar with the problems we discussed, and we’re quite sure your current JavaScript dev experience doesn’t “spark joy”. To change this, don’t change your IDE – just install CodeMix, and Marie Kondo your JavaScript experience.