What's with all of the JavaScript Frameworks?

Technical Debt

I feel like I just learned create-react-app and then the next time I went to build a React app, the recommended route was not to use it anymore.

I briefly toyed with learning Angular but I didn’t enjoy it. It’s actually more different from React than I was expecting. I wasn’t sure what the point of these competing frameworks was, so I dived in, had a read, tried a couple, and ended up using Vite.

I like Vite, but is it Technical Debt?

I do like Vite; it does seem faster and lighter than using create-react-app. I haven’t really come across too many issues that I couldn’t figure out, either with my own knowledge, Stack Overflow, or an LLM chatbot.

But I don’t know if I am learning a product that is not going to be recommended in a couple of years. So, how much commitment do I want to put into it when it may vanish in a few short years’ time?

Diverse Needs and Use Cases

Different projects have different requirements. Some may need a lightweight framework for a simple web page, while others require a robust solution for a complex enterprise application. Various frameworks cater to these specific needs, providing specialised tools and features that make development more efficient and effective.

Community Innovation and Preferences

The JavaScript community is highly active and incredibly innovative. Developers are continually experimenting with new ideas and approaches to solve common problems more efficiently. This spirit of innovation leads to the creation of new frameworks that often introduce unique concepts, methodologies, or improvements over existing solutions.

It also seems to breed competition, sometimes negative, and there’s a lot of tribal attitudes amongst JavaScript developers.

Learning and Documentation

Frameworks that offer clear documentation, tutorials, and a gentle learning curve can attract more developers. Vue, for instance, is known for its excellent documentation and ease of learning, which has helped it gain a significant user base.

The flip side of this is that my personal experience with Angular did not offer clear documentation and tutorials. I found it quite frustrating to get to the end of the problem. In fact, I was so frustrated that I abandoned the project and started again with Vite/React.

Where Does Vite Fit Into This?

Developed by Evan You, the creator of Vue.js, Vite addresses several pain points associated with traditional build tools like Webpack.

Vite is not a framework like React, Vue, or Angular; rather, it is a build tool and development server.

Vite aims to provide a faster and more efficient development experience by leveraging modern browser capabilities and optimised build processes. It focuses on improving the development server experience, bundling, and build times.

Key Functions of Vite

Development Server

Fast Cold Starts: Vite serves your source files directly using native ES modules, leading to significantly faster cold starts.

Hot Module Replacement (HMR): Vite offers instant HMR, which means changes are reflected immediately in the browser without a full reload.

Build Tool

Optimised Bundling: For production builds, Vite uses Rollup under the hood, along with ESBuild for faster JavaScript and TypeScript transpilation.

Code Splitting: Vite supports code splitting out of the box, improving the performance of the final application.

Configuration

Minimal and Flexible: Vite has a minimal configuration setup with a single configuration file (vite.config.js or vite.config.ts), which can be easily extended with plugins.

How Vite Differs from Frameworks Like React

Purpose

Vite: A build tool and development server. Its main purpose is to improve the development experience by speeding up the server start time, hot module replacement, and production build processes.

React: A JavaScript library for building user interfaces. React provides the building blocks for constructing complex UIs using a component-based architecture.

Scope

Vite: Focuses on the tooling and build processes. It can be used with various front-end frameworks and libraries, including React, Vue, Svelte, and others.

React: Focuses on the view layer of web applications. It defines how UI components should be structured and updated but does not handle build processes or development server tasks directly.

Integration

Vite: Can be integrated with multiple frameworks. It provides plugins and presets for frameworks like React (via @vitejs/plugin-react), Vue (via @vitejs/plugin-vue), and others.

React: Can be used with various build tools, including Vite, Webpack, Parcel, and others. React itself does not provide build or server functionalities.

Ah, So That’s Why I Like Vite, Because I’m Still Using React

I actually started down this route somewhat confused, thinking that Meta had ditched React, moving instead to Vite, and because they did, so should the rest of us. I thought that what I was getting into was a replacement for React, not a new way of working with React.

I timidly got stuck in, because firstly I didn’t know if I was going to get stuck again, like with Angular, or if it was worth learning something new again when there were so many React jobs out there. The more I got stuck in, the more I felt comfortable and the more I realised I was doing the same as I’d done with create-react-app, with only the setup being the main difference.

I’m now up to speed with Vite, at least for my level. I am enjoying churning out projects using Vite/React and am speeding up. In fact, I even converted some of my PHP/Laravel projects into Vite/React because of other benefits I get with JavaScript-based sites, mostly the ease and low cost of deployment versus a PHP site, which takes me less time to build but more time to deploy and maintain afterwards. But that is probably just a me problem.