Through my experience with Angular, I have become a fan of Vue! We currently use AngularJS 1 for Fundebug, and frankly, the learning curve is pretty steep.
- Why We Moved from Angular 2 to vue.js (and Why We didn’t choose React)
- Translator: Fundebug
In order to ensure readability, free translation rather than literal translation is used in this paper, and a lot of modifications are made to the source code. In addition, the copyright of this article belongs to the original author, and translation is for study only.
At Rever, we just released a completely rewritten website using vue.js. After 16 weeks of intense development, a total of 641 commits were made. Looking back now, I feel that I made the right choice to frame at that time.
Eight months ago, we were doing web development with Angular 2. To be more precise, we used Angular 2 Beta 9. Frankly, the product was developed by an outsourcing company, and we were never happy with every aspect of it. UX/UI, architecture, and even Angular 2 itself.
Before I go any further, I’ll admit that Angular 2 Beta 9 and Angular 2.0 are completely different products, but that’s part of the problem with Angular. From Beta 9 to 2.0.0, there were 8 beta releases, 8 RELEASE candidates, and 2.0.0 itself. In other words, if you want to update to 2.0.0, you need to upgrade 17 versions. We also tried to upgrade from Beta 9 to 2.0.0, but the update was very complicated because so many dependencies were broken. At the same time, we started asking ourselves if Angular 2 was the right choice, because the Angular development team had already started Angular 4. When we finally fully update to 2.0.0, we will need to consider how to update to Angular 4. What a waste of time, what a waste of energy!
What we didn’t like, and still don’t like, is that Angular 2 uses Typescript as the default development language. I know Angular 2 can use JavaScript directly, but using JavaScript in Angular 2 is almost like rewriting the entire project. I don’t think Typescript adds value to development, or worse. I found that our coding speed actually slowed down. Things that are simple in JavaScript, such as defining an object, become complicated with Typescript. Before you decide to use Typescript, I strongly encourage you to read these two articles. Typescript isn’t the best choice for everyone.
- The Shocking Secret About Static Types
- Angular 2 vs React: The Ultimate Dance Off
I remember how easy it was to use Angular 1. It has its problems, but it’s really easy compared to other frameworks. Angular 2 throws away the benefits of Angular. For Angular 2, my conclusion is simple: Angular 1 and Angular 2 are the relationship between Leifeng and Leifeng Pagoda.
So, if you think about it, we had to update 17 versions on an untested system while implementing new features. The current code itself had a lot of bugs, and the quality of the code was poor. After all, most of the developers were no longer on the team, and I was the only one who had to deal with many problems at the same time. In order to use Typescript correctly, I need to find the right documents everywhere. Angular 2 has already upgraded Angular 4, but I haven’t even upgraded Angular 2 yet. Too many negatives quickly add up.
So we made the decision that if the upgrade took too long, we should consider other options.
-
React: The first and most obvious choice is to use React, because everyone is using it, and if not, then talking about it. Plus, it has Facebook behind it and doesn’t have to worry about maintenance. However, React itself is not a framework, and you need to add something extra if you want to use it.
-
Vue.js: Vue.js is a new player, I have never heard of it before. Although the front-end framework had been updated to version 2.0 by the time we surveyed it. Vue.js is very attractive, but also feels a bit risky.
The decision-making process
We listed all the indicators:
- stable
- Have a strong community or backend support
- Good documentation or plenty of q&A on StackOverflow
- Easy to learn
- And the Bootstrap compatible
- Small volume
- Preferably reusable code
- Coding speed increase
- Reactivity
- The component type
Next, I use React and vue.js to give an assessment myself, rather than Google telling me the answer. I’ve never used React and vue.js before. We they rewrote the following part:
- Some basic API calls
- Different layouts for two different pages
- The part that interacts with the user
- Login forms and other expressions
- A Bootstrap modal box
After just a few days of using vue.js, I was already amazed that I was able to complete a Demo for the CTO and the rest of the team. I have a good understanding of the basic concepts of vue.js, defining an extensible architecture. Most importantly, I really like writing code using vue.js, which I can feel is significantly faster than React.
React is harder than it seems, and choosing between Redux and MobX isn’t as good as having a perfectly integrated solution, like Vuex with vuue.js. If you have no experience with a framework, make the initial decision easy. If you know that there is an official library for the framework, you will feel more confident. At the same time, I think Vuex is faster than Redux, which is probably just a personal feeling.
JSX is also a problem because we can’t reuse HTML, not enough vue.js to allow us to do so to some extent. I don’t like inline templates, and React mixes JSX/HTML with JS. I’ve always believed that separating the different features was the right thing to do; it just looked ugly.
The encoding speed
The code speed with vue.js is much faster than React because there is no need to learn JSX. Also, when a new developer joins the team, he can hit the ground running with just an hour of training. This is very important to us. Open a Vue file that contains tags that use HTML similar to Angular 1. A VUE file also contains styles and JavaScript sections. You only need to learn a little bit of vue.js basics to understand them.
The document
Good documentation is also important for rapid development. The Vue. Js documentation is awesome! Instructions, examples, questions, and API documentation are clear. Almost every question you encounter during development can be answered through documentation. We began to worry that many of the questions were in Chinese, only to find that all the materials were available in English.
Ask other people
After a week of thinking about it, I think vue.js is pretty good. But the people around are not used, unable to give pertinent advice. The only comment I get is “it looks cool, but I’ve never used it”. React gets the most attention, Angular 2 gets the second. I started looking for local developers who were using vue.js and found one, which made me feel more than alone. Also, my technical community is so small that I didn’t notice who was using vue.js in production.
The mobile terminal
When we were considering whether to choose vue.js or React, we also considered rewriting our mobile terminal. React Native seems like a good choice. If we do decide to use React Native as a mobile app, we can reuse both desktop and mobile code, which is a big plus when we decide to use React. However, I ultimately decided not to consider the possibility that this might not happen. From my experience, using Node.js has allowed me to reuse a lot of code on both the front and back ends.
Copyright licensing
As I write this blog, there is a lot of discussion online about Facebook changing the React copyright license to BSD+Patent. According to Facebook, this license protects them from patent trolls. It wasn’t a major factor in our decision, but if you use React and React has a copyright issue, you don’t want to hear about it either.
On the other hand, Facebook is arguably a burden rather than a help to React. This is why it is better to have an independent fund or organization to maintain open source software projects. IBM made a good example when they bought Strongloop and donated Express.js to the Node.js Foundation. The pressure from the community and the expectations of IBM kept the software well maintained. Twitter is another good example. They distribute Bootstrap under the MIT protocol so that no one ever talks about copyright issues with Bootstrap again.
conclusion
I did some research on the Internet before I made my final decision. A developer survey of the current state of JavaScript caught my eye. I admit that the author did not use a very rigorous scientific method to investigate, but he provided us with a lot of very useful information. If you want to read The original, click on The State Of JavaScript: Front-end Frameworks.
| measure | Angular 2 | React | Vue.js |
|---|---|---|---|
| stable | is | is | is |
| There is a strong community | is | is | Also is not big enough |
| The backing | Laravel and Alibaba | ||
| The document is clear | is | is | is |
| Easy to use | In general, Typescript is hard to learn | You can also | is |
| Bootstrap can be integrated | is | is | is |
| The size of the | 566K | 139K | 58.8 K. |
| Easy to reuse | is | Only CSS | Yes, HTML and CSS |
| The encoding speed | slow | general | fast |
| Reactivity | You can also | fast | fast |
| Based on the component | is | is | is |
Overall, vue.js won out in our assessment. There are lots of q&a on StackOverflow, the official documentation is clear, the code is small, it integrates perfectly with Bootstrap, and it’s powered by Laravel and Alibaba. The community isn’t big enough, but it’s big enough.
Choosing vue.js was the right choice, although it took me a while to convince the CTO. I am grateful to him for always asking useful hard questions so that I can make sure my decisions are 100% correct. If MY decision is really wrong, I will regret it very much. I think he wasn’t really fully convinced of the capabilities of vue.js until he wrote a component himself and found it quite easy.
I’m not saying React is bad, I’m blown away by how big a community it has. It has its benefits, jQuery has a larger community, but it doesn’t make it a good framework/library that we want to use. We want simplicity, and vue.js has that. If you are still not sure, read the article Comparison with Other Frameworks.
Are your users experiencing bugs?
Experience the Demo
Free to use