Skip to content

ReactJS vs Vue.js - Feedback about two long-term projects

Posted on:March 30, 2022

I don’t think it is really useful to introduce these two frameworks/libraries since you probably already know them. If it is not the case, you can find a quick introduction on those links ReactJS/Vue.js.

Here is a graph of their evolution in terms of Github stars from 2014 to today 📊.

Number of stars on GitHub projects React and Vue (source: https://star-history.t9t.io/#facebook/react&vuejs/vue&angular)

As a comparison, the most starred repository on GitHub is FreeCodeCamp, with over 340k stars 🌟 . It is an open source project with a large codebase and a friendly community where you can learn to code for free with over 8,000 tutorials.

In this article, I will give you my feedback on the use of these 2 frameworks through two projects at Kinoba 💛

DISCLAIMER

The projects I will be talking about started in 2020 and are part of my discovery and learning of main frontend frameworks. I deliberately did not go into advanced technical details to make it accessible to beginners, tech lovers and also experienced developers. Today, I’m working with these two amazing frameworks in my daily life 🙌 .

Vue.js

First steps in front-end frameworks with Vue

My first Vue.js project at Kinoba was made with the Highday project. This platform allows you to describe your professional life in synthetic, graphic and contemporary formats, to share with your community.

The technical stack used is Vue for the front-end and Ruby On Rails for the back-end.

I think that these 2 technologies work really well together: development is super smooth, Vue is intuitive and the learning curve is awesome.

The choice of the framework for this project was mainly made thanks to the growth of Vue, its simplicity of understanding, its lightness compared to others and its growing community. Others criteria came into consideration, such as the possibility to install the app in PWA mode on mobile or desktop devices.

What I appreciated during the development

Examples of packages used

While working on the project, the latest version of Vue (Vue 3) had just been released (Evan You 💚️), with lots of new features. I am already looking forward to start a new project with this new version. 🤩

React

First steps with React The second framework I learned is React, thanks to an event platform.

Unlike the project with Vue, this one required the use of React because the project integrated massive rendering and performance issues. We needed a more complete and robust framework and React turned out to be a perfect fit for this type of project.

We also implemented a custom chat made with actioncable and a custom backoffice for event administrators.

What I appreciated during the development

Examples of packages used

Next time, I hope to be able to test how Functionnal Component works to see the different aspects of using React. I have also heard a lot about Next.js or React Native from several friends, they sound pretty cool 😎

Simple code examples between Vue.js and React

Loops

Loop in React
Loop in Vue.js

I find it so much easier in Vue.

Reading the code becomes quite complicated when you have multiple loops in React. The syntax is too heavy in my opinion.

Conditions

Condition in React
Condition in Vue.js

Same thing for the conditions, I find React’s JSX pretty heavy and if there are too many conditions so it quickly becomes unmaintainable over time.

To conclude…

The learning of the two frameworks was done without too many worries but which one do you think I prefer? 😉

Because of my knowledge of Vue, I did not have too many learning issues with React, and for any problem I had my colleagues as a backup 💪. This is a personal opinion but I prefer to use Vue.js for all the points I mentioned above.

JSX complicates a little bit the readability of the code but it is useful not to have an html, css and a separate javascript file.

Having a separate stylesheet is not so annoying, we still manage to organize ourselves even if some styles may overwrite styles of other components.

In my future personal projects, I would also like to learn the Svelte.js framework which, as its name suggests, greatly reduces the weight of the application once compiled. Indeed, the virtual DOM is not present, which is one less thing to load 🚀. It promises better loading speed compared to other frameworks and as web developers we are always looking for better performance. So, I think Svelte can be interesting in that regard and its popularity keeps increasing.

👋 See you soon @Kinoba