5 Tools every Javascript Developer should Use

Lately I have been thinking about the tools I use to write Javascript. I think about how much it would suck to develop without them. So I am going to list them in order of importance for me, 1st being the most important. I will try to convince you in the process to at least give them a try.

5. Javascript MVC or UI libraries

Frameworks like Angular or UI libraries like React help you bring structure into your front end logic. They have helped me in the past with building browser-rich applications. In particular I have been using react more lately. This is mainly because of its freedom to use wherever you want. You could have a project where you're using jquery everywhere and just decide to use react in a single component. It doesn't require you to build the app on top of the framework. So why should you use something like react? Because it forces you to think of your application as a set of components and sub-components. It forces structure on to you in a natural way. It also brings reusability to the table, components are easily reusable. Besides that big advantage, react can also optimize the speed of your app by making as little DOM changes as it has to, thanks to its concept of the virtual DOM. When should you consider using them? If your site is just a plain informational website that shows some dynamic texts here and there and doesn't have much functionality requirements, then there's really no need to use these types of frameworks. But once you see that you are building an interactive application where the javascript's file line count is bigger than the HTML's, then start considering. I wrote a post on setting up react if you're interested on getting a working boilerplate that serves as a base for your future react project. It even includes support for Javascript 6 (ES6).

4. Babel

You will hear me mention Javascript 6, or more appropiately, ECMAScript 6 (ES6) a lot on this post. It officially came out sometime this summer as far as I know. Did you know no browser supports it yet (as of writing this post).  And did you know you need to be using it now or else your missing out on all the goodies it brings? Just look at the import example we will see next at number 3. Here's the 5 best features it brings to you. So why care if you can't even use it? Because you actually can, thanks to a tool called Babel. Babel lets you write code in ES6 and it will transform it into the browser compatible version. Not even that, it also transforms JSX, which is what you use to write the structure of react components, to javascript. Now I use babelify, which is sort of a plugin for browserify.  You can read on how to implement babelify in this post I wrote.

3. Modularity and Dependency injection tools

Javascript doesn't support modules. You can't import a class, function or whatever that lives in another file. What you do is list the script files you need on the HTML as a <script> tag like this:

<script src="module1"></script>
<script src="module2"></script>
<script src="module3"></script>

You would have to do this for every page. Not only that, you also have to check dependencies. What if module1 needs module 3 to function? You would have to rearrange them. What if you don't need 3 scripts like in my example, but 10? It becomes hell. Luckily we have libraries now like requirejs, browserify and webpack. They all solve the problem in their own way. I have used require and browserify and they both are good choices, as I am sure webpack is as well. In browserify for example, you only need to put 1 script in your page, like:

<script src="app.js"></script>

Ok, cool stuff, but where do you manage your dependencies? You manage it in the script file itself, in this case, app.js.

// module 3

var module1 = require('./module1.js');
var module2 = require('../lib/module2.js');

module1();
module2();

See that, in the module3 file we are importing the other 2 modules. In this case they are functions we can later use inside module3. So yeah, it becomes way easier to manage dependencies and modularize your javascript with these libraries. Javascript 6 import The gods of javascript saw the need for this too, and they have provided us with native support for modules using the 'import' keyword in javascript 6. You can read this post on how to start using 'import' right now and javascript 6 in general.

2. Task Runners

Task Runners automate tasks that are repetitive and boring for you to do when developing for the web. They come in a number 2 of importance to me for writing javascript. It's easy to explain why: Number 3 and 4 wouldn't be easy to use without having a task runner. I use browserify and babel a lot. Without a task runner, I would need to give the commands to transform my ES6, JSX and bundle everything together each time I make a change. That would be very detrimental to my work flow. Task runners even go so far as to letting you reload the browser every time you make a change to your javascript (or css). There's some options for you when choosing a task runner. I use Gulp. It's in my opinion the easiest to learn how to use. You can read a comparison I made a few months back on task runners.

1. jQuery

Yes, jQuery. It's my number 1. I can actually make a website without any of these tools I am listing. jQuery would be the one I would miss the most and would go crazy without. It's the mother of all javascript tools. It's my number 1 tool for manipulating the DOM, attaching event listeners and other tasks you always have to do in a website. Granted you can use the tools I listed in number 5 like react to manipulate DOM and handling events. But when you are building websites that don't need to have a MVC framework, or don't need a react component, guess what, jQuery is there for you. Oh and good luck making an ajax request on plain javascript. It's not pretty. Or good luck making a promise in plain javascript (if you are not using ES6). Now I see a trend growing of dropping jQuery for plain javascript, and people looking at jQuery like it's just slowing their website. It all depends how you use it, there are ways to optimize your jQuery. If you liked this post, consider subscribing to my blog in order to get notified whenever I publish another article. No spam!
[wp_email_capture_form]