Everybody hates Web Dev

Everybody hates Web Dev

Understanding why modern web dev is complex...

ยท

5 min read

Introduction

I've always wondered how web development became so complex, and why we needed all these tools and flashy tech like Babel, Webpack, and SASS developers used today. I did a bit of digging and found some worthy reasons. This article will look at how we went from just HTML and JS to npm and modules. Hope you enjoy it.

Cavemen Javascript(CaveScript)

In the not-so-distant days of the early web, we used to download the minified version of 3rd party libraries locally, link it to our HTML and use it in our javascript. It was that simple.

<!-- index.html -->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Example</title>  
  <link rel="stylesheet" href="index.css">  
  <script src="moment.min.js"></script> <!--You need to link the tool in your HTML, imagine doing this for hundred tools that depend on a thousand other tools-->
  <script src="index.js"></script>  
</head>  
<body>  
  <h1>Hello from HTML!</h1>  
</body>  
</html>

So, what is the current need for all these imports, exports, modules, NPM, and Yarn(sounds like Yawn to me) developers use currently?

The web's free-thinkers thought this approach had two problems:

  • Firstly, you had to define everything as a global variable in your HTML. You know how messy HTML can be.

  • Secondly, since the files for use were stored on another site, these files had to be manually redownloaded every time the file had a new version. So this brought about the golden age of tools...

The Age of Package Managers

The much-needed tools came in the form of package managers. Package managers are software that helps us download, use and automatically update libraries of tools in our websites and apps.

There are many popular ones, like Bower, Yarn, and NPM. Since I have only used npm, I'll talk about it a bit. npm stands for Node Package Manager.

npm - The Golden Egg

Most of the web and its modern functionality are made possible with JavaScript. npm, a very sexy and popular package manager allows us to download tools that we use directly in our project. It can also help us update tools by re-downloading a tool every time there's a new update.

These tools are written in Javascript and can only be interacted with in Node. (Tools written in other languages can be accessed through language-specific package managers).

To use npm, you have to specify that your project is a Node-based project i.e Javascript project. In other to specify and work with a Node project, you need to have Node installed on your machine.

You also need to know how to use the command line since that's the only way you can access packages. (Why isn't there a GUI to manage packages ๐Ÿค”).

I'm going to go in-depth in the next article but to get started, you will need a file called package.json that identifies the project as a node project, tracks the packages installed and other nerdy build features your project needs to run correctly.

Do these after installing node and npm

npm init // press enter
npm install package // package is the name of the package you want to install

So after making your project npm compatible, you can easily use tools in your Javascript instead of linking them in your HTML file:

var moment = require('moment');
console.log(moment().startOf('day').fromNow());

Bundlers

Come to think of it, how is NPM, a runtime engine package manager able to interact with the front end?

npm works with the front end through bundlers like Webpack and Browserify. These bundlers track your dependencies and modules, take all the code, and bundle it in a way that the browser can understand.

Bundlers take code in different files and convert it to one kind of file. If you try to run frontend packages made with other technologies, it will fail. This is because the browser only understands browser-compatible languages like JS, WASM, HTML, and CSS.

The browser doesn't even understand how to interact with your file systems, but bundlers take of this problem by replacing file prompts like "require" with the entire files(Don't worry about "require", we will get to it in the next article")

So Bundlers just take these modules and bundle them into browser-compatible languages and formats.

Examples are Webpack, Browserify, Vite, and more...

Transpilers

Transpilers are tools that help you write code without being worried if the browsers would understand it. So basically it takes your newer code, reads it as newer code to updated browsers, and reads it as an older syntax to outdated browsers(or browsers that don't understand that syntax).

One I have used is Babel.

Task runners

These help you automate building a project for local use, optimizing images, and making as many tips and tricks beyond this author's current knowledge. It even helps with testing, an inbuilt npm test feature.

In your package.json file, the scripts section contains these task runners. They are customizable too.

 "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build": "webpack --progress --mode=production",  
    "watch": "webpack --progress --watch" 
  },

Conclusion

In this piece, we looked at tools that were innovated into our cavemen style of web development. We looked at package managers, bundlers, transpilers, and task runners. There are other tools out there, but I felt these few should help you appreciate why you need all this complexity.

In the next article of this series, we will walk through and understand how to make our project compatible with npm.

PS: Do you think all this complexity is necessary? Also, please share this article if you found it helpful, Danke.

ย