Why should I immediately abandon React and use Vue?

In this article, I’ll explain some of my thoughts on Vue’s popularity and why it’s outpacing its competitors. Since Vue’s design philosophy and features are very similar to React’s, I’ll compare the two and show why React (even though it’s a good framework) is often deceptive.

1. Evolution of Web development

Back in the 1990s, web writing was just PLAIN HTML with some simple CSS styles. The advantage is that it’s very simple. The downside is the lack of many features.

Then came PHP, and we were happy to write our code like this:

While this code looks terrible today, it was a big improvement back then. This progress is still the same today: we choose new languages and frameworks that we like until better competitors emerge.

I used Ember before React. Then I switched to React, and the way it treats everything like a Web component, its virtual DOM, and efficient rendering was refreshing to me. It’s not all perfect, but it’s a huge improvement in the way the code is written.

I decided to switch to vue.js instead of React.

React wasn’t bad, but I found it unwieldy and hard to learn, and in places the code seemed completely illogical. Vue’s approach to these issues made me feel at ease.

Let me tell you why.

2. The performance

First, let’s talk about performance.

Every Web developer faces bandwidth constraints, so the size of a Web page is important. The smaller the page, the better. Now, thanks to the popularity of mobile browsers, the issue is more important than it was a few years ago.

Let’s look at a set of numbers:

The Vue library is 25.6KB in size. React DOM + React Router + React and other plugins are required for the React architecture to achieve similar functions, totaling 48.8KB.

One point for Vue.

The actual performance is shown in the following figure:

As you can see, these performance tests show that Vue takes up less memory and runs faster than React.

Vue’s rendering pipeline is faster, which is useful when building complex applications. Project rendering is more efficient, so you don’t have to worry too much about optimizing the code, so you can focus more on features that are really useful to the project. It also works well on mobile devices, so you don’t need an algorithm to render it more smoothly on mobile.

When switching from React to vue.js, you don’t have to compromise on size or performance. You can have both.

3. Learning curve

React is not bad. The whole library is built around Web components, which is good. React’s core is good and stable, but I never quite figured out its advanced routing configuration. What do so many routing library versions do? The current version is 4 (+ react-router-dom), but I ended up using V3. Once you choose the version, it works fine, but it’s a pain to learn.

Third-party libraries

Most modern frameworks share the same design philosophy: have a simple, feature-free core, then add other libraries to enhance it. If other libraries can be easily integrated in the same way, building a technology stack is straightforward. In my opinion, the simplicity and directness of this step is very important.

React and Vue both have a set of tools to help you start projects and configure the various tools. In the React ecosystem, various libraries can be difficult to master because there are often several libraries trying to solve the same problem.

React and Vue both do a good job of this.

Code clarity

React code has poor clarity in my opinion. JSX is a disaster for code clarity by allowing HTML code to be embedded in code.

You’ll have other problems, too. Calling a method from a component template often makes this inaccessible and the result has to be manually bound: <div onClick={this.somefunction.bind (this, listItem)} />.

Sometimes React becomes completely illogical…

JSX’s approach is pretty bad, considering that many conditional judgments are likely to be used in your application. It’s more like a joke. Of course you can switch to a template system and remove JSX from the React stack, or you can use JSX in Vue, but that’s not the way to learn frameworks first, so I won’t discuss it here.

Another point is that Vue doesn’t require you to use setState or anything like that. Of course, you still have to define all the state properties in the data method, but if you forget to do so, you will be prompted in the console. The rest is handled internally automatically, and you just need to change the values in the component, just like you would with a normal Javascript object.

React causes a lot of errors. Even if the principle is simple, these mistakes can slow down learning.

As for simplicity, the code written in Vue is much smaller than that written in other frameworks. This is the best thing about the Vue framework. Everything is simple, complex functionality can be written in a few lines of easy-to-understand code. With other frameworks, you write 10, 20, even 50 percent more code.

You don’t have to learn much to use Vue. It’s all very intuitive. Writing vue.js code is the closest way to expressing ideas.

This ease of use of Vue is a great tool to make it easy to embrace and communicate with the team. Whether you need to change other parts of the tech stack, add more people to your team in an emergency, or explain your product, Vue can save you time and therefore money.

Time estimates are also easy, because features don’t take longer to implement than the developer estimated, leading to fewer misunderstandings, errors, or optimistic estimates. Vue has fewer concepts to understand, making communication with project managers easier.

4. Conclusion

In terms of size, performance, simplicity, and learning curve, embracing vue.js is definitely the best option right now for both time and money.

Its lightness and performance allow you to use both frameworks (such as Angular and Vue) in your project, making it easier to port to Vue.

As for community and popularity, even though Vue is getting a lot of attention right now, it’s hard to say it’s as popular as React. But the fact that a framework without the support of a major IT company has become so popular is noteworthy in itself. Its market share has rapidly grown from a little-known project to one of the biggest contenders in front-end development.

The number of modules on Vue is also growing by leaps and bounds, and even if you can’t find the one you need, it doesn’t take too long to write one yourself.

This framework makes it easy to understand, share, and edit. Not only is it easy to read someone else’s code, it is also easy to modify someone else’s implementation. With Vue, I was able to confidently handle sub-projects and changes made by outsiders in just a few months. It saved me time and allowed me to focus on system design.

React is designed to use helper functions such as setState, and there are bound to be programming moments when you forget to use them. It also takes a lot of effort to write templates in a way that makes the project difficult to understand and maintain.

With React, you need to master other libraries and teach your team how to use them, considering using these frameworks in large projects. There are all sorts of related issues to deal with (a doesn’t like this library, B doesn’t understand that library, etc.). The Vue stack is simpler and more team friendly.

As a developer, I feel happy, confident and free. As a project manager, I can plan and communicate with the team more easily. As a freelancer, I save time and money.

Of course, there are many requirements that Vue doesn’t cover (especially if you’re building native apps). React does a good job in those areas, but Evan You and the Vue team are already working on these issues.

React is popular because of its good concepts and the implementation of those concepts. But now it looks like the concept is a mess.

Writing React code involves juggling AD hoc countermeasures all day long (see the section on Code Clarity), trying to write code that makes sense, only to end up with a mess of solutions that no one can understand. Even for yourself, the solution will be hard to read after a few months. You have to work hard to deliver a project, and all you get is something that is hard to maintain, full of bugs, and requires a lot of training to fix.

These are negatives that no one wants in a project. Why deal with all this trouble? For community and third-party libraries? We suffer too much for a small portion of the good, and even that small portion of the good is becoming less and less important.

React used to make my life easier, but in some ways it made implementation more complicated. Years later, Vue finally set me free. The implementation is pretty close to what I imagined development would be, and there’s basically nothing else to think about except what needs to be implemented. It looks a lot like native JavaScript logic (no setState, no special uses for conditional constructs, and no algorithms). Just write the code the way you want. It’s fast, it’s safe, and it makes you happy. I’m glad to see Vue gaining more acceptance among front-end developers and companies, and I hope it ends React’s dominance.

Disclaimer: This article is my personal opinion and only expresses my current opinion. As technology advances, these views change (for better or worse).

https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2

Gwenael P, front-end engineer, Vue. Js enthusiast.

Translator: Crescent Moon, Edited by Tu Min