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.
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:
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.
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.
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.
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.
