Compare of React.js and Vue.js - bernardopnunes/SoftwareEngineeringSDUW GitHub Wiki

Group：

Team Wang

Group Members:

• Liang Yuhua (@monicastu)
• Nie Jiayu (@NYYY0421)
• Li Yang (@kuba-ly)
• Sun Weimiao (@Frost2020)
• Deng Wanli (@dengwanli7)
• Pang Yuntian (@KP71)
• Wang Hongzhe (@dzbwwwhz)
• Cao Zidi (@Sean-9)
• Chen Yiming (@schalker-cn)
• Sun Yuze (@Fury1004)

Catalogue

• Brief Introduction
• Advantages and Disadvantages
• Application scenarios
• Prevalence
• Compare in detail
• One same example in Two Ways
• Summary
• Reference

Brief Introduction

What is React.js

React.js (also known as React) is a JavaScript library for building user interfaces. It is an open source JavaScript framework that aims to create compelling and rich Web applications that can run efficiently with minimal coding. React.js focuses on the functionality of individual components, and developers find their newly developed web pages render faster.In addition to having the flexibility to cover extensive usage test exceptions, it also has a large tutorial base and a large developer community that can provide solutions for new developers as well as experienced developers.

What is Vue.js

Vue.js is a set of progressive JavaScript frameworks for building user interfaces.Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.The core Vue libraries focus only on the view layer and are very easy to learn and integrate with other libraries or existing projects.On the other hand, Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.The goal of vue. js is to achieve responsive data binding and composite view components through the simplest possible API.

Advantages and Disadvantages

Vue.js-advantage:

• two-way data binding

This is called responsive data binding. The response here is not the responsive layout in the @media media query, but rather the fact that vue.js automatically responds synchronously to changes in some data on the page.

In other words, vue.js will automatically respond to the changes in the data and modify all the data and view content bound together according to the binding relationship the user has written in the code in advance. This binding relationship is declared in the v-model property of the input tag, so you might see someone somewhere else calling vue.js roughly a template engine for declarative rendering.

This is also the biggest advantage of vue.js. The two-way binding of data is realized through the MVVM idea, so that developers do not need to manipulate dom objects anymore and have more time to think about business logic.

• componentization development

In the front-end application, can we also encapsulate the module like programming? This introduces the idea of componentization development.

Vue. Js through component, split the various modules in a single page application to a single component (component), as long as we write in the parent application first various components tag (pit), and write well in the component tag to the incoming of the parameters of the component (like incoming parameters to the function, the parameter is called the component attributes), and then write the realization of the various components respectively (filling holes), then the entire application even if finished.

• Virtual DOM

Speed is more and more fast, now many people are dozens or even hundreds of M optical fiber in the home, mobile phone is 4 g start, according to the way a web page to a few hundred K, and the browser itself will cache many resource files, why so few M optical fiber has been open, before open a slow have cached page or feel? This is because the browser itself has performance bottlenecks when dealing with the DOM, especially in traditional development, when frequently manipulating the DOM with JQuery or native JavaScript DOM manipulation functions, the browser has to constantly render the new DOM tree, resulting in the page looks very stuck.

Virtual DOM is the English word for Virtual DOM. In simple terms, it is a method that can perform various calculations through JavaScript in advance to calculate and optimize the final DOM operation. Since this DOM operation belongs to the preprocessing operation, and there is no real DOM operation, it is called Virtual DOM. Finally, the DOM operation is actually submitted after the calculation, and the DOM operation changes are reflected in the DOM tree.

• light weight and high efficiency

Vue.js provides efficient data binding and flexible component systems through a concise API

Other advantages:

• animation system

Vue.js provides a simple but powerful Animation system. When the visibility of an element changes, users can not only easily define the corresponding CSS Transition or Animation effect, but also take advantage of the rich JavaScript hook functions for further Animation processing.

React.js-advantages:

• React quickly

Instead of directly manipulating the DOM, it introduces a concept called the virtual DOM, which is inserted between javascript logic and the actual DOM and performs well

• Cross-browser compatibility

