Vite it.

21 Nov, 2021

5 Mins Read

The natural progress of the frontend tooling. Whether you like it or not, change is here to stay. At the moment the frontend frameworks have reached a point, where we need something else to have a better Developer Experience.

Applications were always like this and will remain like this.

What could change is how we write these applications. Divisions have been made to separate the concerns. However in frontend, we had put very little effort in terms of development for a long long time. We had Flash for a long time. It did its job, but in native browser the whole thing changed when jQuery entered. Almost all websites were made with jQuery.

The frontend frameworks exploded!

Almost everyday, we get a new framework. Every framework claimed to be better than the other. Slowly the storm settled down to small libraries like React and Vue. Of course there are bigger frameworks and they solve more problems as per their claims. But the truth is these little libraries have an impact as jQuery. From small projects to large ones today are using React in one way or other.

These libraries solve a problem and solve it well. Instead of a general purpose framework trying to please the corporates, React and Vue focused on the problem itself and solved it.

We have a stable enough platform now in terms of library. It solved the problem in hand but the developer experience is still suffering.

Entering the next phase of browsers

This is a matter of laugh now. Since we have not many browsers today! On surface level we still seem to have all the browsers that we had for a long time, but in reality they all are some form of Chrome Browser. Microsoft Edge, Opera, Chrome, Brave all are same. So we have only Safari, Chrome and Firefox. Again Safari and Chrome kind of same only.

Basically it is a two browser game. Chrome and Firefox.

The standards are also not very different. So it is easy now than ever to make something else a part of browser, which could support modern Javascript Applications and still make better Developer Experience. And now we have Native ES Modules in all browsers. This is a huge change since the beginning of the internet.

Entering the next phase of Javascript

The early javascript applications (frameworks and libraries) tried to solve the problem by creating module systems in Javascript. Majorly two standards are popular, CommonJS and AMD. There are popular frameworks which used one or the other standard. There came a time, when people want to use one framework written in one standard to be used in another standard. There are many bridges created to solve these kind of problems. All in all, a lot of hard work.

Now all the browsers are supporting Native ES Modules. Which is just native to the browser. The next generation of applications will be utilising this in one way or the other.

We are in a time waiting to be exploded with next set of tools in Javascript ecosystem.

Currently all the tools are compiling the javascrcipt to one of the two formats CommonJS or AMD. But the next tools might not need to do this at all. One such thing is RollUp. It just compiles to the Native ES Modules. What Babel does for Javascript interms of compiling the modern Javascript syntax to the javascript of today’s browser, RollUp is doing the samething but for Modules in Javascript.

Vite

For a long time and still today majority is using webpack. It does its job well and we needed it. But now we have better options. For React applications, Create React App made a huge difference in terms of Developer Experience. All most all the projects which use React are using Create React App. It made the life of a developer and team much better. Once can just start working on a full React application within seconds. All the internal bindings of the different tools are taken care of.

With the modern browsers, we could do better today and Vite makes it.

It not only does all the things that a developer needs to do for a React application, but it does it well and fast.

I took Vite for a ride and now thinking how can I not use it on all my development work today! It just works like Create React App but it is fast. I could use all the libraries and dependencies that I was using but it it fast and just works. The reason is how Vite is written and what is uses. That is another story, but today you have to Vite it to know it.

Migrating a project from Create React App to Vite does not take a long time and it is as simple as it could be. Simply put the next generation of tooling are here in Javascript land. I expect we will see more innovation in this space in coming times, but today we could Vite. Why I compare it with CreateReactApp is Vite has almost everything bundled together just to start working in a React application. Currently we do not have a functionality like Eject in Create React App, but who really ejects their application?!

Happy Coding.