GitHub LinkedIn RSS
Saturday, April 6, 2013

JavaScript Developer Toolkit


The world has changed as it must. JavaScript developers are no longer considered the outcasts of developer community, but a boutique club gaining followers like no one else. However with its popularity and chic, comes the complexity and burden of maintenance. A JavaScript developer can no longer write one's code in a text editor and rely on ad-hock solutions copy pasted from various forums, but surround oneself with professional tools specifically designed and customized for the language. In this article, I'll present must have tools, which will assist any JavaScript developer in the crafting of awesomeness.

Environment


Your OS is largely dependent upon our habits or company's policy, however for server side developers, I would strongly suggest migrating towards Unix base OS like OS X or Linux of some sort - my preference is Ubuntu. The reason behind the choice is the enviroment on which your node.js application runs on, which is Unix machine. The sooner you work on the compatible environment the better. Surely you can build your code on Windows and test it later on Unix, but with the quality of latest Windows versions - does it really worth the trouble :)?

Even as a solely front-end developer, these days you’ll certainly run into a project that may have node or may use Ruby and knowing how to operate in these environments plus keeping them up to date can be a huge advantage to you or your team members.

Node.js


Node.js is a cross-platform runtime environment and a library for running applications written in JavaScript outside the browser - on the server. You can read more about it on wikipedia and their site. To install the node, just follow the instructions on their download section.

npm


Basically npm is an online repository for the publishing of Node.js projects. It also allows you to interact with downloaded packages in terms of versioning and dependencies. npm is installed as part of node's installation, so no work here. In order to install some package in you project's destination, async for example, just type the following:

npm install async

If you want to install the package globally, that is to use it in all your projects, just add -g flag after the install command. You can update a specific package by running the following:

npm update async

or all installed ones by removing the package name.
Using the npm you'll be able to install some useful tools like Yeoman, Grunt, Bower and many more. All of them will be discussed in the following articles.

Ruby


Ruby is definitely another environment you’ll encounter during your work as a JavaScript developer. Why Ruby, you may ask? There are a lot of cool tools already built in Ruby, which JavaScript community members use with impunity. The most popular are Compass and Sass, but many more exist and will be reviewed in the following articles. To install the Ruby environment, go to the download section and follow the instructions. The usage of Ruby is similar to npm described above, just change the npm command to gem.

Integrated development environment (IDE)


For many years JavaScript code has been written using tools, which were designed for other languages. .NET developers used Visual Studio, Java and PHP was written with NetBeans or Eclipse. None of these tools were designed to write extensive code in JavaScript, yet along support its frameworks like Angular and Ember. And don't get me wrong, I love Eclipse and it's my number one IDE for Java projects, it's just not very good when it comes to JavaScript ecosystem. The void has started to fill only recently, by tools popping up like mushrooms after the rain.

I would like to put a spotlight on two of them: Sublime Text and WebStorm. Notice though, I only mention Sublime Text because of its popularity among the tutorial writers because of its lightness and ease of use for small pieces of codes. It is however a code editor, rather than a IDE like WebStorm. Here, the writer put it in a correct form:
"If you want a flexible, powerful, extensible programming text editor that is lightning fast and you don't mind switching to other windows for code checking, debugging, and deployment, then look no farther than Sublime Text."
WebStorm on the other hand offers a wide set of tools ranging from source control to extensive debugging using spy.js integration. Subline Text's price should also play a role in a comparison. Putting a price tag of 70$ on a super buffed text editor is a bit ambitions in my point of view, but maybe I'm in the wrong. In order to work with WebStorm, you'll have to pay from 59$ to 99$, depending on the license. It also has a start-up 50% discount and is offered completely free for a open source projects. Have a look at both and choose what fits you best.

These are the basics, where you should start. I'll be covering additional tools and plugins like Emmet, if possible those which work with both WebStorm and Sublime Text.

**The tools presented here are by no means better nor superior to others present on the market. The list is compiled based on my subjective opinion. If you found/know of better tools, you're welcome to comment below.