The virtual DOM helps us solve cross-browser problems by providing us with a standardized API that works even in IE8.

• Everything is component

Code is more modular, easier to reuse, and more maintainable.

• One-way data flow

Flux, an architecture used to create a one-way data layer in JavaScript applications, was conceptualized by Facebook with the development of the React view gallery.

• Isomorphic, pure javascript

Because search engine crawlers rely on server-side responses rather than JavaScript execution, pre-rendering your application helps with search engine optimization.

• Good compatibility

For example, you use RequireJS to load and package, while Browserify and Webpack are great for building large applications. They make the hard tasks less daunting.

Disadvantages:

• It is not suitable to make a complete frame alone

React is targeted at UI components that can usually be used in combination with other frameworks, so it's not appropriate to make a complete framework on its own at this point. React can't be a complete framework even with a combination of Flux, like if you want promiscuous AJAX? I'm sorry, I don't have one. And there are far fewer third-party components than Angular. React itself is just a V, so if you want a complete framework for a large project, you might also need to introduce Flux and route-related items. Angular offers more on this than React.

• Most of the holes don't show up

It's probably just that it's so new right now that it's hard to say if there will be any big API changes in the future. React is currently used on big stable projects. I only know of Yahoo's Email. So there's very little criticism of React now. Maybe it's not that he really doesn't have pits, but that they haven't been trodden out yet.

Application scenarios

Vue.js

Vue.js is suitable for mobile UI frameworks.Vue is a lightweight, high-performance, componentized MVVM library with a concise API that is easy to use.

Here are some examples of excellent Vue UI component libraries.

• IView UI component library: IView has been applied in TalkingData, alibaba, baidu, tencent, toutiao, jingdong, didi chuxing, Meituan, sina, lenovo and other large companies' products

• Vux UI component library: Vux is a mobile UI component library based on WeUI and vue2.x, which mainly serves WeChat pages.

• Mint UI component library: Mint UI is based on vue. js's mobile component library, which comes from the front end of *eleMe's project.

React

React.js is a powerful UI library that can be used to build projects suitable for small and medium-sized organizations, even large organizations.

Here are some project areas where react.js should be used:

• Dashboards or data visualization tools

• The social network

• E-commerce or retail

• Single-page applications for multiple industries

• React Native cross-platform mobile application

Conclusion

React works with a strict Flux architecture, which is suitable for complex projects with large scale and multi-person collaboration.Theoretically, Vue can be used for such use cases with a similar architecture, but it lacks an official architecture such as Flux.On xiaokuaoling's project, the choice of Vue and React is more a preference of development style.For projects that require a lot of customization of the DOM, Vue is more flexible than React.

Prevalence

Background：

Before we begin our in-depth study, let's summarize some background information about these two frameworks. React, developed and maintained by technology giant Facebook to meet its needs, has long been a major player in the front-end sector to ensure stability and long-term support. Vue.js created by Evan you, a former Google employee, his goal is to develop a framework that integrates the best features of existing frameworks.

Popularity

In JS framework, react has always been the leader of front-end framework. It ranks first with 48718 dependencies, while Vue is the second most popular JS framework with 21575 dependencies, half of the former. However, if we look at the statistics at the end of 2018, we can see that Vue's dependency has tripled, while react's has doubled. The amount of downloads also shows that react is becoming more and more popular, while Vue downloads are almost unchanged.

Community support

According to GitHub's statistics, we can conclude how popular Vue is in its open source community even without the support of top companies. Facebook engineers have been working on maintaining and coding react, improving and investing in it, making react the fastest-growing tool in the developer world.

In summary, react is currently more popular than Vue because it has a stronger team to improve and maintain it, whereas Vue does not. Vue and react offer a high degree of flexibility, easy to learn curves, and both are smaller.

Compare in detail

	react	vue
