The JavaScript Time Machine
Tags: javascript, node, tooling, webdev
Published: 2022-07-10 06:33:16

### _Past, Present, to infinity and beyond_
------------------------------------------

When developing a web application or `node.js` application, we run a command something like this or something similar to it:

```
npm run start
```

---

We, developers, forgot that behind the scenes of this small command, it's an ecosystem, and it's running for us a lot of processes; this is what I call build tools.
It doesn't matter if you are running `TS`, `JSX`, or any language when writing your code; we also forget sometimes that the code we are developing in our local machine is not the same code we will deploy on production.
Take with me a time travel to the build tools history and see how we used to write an application and how these tools are evolving and changing the way we development our apps today

### 🍦 The vanilla way 🍦

In the past, when you were developing a web app, you wrote your code and added a script tag to your HTML file, and you were ready to deploy.
If you want to add a new library, you need to:

- Go to the website of the library, 
- Download the library, 
- Copy the file to your folders assets
- Add a new script tag  to your HTML file

You have to repeat/redo the same steps for every new library/file you want to add, and in addition, sometime you will finish with an HTML file containing an extensive list of scripts tags, which is not very friendly way to do it


| Add script Tag      | Another script Tag | 💩 |
| ----------- | ----------- | -------- |
| ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_thumb,g_face,w_500/v1657007852/TimeMachine/carbon_ajreai.png)   | ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_500,w_500/v1657008255/TimeMachine/carbon_2_jqymrw.png)| ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_500,w_500/v1657008533/TimeMachine/carbon_17_f45vwz.png) |

## 🐉 2009 The rise of Node.js 🐉

`Node.js` was released to the community in 2009; this brought with it the first version of `npm` and an easier way to install and maintain packages and their versions, but all the issues for web development were solved?
Not quite, we have to remember that:

**_JS moduled uses syntax like:_**
**_"module.exports" and "require"_**
**_the browser did not support that_**

But also, at the time, a lot of tools started to pop around the community, I divided them into four types:

![Tool Types](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeg94hsezr175k66pomm.png)


### 🚚 Package Manager 🚚

| npm     | yarn       | pnpm       | bower      |
| -------| ------- | ------- | -------|
| ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657010777/TimeMachine/npm_jgxtjq.png) | ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657010786/TimeMachine/yarn-package-manager-logo-outline-kitten-in-blue-circle-vector_ytesil.jpg)    | ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657010782/TimeMachine/pnpm_wu1nxu.png) | ![The vanilla way](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657010886/TimeMachine/687474703a2f2f692e696d6775722e636f6d2f5755665a7332522e706e67_by0ss1.png) |
| Default package manager  | by Facebook, fix scalability issues npm had  | Install only one copy of the package on disk | First package manager for the web |


### 📜 Script Loaders 📜

#### RequireJS
- Was very popular. The idea was to provide an asynchronous module definition and build on top of that. 
- The most significant attraction was `AMD`. It introduced a "define" wrapper.
- `AMD` : Asynchronous Module Definition
- Now `RequireJS` seems more like a curiosity now
![RequireJS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k17w6ezyt6igtfwd4kmp.png)
 
#### JSPM
- JSPM provides a module CDN and package management 
![JSPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ms0yyoddjhoqf5pgkyr.png)

### 👟 Task Runners 👟

Why use a task runner?
In one word: automation. The less work you have to do 
when performing repetitive tasks

| GruntJS | GulpJS |
| ------- | ------ |
| ![GruntJS](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657012834/TimeMachine/gruntjs_logo_ka98pf.png) | ![GulpJS](https://res.cloudinary.com/omher/image/upload/c_limit,h_100,w_150/v1657012776/TimeMachine/png-clipart-gulp-js-npm-computer-icons-javascript-sass-java-script-template-logo_izdkvx.png) |
| The JavaScript Task Runner | The streaming build tool |


### 📦 Bundlers 📦


🥜 In a nutshell: A bundler is a development tool that combines many JavaScript code files into a single one that is production-ready loadable in the browser.
Also, these tools have been evolving here, and we have so many tools to choose from; here is a list of the most relevant bundles in the community.
Browserify is an exception in the list; this bundler is not in use anymore but was the first released to the community.

| Bundler | Comments |
|------|------|
| ![Browserify](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657025907/TimeMachine/Browserify.svg_qpdcbq.png)   |  Browserify lets you require('modules') in the browser by bundling up all of your dependencies   |
| ![Rome](https://res.cloudinary.com/omher/image/upload/c_scale,w_50/v1657025933/TimeMachine/rome-tools-logo_weywfs.png) |  Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS |
| ![SWC](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657025946/TimeMachine/swc_logo_wycc3h.png) |  SWC is an extensible Rust-based platform for the next generation of fast developer tools.   |
| ![Parcel](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657025956/TimeMachine/parceljs_jle91u.png) |  The zero configuration build tool |
| ![Vite](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657025970/TimeMachine/vite-logo_bvbo8e.png) |  Next Generation Frontend Tooling |
| ![Webpack](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657025973/TimeMachine/webpack_agr6rk.png) |  webpack is a static module bundler for modern JavaScript applications |
| ![RollupJS](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657026003/TimeMachine/68747470733a2f2f726f6c6c75706a732e6f72672f6c6f676f2e737667_o2cbjf.png) |  Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex |
| ![Man Shrugging](https://res.cloudinary.com/omher/image/upload/c_scale,h_50,w_50/v1657034250/TimeMachine/man-shrugging_1f937-200d-2642-fe0f_n0ozic.png) |  ???   |

## The Future of JavaScript Tooling 🛠️
Is _Rust_ 🦀 the future of JS Tooling ?

There is a lot of buzz around Rust in the web development community, and some tools have been developed using Rust.
I think we are still in the early steps to know if this will be the standard for developing JS tooling, it will depend on the adoption and if the web community is ready to learn a new language.
But here are some examples og tools using Rust:

- _Next.js_  12 uses SWC and Rust
- _Deno's_ linter, code formatter, and docs generator are built using SWC
- _Parcel_ improved overall build performance by up to 10x with SWC
_Rome_ will be written in Rust
_dprint_ built on SWC, a replacement for Prettier?


Thanks for reading 🙏