Why do we need build for a web application?

In this post, we are going to discuss why we need to build a web application. I find it as an Interesting Question.

Let’s see definition for Javascript from MDN.

JavaScript (JS) is a lightweight, interpreted, programming language with first-class functions.

From the above definition, a Web application developed using Javascript doesn’t need any compilation process because Javascript code is directly interpreted by the Browsers. In the past, web application doesn’t require any build process however over a period of time we are in the need of build process. An active development web application will increase in size as the day progress and also with the addition of more dependencies. Because of its size, it will suffer from following problems.

  • Security
  • Performance
  • Maintainability
  • Quality

I believe, Here comes the role of build tools which will improve the performance. Let’s see how build tool improves the performance of your web application. Even Most of the well-built web application suffers from the performance issues so using build tools became mandatory for any web application.

Let’s see how basic web application works,

A client will send multiple web request to get resources from the server, it may be js, CSS or static resource files. So it will create overhead for both client and server machine.

To solve this problem, We can merge all the Javascript file into a single file so that number of request sent to the server will be reduced drastically hence performance will be improved.

Browser doesn’t care if we sent Javascript content in a single file or multiple files so Merging the javascript files are really important.

Now, We have reduced the number of request and response between server and client.

Next problem we need to address is the size of the code being transferred between the server. In many application, gzip is being used by the server to reduce the size of the file being transferred between server and client. However, it can be further reduced by the minification.

consider the following code snippet

function sayHelloWorld(){
console.log('hello world');


The total size of this code snippet is around 74Bytes and Browser doesn’t care about the¬†spacing and indention in our javascript files.

After removing spaces and indention in the Javascript file size will be reduced by few bytes.

function sayHelloWorld(){console.log('hello world')}sayHelloWorld();

The browser will return the same result for both the code. In development, we can use the code in beautifying mode however in production it is advised to use the code in uglify mode. When we perform full minification whole file will be not in a readable format for the human.(may not be the case with above small example).

function c(){console.log("hello world")}c();

So it is advised to minify the code before running the application in the live environment.

An important point to consider while minifying the file is the order of the file, we should make sure first dependencies should be loaded before the actual file.

In the web application. We can use the task runner like grunt and gulp to minify and merge the files before moving to the production server. However, we should configure grunt and gulp tasks in order to get the proper result. There are some other solutions available for this problem namely browsify and webpack. Grunt was a popular couple of years back, Then gulp and browsify dethroned grunt to became popular tool but I believe webpack is in peak and used by many application for build purposes because of its ease of use.