Type	Javascript library	Javascript library
Ideal for	Both Web and Native	Primarily focused on web dev, but it was written to support other platforms moving forward
Developer	Facebook Community(Created by Jordan Walke)	Evan You
Initial release	March 2013	February 2014
Written-in	Javascript	Javascript
Cross-platform development	React’s React Native is a mature and widely used platform for native-rendered apps	Vue’s Weex is still evolving and aims to provide a smooth development experience
Recommended use	Syntax extension of JavaScript, JSX	Template similar to regular HTML
Learning curve	A steep learning curve and requires deep knowledge	Easy learning curve, HTML-based templates makes it familiar
Popularity	React is ranked second on the list of hottest Javascript projects on GitHub	Ranked first, Vue.js wa the trendiest project in 2017, with more than 40,000 stars added on GitHub during the year
Reusability	Only CSS	Maximum reusability
Performance	Similarly fast	Similarly fast
Contributors on github	1201	189
Model	Virtual DOM(Document Object Model)	Virtual DOM HTML-based templates
Function	Can be used as a base in the development of single-page or mobile applications	Web application framework capable of powering advanced single-page applications
Simplicity	React is more complex than Vue	Vue is simpler than React
Notable feature	One-way data binding with props Stateful components Virtual DOM Lifecycle methods JSX (JavaScript XML) Architecture beyond HTML	HTML-based template Reactivity Components (divide the whole app into small, self-contained, and reusable components) Transitions *Routing *Integrations
Boots trap application	CRA (Create React App)	Vue-cli
Rendering mechanism	All subcomponents are re rendered	Trace the dependencies of each component without re rendering the entire component tree
Data binding	One way data flow	Two way binding
Data update	When an element is created, you cannot change its contents or properties	Direct data modification, responsive.

One same example in Two Ways

Familiar examples of timers timers are probably one of the most common examples of Reactive programming, and are extremely easy to understand:

You need a variable count to keep track of the counter.

You need two ways to increase or decrease the value of the count variable.

You need a way to render the count variable and present it to the user.

You need to mount the two buttons on both methods to change the count variable when the user interacts with them.

The following code is the implementation of all two frameworks mentioned above: Counters implemented with React and Vue

Let's deconstruct the code step by step:

• There are some import statements at the top of all three frameworks

• React prefers the object-oriented paradigm, which is to create a counter component class. Vue follows a similar paradigm by creating an instance of a new Vue class and passing information to it.

• In terms of the count variable, React instantiates the component within its constructor, while Vue sets these properties in its data and state.

• You may notice that React and Vue have the same way of interacting with the count variable. React use inherited from React.Component To modify its state, Vue modifies it directly this.count.

• Finally, all the frameworks are mounted on the app element. Each framework has a slightly different syntax, while Vue uses the most direct syntax, providing maximum versatility by using element selectors instead of elements.

• Vue's code seems shorter in absolute length, and the way element selectors are mounted is a good enhancement. React looks like the most code, but that doesn't mean it's hard to understand.

Here is another example that can be used to compare React and Vue：

If you are familiar with React, you will know that state in application is a key concept. There are also supporting frameworks designed to manage a large state object, such as redux. In addition, the state object is immutable in React applications, which means that it cannot be changed directly (which may not be correct). In React, you need to use the method setstate () to update the state.

addToOrder(key){

//Make a copy of this.state

constorders={...this.state.orders};

//update or add

orders[key]=orders[key]+1||1;

this.setState({orders});

}

In Vue, the state object is not necessary, and the data is managed by the data attribute in the Vue object.

exportdefault{

name:'app',

data(){

return{

samplePasta:samplePasta,

orders:{}

}

},

...

methods:{

handleOrder:function(key){

if(!this.orders.hasOwnProperty(key)){

this.$set(this.orders,key,{count:0});

}

this.orders[key].count+=1;

}

}

}

In Vue, you don't need to use methods such as setstate() to change its state. In Vue objects, data parameters are the savers of data in applications.

Summary

Characteristics	React.js	Vue.js
Type	JavaScript Library	JavaScript Library
Popularity	Popular	Popular ,Slowly gaining places
Dependencies	Need to import	Does not have built in feature
Friendliness	More complex, little difficult for beginners to start with it.	Easy to use
Flexibility	Can be merged with other projects	Can be easily merged with other projects without any issues.
Performance	Fast	Lighter, faster, more modern
Reusability	Only CSS	Maximum reusability

