• Why I left React for Vue.
  • By Gwenael P
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: EmilyQiRabbit
  • Proofreader: luochen1992, Moonliujk

[Random open Source profile of the day: sourcer.io /posva]

Recently, vue.js got more stars on Github than React. The framework’s popularity has skyrocketed recently, and since it’s not backed by companies like Facebook (React) or Google (Angular), it’s surprising to see it rise from nowhere.

The evolution of web development

Back in the good old days, back in the ’90s, we wrote web pages, just PLAIN HTML, with some simple CSS styles. The advantage is that it’s very simple. But the downside is the lack of many features.

Then, with PHP, we were happy to write code like this:

Source: www.webplanex.com/blog/php-go…

These seem terrible now, but at the time, they were amazing progress. That’s what it’s all about: using new languages, frameworks, and tools, which we love to do until our competitors do it much better.

Before React became so popular, I used Ember. Then I moved on to React, which abstracted the development we needed into web components, used virtual DOM and rendered efficiently, and I was really impressed with how awesome it was. It’s not perfect for me, but it’s a huge improvement over the way I wrote code before.

After that, I decided to try vue.js, and after that I wouldn’t go back to React.

While React wasn’t terrible, I found it cumbersome, unmanageable, and sometimes the code I wrote seemed completely illogical to me. It was a relief for me to discover Vue and see how it solved some of its React problems.

Let me explain why.

performance

First, let’s talk about volume.

Because all Web developers work with network bandwidth in mind, it is important to limit the size of web pages. The smaller the page, the better. This is even more important now than it was a few years ago, with mobile page views rising rapidly.

It’s actually hard to evaluate and compare React and Vue sizes. If you want to use React to build websites, you’ll also use React-dom. Again, they have a range of different functions. But Vue is known for its lightness, and you may be able to reduce the size of your dependency packages by using Vue.

Here are some data on native performance:

Data source: www.stefankrause.net/js-framewor…

Data source: www.stefankrause.net/js-framewor…

As you can see, the benchmark details that web applications using vue.js take up less memory and run faster than those using React.

Vue will give you a faster rendering pipeline to help you build complex web applications. Because your project can be rendered more efficiently, you don’t have to worry as much about code optimization, which frees up time to focus on the more important features of the project. The same goes for mobile performance, where you won’t need to tweak the algorithm much to keep things smooth on your phone.

When you choose vue.js over React, you don’t have to compromise between application size and performance. You’ll be able to balance application size and performance.

The learning curve

It’s okay to learn React. It’s good to know about a library built entirely around web components. React’s core is sound and solid, but I ran into a lot of problems when dealing with advanced routing configurations. What is the reality of all these routing versions? It’s now version 4 (+ React-router-dom), and I ended up using version 3. Once you get used to the technology stack, it’s easy to choose the version, but painful to learn.

Third-party libraries

Most modern frameworks follow a common principle: the kernel is simple, doesn’t have much functionality, and you can enrich them by configuring other libraries on top of them. Building a technology stack can be as simple as integrating other libraries effortlessly and integrating for each library in the same way. It was crucial to me that this step be as straightforward as possible.

React and Vue both have tools to help you start your project configuration with additional tools. In the React ecosystem, available libraries are difficult to master because sometimes multiple libraries solve the same problem.

React and Vue are excellent in this part.

Code clarity

My point is React sucks. JSX, the built-in syntax for writing HTML code, is a pain in the neck in terms of clarity.

Here’s a general way to write an “if” conditional using JSX:

(
	<div>
	  {unreadMessages.length > 0 &&
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>
	  }
	</div>
);
Copy the code

This is written as vue:

<template>
	<div v-if="unreadMessages.length > 0">
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>	
	</div>
</template>
Copy the code

You will encounter other problems. Calling methods in component templates often fails to get “this”, resulting in manual binding:

.

At some point, using React makes things very illogical…

If you need to write a lot of conditional statements in your application, JSX is a bad way to do it. And to write loops this way is like a joke to me. Of course you can change the template system, remove JSX from the React stack, or use JSX with Vue, but that’s not the first thing to do when you’re learning a framework. It’s not the focus of the problem.

