Web Development

Why does build processes exist for the Front End?

Build processes and tooling for front end development might be a very foreign concept to some developers. "Why does front end web development need build tools? Doesn't the browser runs anything you throw at it?" Let's see why front end build processes is needed.

Lim Xing Zhi

23 Aug 2019 — 2 min read

Why do we need build processes at all?

For most language or platform, build processes exist to do the following:

Configure the target environment
Install external libraries
Parse source into machine code

For example, Java will use Maven or Gradle to install the packages before compiling to Java byte code.

Having a build tool allows the developers to have a more effective environment where they don't have to do everything manually. Imagine having to download a package from the internet and pasting it into your project every time you want to use a certain library or manually changing the token when you want to use the production key for your RESTful APIs.

But browsers parse the source code directly

When we visit a web page, the browser parse and renders the raw HTML/ CSS/ JavaScript files directly, why is a build process needed in that case?

Web development one of the most flexible platforms, but it also means that we have to handle an uncountable amount scenarios. The performance and experience of our application can be affected by:

Network Connection (bandwidth, latency and availability) - Every time a user visits a web page, the entire page is downloaded through the internet to his device.
Device performance - Unlike games or app marketplaces, it is difficult for web developers to specify and impose things like minimum hardware requirements for network speed or screen resolution.
Platform Support - Each major browser engine will have their interpretation of the HTML specifications and varying levels of API support.

Introducing Optimization

To tackle the above issues, web developers often strive to achieve as much optimization as possible before releasing their web page into production. Such examples include:

Transpiling - Translating newer features of a language to an older version which more browsers support. Could be JavaScript ES6 to ES5 or a CSS preprocessor like Sass to CSS.
Concatenating/bundling - Combining files to reduce the number of network requests required.
Minifying - Removing unnecessary white spaces and indentations to reduce network package size.
General Tasks - Optional optimization tasks might be done too, such as compressing images, generating documentation, adding source maps for debugging.

To conclude

Web development is an ever-evolving platform. The standards change fast but browsers often implement those changes very slowly. Having a build tool helps to manage these complexities. The developer will have to write his source code once and the build process ensures that his web page will be able to run on multiple DOM implementations, varying network conditions while being fast and reliable.