React.js is better than Vue.js in the following scenarios:

1、Need to build mobile applications.

2、Professional and excellent community support to solve any problems.

3、Need to build large applications.

4、Lightweight, easy version migration.

Vue.js is better than React.js in the following scenarios:

1、Latest documentation and simpler syntax.

2、Smaller, faster and more flexible.

3、Rich HTML templates, easy to develop.

Whether you choose React.js or Vue.js, there is no considerable difference between the two frameworks. This decision is very subjective according to your requirements. If you want to integrate the front-end JavaScript framework into an existing application, Vue.js is a better choice. If you want to use JavaScript to build mobile applications, React is definitely your choice.

Reference

1. En.wikipedia.org. 2020. React (Web Framework). [online] Available at: https://en.wikipedia.org/wiki/React_(web_framework) [Accessed 21 May 2020].
2. En.wikipedia.org. 2020. Vue.Js. [online] Available at: https://en.wikipedia.org/wiki/Vue.js [Accessed 21 May 2020]. 3.Itsource.cn. 2020. React可用于哪些web开发场景？具体怎么做？_学科资讯_源码时代官网. [online] Available at: https://www.itsource.cn/web/news/2431.html [Accessed 21 May 2020].
3. [online] Available at: http://www.fly63.com/article/detial/4768 [Accessed 21 May 2020]. 5.. [online] Available at: https://www.zhihu.com/question/31585377 [Accessed 21 May 2020].
4. CSDN.net. 2020. 2020 年，Vue 受欢迎程度是否会超过 React？. [online] Available at: https://blog.csdn.net/weixin_46302190/article/details/104775568 [Accessed 22 May 2020].
5. 简书. 2020. 快速react.Js与vue.Js比较. [online] Available at: https://www.jianshu.com/p/0372f9f478dd [Accessed 22 May 2020].
6. 博客园. 2020. Vue和react对比(详解). [online] Available at: https://www.cnblogs.com/yangyangxxb/p/10105856.html [Accessed 22 May 2020].
7. Caibaojian.com. 2020. Vue与react两个框架的区别和优势对比-前端开发博客. [online] Available at: http://caibaojian.com/vue-vs-react.html [Accessed 22 May 2020].
8. Sohu.com. 2020. Javascript框架对比及案例（React、Vue 及 Hypera_代码. [online] Available at: https://www.sohu.com/a/249834202_132276 [Accessed 22 May 2020]. 11.Baijiahao.baidu.com. 2020. React.Js与vue.Js：流行框架的比较. [online] Available at: https://baijiahao.baidu.com/s?id=1608099200125495014&wfr=spider&for=pc [Accessed 22 May 2020].
9. Cnblogs.com. 2020. Vue Vs React: Javascript 框架之战 - 小小公举 - 博客园. [online] Available at: https://www.cnblogs.com/chaoyuehedy/p/9636658.html [Accessed 22 May 2020].
10. Blog.csdn.net. 2020. 对vue, React,Js等的优缺点简单整理_Javascript_Qq_37887131的博客-CSDN博客. [online] Available at: https://blog.csdn.net/qq_37887131/article/details/89404880 [Accessed 22 May 2020]. 14.Blog.csdn.net. 2020. Vue.Js介绍及vue.Js优缺点_Javascript_Qq_36742720的博客-CSDN博客. [online] Available at: https://blog.csdn.net/qq_36742720/article/details/83385676 [Accessed 22 May 2020].
11. Blog.csdn.net. 2020. 对vue, React,Js等的优缺点简单整理_Javascript_Qq_37887131的博客-CSDN博客. [online] Available at: https://blog.csdn.net/qq_37887131/article/details/89404880 [Accessed 22 May 2020].
12. Blog.csdn.net. 2020. Vue.Js介绍及vue.Js优缺点_Javascript_Qq_36742720的博客-CSDN博客. [online] Available at: https://blog.csdn.net/qq_36742720/article/details/83385676 [Accessed 22 May 2020].