Webpack, Babel, CRA and VITE: What, Why and How?
In today's digital age, everyone wants a website, and web development is at the forefront of meeting this demand. The internet's evolution, increased device usage, and the growing importance of online presence for businesses and individuals have fueled the surge in web development. With the rise of tools like React and Angular, creating impressive websites has become more accessible for developers. Collaboration in open-source communities and a focus on design have further shaped the field. In this interconnected world, web development stands as a crucial force, ensuring that people enjoy engaging and seamless online experiences.
But how did we arrived at this position? What made web development so handy for the developers.
Early Days of web development
Let us get into the basics of web development.
How are websites made or how were they made before fancy frameworks like React(that’s debatable), Angular, Vue, etc. came into picture?
Simple answer HTML,CSS,JS.
That’s it. That is it.
We only need to know these 3 technologies and it is possible to make the frontend of any website which exists in this world. Although it is definitely not an efficient way to do so, but we will come to this later on. We write code in HTML,CSS,JS and send it to the browser. Browsers only understand these 3 technologies and display your website accordingly.
Problems with the Web Trinity
How do we write code in HTML, CSS, JS? What is the structure?
Index.html
Styles.css
Script.js
Pretty simple right ?
Or is it?
Let us say hypothetically you are writing a social media application. Let us say Instagram, how many lines of code do you think you will require to make the entire UI?
100s ? 1000s? 10,000s? 100,000s ?
Maybe yes!
Will you write all that code in script.js file ?
A 100 thousand lines of code in script.js file will increase your problems instead of solving it.
So you will tend to split into multiple files. Let us say you use 100 files each containing 1000 lines of code.
How will you inject this code to the html file?
Obviously <Script> Tag, right?
Yes, but there is a problem!
You have to maintain the order. How? Let me explain with an example.
Let us say this is the order you have put in your html file.
So when you write code in your Script1.js you have to be cautious since you will not be able to use any code written in the files attached below it.
Imagine you’re writing the code of Liking a post.
What is the flow? First add the like to the post and then show it in the frontend to the user. The problem is if you have written a function to like the post on script1.js and you are calling another function to update the frontend, it must be in a file attached above it.
This is an issue, because it creates a lot of unnecessary mess.
What is the solution ?
One common solution to mitigate this problem is to use a module system like CommonJS or ES6 Modules. With modules, you can explicitly define dependencies and ensure that code is executed in the correct order. For example:
Here even if we have put Script2.js above Script1.js we are able to use the functions of Script1.js in Script2.js by making scripts of type module.
But again there is a problem , all browsers don’t support ES6 Modules fully so you need to fix this issue also.
How can we do that, we come back to the first solution, write all the code in one file, 100,000 lines in one file.
Is there any other way to solve this problem.
I guess yes.
Webpack.
Webpack
Webpack is a popular open-source JavaScript module bundler. It takes your project's files, such as JavaScript, CSS, and images, and bundles them together in a way that's optimized for the web.
Basically it takes all your 100,000 lines of code written in different files, transpile them and bundles them into a single file which you can attach to your index.html file and send to the browser.
How do you use it? Simple .
You need to create a webpack.config.json file where you will tell the webpack about all your files, which it will convert it to plain Html, Css, Js.
You can also use modern technologies like handlebars templates, Saas etc. with help of webpack.
But wait a minute, as we know not all browsers support newer versions of JavaScript, few browsers require older versions of Javascript, if we write a newer version of JavaScript, some browser might not be able to understand it.
For example arrow functions
Not all browsers are able to interpret this syntax. We need to solve this issue.
Babel Spawned
Babel
Babel is a widely used JavaScript compiler that allows developers to write code using the latest ECMAScript (ES) standards and features, and then transforms or transpiles that code into an older version of JavaScript that is compatible with a broader range of browsers
With the help of babel we are able to write modern javascript in our websites and the browser will still be able to understand.
We just have to compile the javascript file with the help of babel and attach the compiled file to our html page.
So with the help of babel and webpack we will be able to write all types of websites and run them in any browser.
Birth of Frameworks
All was Hunky dory till now, until people started trying to make new frameworks , backbone, angular and react came into picture.
But why frameworks?
Frameworks made it easy to write complex websites in an organized manner with features like state management, SPA , reusable components etc.
React JS
Among all the frameworks invented till now, REACT surpasses every one of them. React, which is arguably a JavaScript library, provides a proper structure to create a single page application with state management and reusable components.
React was initially trolled earlier because it created unnecessary mess while writing code with the problems like unnecessary re render and 100s of dependencies but it was eventually adopted by developer community with time and its popularity is quite visible nowadays.
React is a framework which makes it easy for you to write components especially with the introduction of JSX ( JavaScript XML ). JSX allow us to write HTML code in javascript.
But the problem was browser don’t understand anything apart from the web trinity(HTML,CSS,JS). That is why it is important to use Babel and webpack to convert the Jsx syntax to the browser understandable web trinity. @babel/preset-react is used to compile the jsx to javascript which is then run in the browser to make your website visible.
WebPack is also used in react to bundle all the files on build.
We need to configure webpack and babel in order to use react to make websites.
CRA and VITE
But there was a problem. Setting up a React project used to be a headache for developers. They had to juggle various configurations, dependencies, and build tools, making the process time-consuming and stressful. For newcomers, especially, getting everything right—like dependencies, webpack, and babel—was overwhelming.
In response, Facebook introduced a lifesaver: a new command-line tool to simplify the creation of React applications. The idea was to take away the hassle. This tool, known as Create React App (CRA), was designed with simplicity in mind. It provides a ready-to-go development environment, meaning developers don't need to fuss over manual configurations or setup of build tools. It's like a shortcut, allowing developers, both seasoned and new, to dive into building React applications without getting bogged down by the nitty-gritty details.
CRA is all about making life easier for developers. It's a straightforward solution to a problem that used to eat up a lot of time and energy. With CRA, starting a React project becomes a breeze, giving developers more time to focus on what they love—writing code and bringing their ideas to life.
However, as projects grew and evolved, some developers found problems with Create React App (CRA).The tool's opinionated nature, while initially helpful, became restrictive for those who wanted more control over their project configurations. One of the criticisms leveled against Create React App (CRA) was its perceived slowness, particularly as projects scaled in size and complexity. CRA relies on a traditional bundling approach, which involves packaging all the code and dependencies into a single bundle before serving it to the browser. As the project grows, the time it takes to bundle and rebuild the entire application increases, leading to slower development feedback loops.
Using CRA was troublesome for developers until 2020 when Evan You decided to come up with VITE.
According to official docs, VITE is a build tool that aims to provide a faster and leaner development experience for modern web projects. It is not a React specific tool but it is also used to set up React projects in a fast and quick manner.
Unlike a CRA or bundler-based build setup, VITE does not build the entire application before serving. VITE prioritizes speed and faster feedback in development mode unlike the CRA. VITE became so revolutionary that today even react recommends VITE setup over CRA.
References:
Google.com
Chatgpt.com
Afeef's Brain
