The JavaScript Time Machine

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	💩

🐉 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:

🚚 Package Manager 🚚

npm	yarn	pnpm	bower
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

JSPM

• JSPM provides a module CDN and package management

👟 Task Runners 👟

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

GruntJS	GulpJS
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 lets you require('modules') in the browser by bundling up all of your dependencies
	Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS
	SWC is an extensible Rust-based platform for the next generation of fast developer tools.
	The zero configuration build tool
	Next Generation Frontend Tooling
	webpack is a static module bundler for modern JavaScript applications
	Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex
	???

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 🙏