Optimize Your Workflow: JavaScript Tools and Libraries

The “good old days” are behind us. We no longer have the luxury of having so little JavaScript code that we can do it all by hand in Notepad. In fact, the amount of JavaScript being sent to the client per page has increased quite dramatically from not so long ago. We can’t afford to write everything by hand anymore, which is where all of these tools and libraries come in handy.

Editors

Thankfully, I no longer write all of my code in Notepad. Before I got to college, that’s exactly what I did, though at that time I was writing far more HTML and CSS, which is now nothing compared to the amount of JavaScript I write. The best part is that I was content in that minimal editor, but today, I wouldn’t dream of using Notepad for anything except as a place to jot down a few random notes. Of course, this isn’t because Notepad got worse; it’s because the number and quality of code editors has increased dramatically.

There are several “classes” of code editors too: you can have a nice simple text editor with syntax highlighting and a few minor helpful tools such as snippets, and you can have monstrous IDEs that will write half of the code for you, and there are those in between. Not only do we have to choose how much functionality we want, we also have to choose whether or not we want our editor on the desktop or in the cloud.

Here are just a few choices:

Small, Efficient, and Extensible Editors

• Sublime Text: clean and minimal interface, but has an amazingly powerful and extensible command system
• Notepad++: A great semi-minimal editor with a large set of plugins available. The plugins here generally add more to the interface rather than just adding commands to a list like Sublime. Plugin abilities seem to be a bit broader, too.
• Brackets: Adobe’s new editor, built specifically for writing HTML, CSS, and JavaScript, and also written in the same technologies. Has a really cool inline editing feature. It’s open source and still being worked on, so go help make it amazing.
• Vim: This editor’s motto seems to be “never take your hands off of the keyboard”. Had countless keyboard shortcuts, so if that’s your style, then you may be able to get pretty productive with this. I type too slow and have a hard time remembering a lot of shortcuts, so this isn’t a great choice for me.
• Emacs: Honestly, I don’t know a whole lot about this one. From what I’ve read about it, it’s similar to Vim but seemingly focused more on extensions and macros. If you know more than me (which you probably do), feel free to fill us all in in the comments.

Powerful IDEs

• WebMatrix: Microsoft’s IDE focused entirely on web applications. It is able to pull in all the required applications and libraries to create many different types of apps.
• Eclipse: I used to work on Eclipse in college when working with Java. This thing is a monolith. It has pretty much everything you need, and if not, you can extend it. I wouldn’t recommend this for single-page JavaScript apps; it seems to be way more than you’ll need for something like that.
• Netbeans: Very similar in capabilities to Eclipse, it’s slightly slimmed down and is a bit easier to start learning how to use. Still offers more than I’ve ever needed and is lacking in some of the simple JavaScript plugins that I can find in Sublime and Notepad++.

Online

• Cloud9: This is pretty dang good for an online editor and is continually growing and getting better, though there are some annoying limits if you don’t pay for it.

This is by no means an exhaustive list. These are just the ones I could come up with off the top of my head. Each of them has something special to offer, and though I’ve settled on Sublime Text as my main, if I lost it for some reason, I’d still be well off with any of these others.

A good editor is one of the best ways to increase productivity, but only if you know the editor well. Sometimes it might be better to stick with an editor you know than to switch to one that people say offers better productivity because it’ll inevitably slow you down at first. So 2 lessons: Learn your editor well (I’m always learning something new about Sublime) and don’t switch unless you have lots of free time to learn the new environment.

Tools and Generators

Many of those bulky IDEs have generators and other tools built in, and while some of the smaller editors don’t include these things built in, they are often extensible and can have these capabilities added. For those capabilities that aren’t available as plugins, there are command-line utilities. Though there may be numerous GUI-based or online tools available, it seems that the standard is to use the command line, at least for JavaScript development. This is especially true since the introduction of Node.js which allows us to code CL tools in JavaScript.

Here are just a few of the better Node.js command-line tools that I’ve used and loved. Make sure you have Node.js installed before trying to use any of them.

• Grunt: Has numerous build tools that are helpful for getting your code built and ready to deploy. Also has some interesting tools to help during development, such as watching your files for changes and running certain commands when it sees anything. Also has tons of extensions to make it even better and useful for even more situations. (install with npm install grunt and use the -g flag if you want it globally available)
• Yeoman: Built largely on top of Grunt and several other tools, this utility is recently released by Addy Osmani and Paul Irish. It is an all-around tool that helps get a lot of things done from start to finish, including a built in server that refreshes the page any time you save changes to a code file. (this is the best place to go to figure out how to install it)
• BBB: I’ve talked about this one before. It’s a Backbone.js scaffolding tool that sets up the directory structure for you and handles the majority of the boilerplate code for your Backbone apps. The biggest reason I don’t use this anymore is because it doesn’t use Marionette, which has become invaluable to me lately. (install with npm install bbb and use the -g flag if you want it globally available)
• Bower: An interesting tool from some guys at Twitter. Essentially a package manager for any code available via a Git repository. Yeoman uses this internally. If you’re not using Yeoman, and you’re sick of going to dozens of websites to upgrade your libraries or download for the start of a project, then this ought to help you out. (install with npm install bower and use the -g flag if you want it globally available)

Most of these tools help you get started by scaffolding out some of the structure for you or by getting all the libraries you use all the time and downloading it for you. Some also make finishing up into a production build much faster and simpler.

Libraries

This may be the bit that affects the amount of time you spend writing code the most. Once libraries such as jQuery were set loose upon the world, the amount of code that any JavaScript programmer dropped dramatically. Libraries make it possible to do a lot of work hidden behind a simple function call. While they might have the tradeoff of including tons of code that may or may not be used in the current application, we are now able to focus our development time on application logic instead of browser inconsistencies and such. With the advent of MV* frameworks, we’re even able to keep our code organized into well-defined pieces.

I’m not going to bother listing any libraries here because everyone already has their favorites, and if you don’t, it won’t be long before you do.

Conclusion

Do you want to do amazing things with web technologies? Then I suggest finding a great code editor, some powerful tools, and the best combinations of libraries and plugins you can find, because once you have those, anything is possible and it’s possible with a lot less time and effort. With great tools and libraries, you’re allowed to focus on creation and stop worrying about all those other things.