On the other hand, with Vue you don’t need to use setState or anything like that. You still need to define all the state attributes in a “data” method, and if you forget, you’ll be prompted on the console. The rest will be handled internally automatically, and you just need to modify the value of the property in the component as you would with a regular Javascript object.

React causes a lot of code errors. So even though the underlying rules are really simple, your learning process will be very slow.

For simplicity, code written using Vue is lighter than code written using other frameworks. This is actually the best part of the Vue framework. Everything is very simple, and you will find that you can write very complex features with just a few lines of code that is easy to understand, whereas with other frameworks you will use 10, 20, sometimes 50 percent more code.

You don’t need to learn anything extra. Everything is concise and straightforward. Writing vue.js code gets you very close to the simplest path to implementing your idea.

This ease of use makes Vue a great tool to help you adapt and communicate. Whether you want to modify other parts of your project’s tech stack, recruit more people for an emergency, or experiment with your product, it can definitely cost you less time and money.

Time budgeting is also easy, because implementing a feature doesn’t take much more time than developers estimate, resulting in less potential for conflicts, errors, or omissions. There are few concepts to understand, which makes communication with the project manager much easier.

conclusion

Whether it’s size, performance, simplicity, or a learning curve, embrace vue.js, it’s a great choice right now, and you’ll save time and money.

Its weight and performance also allow you to have a web project that uses both frameworks (such as Angular and Vue), which makes it easy to transition to Vue.

Even Vue has more stars now, considering the community and user numbers, but we can’t say it’s caught up with React. But the fact that a framework is so popular without the backing of an IT giant is definitely good enough to look at. In front end development, its market share has rapidly grown from an unknown project to a strong competitor.

Vue-based modules are proliferating, and if you don’t find one that meets your needs, it won’t take long to develop the one you need.

The framework makes it easy to understand, share and edit. Not only do you feel comfortable studying other people’s code, but you can also easily modify their implementations. Over the course of a few months, Vue has given me a lot of confidence in dealing with the project’s subprojects and external contributors. It saves me time and allows me to focus on what I really want to design.

React is designed to require the use of helper methods like setState, and you’ll forget to use them. You will have a hard time writing templates that will make your project hard to understand and hard to maintain.

With React you will need to manage other libraries and train your team to use them as well. This can cause a lot of collateral problems (X doesn’t like this library, Y doesn’t understand that library). The Vue technology stack is much simpler and is of great benefit to the team.

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

Vue still has a lot of uncovered requirements (especially if you want to build native applications). React works well in this area, but Evan You and the Vue team have been working on it as well.

React is popular because of its great ideas and the way ideas are implemented. But looking back, it looks like a bunch of ideas in a sea of chaos.

Writing React code is a matter of looking for solutions all day long (see the “Code clarity” section), struggling with code that already makes sense, and finally cracking it and producing a really ambiguous solution. This plan will be very difficult to read when you look back at it in a few months. You need to work harder to release projects, and it can be hard to maintain, error-prone, and requires a lot of learning to modify.

No one wants these weaknesses in their project. Why do you continue to face these problems? Community and third-party libraries? A few things that become less of a problem each day can save you so much pain.

Vue was a relief for me after years of working with frameworks that sometimes made my life easier and sometimes made implementing a feature much more complicated. The implementation approach was very close to how I planned to develop features, and then there was very little to think about except what you really wanted to implement. It is very similar to native Javascript logic (no setState, special ways of implementing conditional statements, and algorithms). You just code as much as you want. It’s fast, safe and enjoyable :D. I’m glad to see that Vue is being adopted by more front-end developers and companies, and I hope it kills React soon.

Disclaimer: This article is my personal opinion at this time. As technology advances, they will change (for better or worse).

[Edit] The title has been modified with comments from James Y Rauhut.

[Edit] Modified the paragraph talking about comparing frame sizes. As the article points out, estimates are difficult and vary based on requirements, and often lead to arguments between people and frameworks.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.