Common Tools used in Modern-day JavaScript Development

In this post, I’d like to give you guys a brief introduction to some of the common yet somewhat confusing tools used in modern-day JavaScript development. If you’ve been in the Web Development industry for a while, there’s no doubt that not only you may have already come across these tools but also you do understand how to work with each of such tools. However, if you are new to JavaScript development or haven’t yet discovered what these things are and what you can do with them, then you are welcome to hang in there. I am sure you’ll definitely learn a thing or two during your stay.

Okay. Lets jump right in!

Transpilers

Transpilers, or in other words ‘source-to-source compilers’, are tools that read the source code written in one programming language, and produce the equivalent code in another language. Transpilers have born out of the need of wanting to have modern language features on browsers that lack support for such features. For example, as you should be aware, older browsers such as Microsoft Internet Explorer does not support ECMAScript 2015 or ES6, the latest JavaScript standard and its successors. Therefore, it prevents you from serving an app written with ES6 for a client who still runs Internet Explorer. This is where a transpiler becomes an invaluable tool in your development toolchain. With a transpiler, you can continue to write your code with beautiful ES6 syntax or maybe TypeScript, CoffeeScript, etc., and when you are ready to deploy, the transpiler picks up the code you’ve written and converts it to ES5 syntax making it compatible with ES5 based browsers.

One such immensely popular transpiler is, “Babel” which has a strong following among the majority of modern-day JavaScript developers.

Below is a list of resources that you can refer to on Transpilers:

Pre-processors

Pre-processing can be thought of as something equivalent to transpiling. Just to get the idea that is. Before jumping to any conclusions, let’s take a look at a couple of definitions given by some popular websites:

According to Wikipedia, a preprocessor is “a program that processes its input data to produce output that is used as input to another program”.

That is more of a generic definition of what is a pre-processor. There are variety pre-processors can be found in various domains. Here what we are mostly concerned about are web-specific pre-processors called “CSS pre-processors”.

An article from freecodecamp says, “CSS Preprocessors compile the code which is written using a special compiler. They then use that to create a CSS file, which can then be referenced by the main HTML document.”

Going by those definitions, think of a CSS pre-processor as “a simple programming language” with its own syntax (i.e. variables, nesting, mixins, operators, functions, selector inheritance, etc) for writing the source code that will be interpreted or compiled into CSS. Similar to transpiling, the pre-processor also takes one form of input and turns it into another format. When it comes to web development, CSS pre-processors such as SASS and LESS are the most popular pre-processors that we encounter on regular basis. CSS pre-processors extend CSS by providing traditional programming language features that are not available on CSS itself thus allowing the developer to have more control over his/her design.

Below are some of the useful resources that will teach you more about CSS pre-processors:

Linters

According to Wikipedia, lint or a linter is “a static code analysis tool used to flag programming errors, bugs, stylistic errors, and suspicious constructs.” Simply put, you use a linter to programmatically identify and fix syntax and styling errors in your source code.

Instead of repeating the same information that is already available online, here are some of the best of such references I’ve found on the topic by googling:

Minifiers

In the broader sense, minification refers to the process of removing all unnecessary characters such as white space, newline characters, comments, etc., from the source code of an interpreted programming language (i.e. JavaScript) or a markup language (i.e. HTML) without affecting its original functionality. Minification often results in reduced file size of the source code, which in turn helps reduce the bandwidth consumption over a network and quicker response times.

Below is a list of some valuable references that you should read that will help you gain a fair understanding of the concept of minification and the tools used to achieve the minification:

Module Loaders

If you are a beginner to JavaScript development, it is important to understand what “Module” is, prior to learning about Module Loaders. If that is the case, head over to this compilation of some of the best online references out there on JavaScript modules, which will help you to get your feet wet with barebone to advanced know-how of JavaScript modules and their uses.

A module loader is typically some library that can load, interpret, and execute JavaScript modules you’ve defined using a certain module formatting system, such as AMD or CommonJS. If you don’t have a clue about JavaScript module systems either, then please take a while to do your research on Google.

RequireJS and SystemJS are prime examples of such module loaders.

Module Bundlers

According to this freecodecamp article, a Module Bundler is “a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser”.

Bundlers can be thought of as an alternative to Modules loaders but instead of resolving the dependencies at runtime, Bundlers introduce a compilation step in which, the source code is pre-processed to include all the required dependencies at compilation time, and as the end result, it produces a single ES5 based cross-browser compatible concatenated script file (A bundle) that can be referenced from your HTML source code. Bundlers can be configured to utilize all or most of the JavaScript tools we’ve discussed above, such as transpilers, pre-processors, linters, minifiers, loaders, etc., to produce their final result.

Popular options for Module bundlers include Browserify and Webpack. I have personally used Webpack a lot and therefore it has been my go-to option while developing a web application. Below I have included some of the most comprehensive and well rounded beginner-friendly guides on how to use Webpack for building your own applications.

Task Runners

Task runners are specialized NodeJS tools designed with the purpose of automating common development tasks such as minification, concatenation, and re-compilation of source files, spinning up and restarting development servers, optimizing images, etc. Personally, I look at task runners as a stripped-down or less sophisticated variant of a Module Bundlers such as Webpack. Popular examples for task runners include Grunt and Gulp.

Below is a list of some fine resources on task runners that you can refer to if you are interested in learning more about those.

All right guys. That should be all for now on this topic. By taking the time to read this post, I hope you guys gained a fair bit of insight into some of the crucial aspects of modern-day JavaScript development.

Happy Coding!!! 👋👋👋

Was this helpful?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0