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

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 withVue

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

• The principle of the "single file component" is useful: it allows you to keep all the code related to a component in one place, so it is easier to organize your project. And you don't end up with styles from one component overwriting the styles of another component.
• The documentation is great
• Quick and easy PWA setup
• Vue was not created by a big company like Facebook or Google.
• Packages are awesome!

Examples of packagesused

• axios
• vuewordcloud
• vue-offline
• vue-cropperjs paired with compressorjs
• vue-cookie-law

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 withReact
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

• Learning a "new language", JSX.
• We used the "Class Component" system (I have not used the "Functionnal Component" yet so I have no hindsight on this point)
• The massive React community
• The stability of the library

Examples of packagesused

• actioncable
• react-redux
• react-cropper
• react-quill
• react-lazyload

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 andReact

Loops

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