Why is Vue more in line with the general trend of this era?

Posted Jun 16, 20208 min read

clipboard.png

Technical Editor:Xu Jiu From SegmentFault


Not long ago, You Yuxi released the Vue 3.0 Beta version.

After the release, we conducted a survey and communication with the front-end developers in the community. It is generally believed that Vue already has the necessary conditions for commercial project development, such as refined syntax, elegant and concise, high-readable code, and mature component modules. Transformation can allow developers to have fun with coding, etc. Of course, there is also the ability to integrate with third-party controls that is most valued by commercial project development.

It is these capabilities that ensure that "Houlang" Vue can keep pace with the old front-end development frameworks such as React and Angular, occupying an increasingly important position among domestic developers, and gradually developing into the top three domestic front-end frameworks.

However, in the reader's opinion, the main reason for Vue's rise as the fastest-growing JS framework in recent years is not only because of excessive fan following, but also because of the authority of a large company. Compared with React and Angular, Vue has achieved a good balance between readability, maintainability and fun. Combined with the pure front-end table control SpreadJS that we have recommended for everyone before, some users said that only one week of self-study A collaborative document system for forms that can be used internally by the company was created.

In this article, we will analyze the characteristics of Vue and talk about why I recommend Vue to commercial project development, rather than React and Angular.

Vue, React, Angular advantage comparison

clipboard.png

This comparison table should represent most people's understanding of the three front-end frameworks.

React's flexibility is very high, which determines its upper limit. But React has more rules than Vue. In order to make the project code and other rules more organized, more code is needed to implement it. If one day we no longer rely on a lot of npm packages and ES5 compilers, we need to make React Application is as difficult as going to the sky.

Compared with the so-called JS purity and code readability emphasized by React, Angular is indeed an excellent front-end framework. Angular can help us get into development quickly. We will find it very interesting in the first thousand lines of code, but after that, the code will start to get worse. Most of the time, you will be lost in various instructions and scopes, and the difficulty of code management will dissuade most new developers.

Therefore, the main problem of Angular is that it is too difficult, it is difficult to get started, and it is difficult to do projects. Even a senior front-end engineer will have a headache, but the early investment is exchanged for low maintenance pressure in the later period.

In this regard, someone on the Internet has summarized a formula:

React = Think in JS, everything is JS + Data(structure)
Angular = Think in OO + Patterns(lots of) + Best Practice

Vue draws on the design concepts of the two and blends them well. For most developers, it is elegant and concise, allowing us to focus on solving problems rather than code logic.

Vue's unique advantages

Compared with other front-end frameworks, Vue is more clear and thorough in structure, style, and business separation. It is more in line with the coding habits of the front-end for many years, more intuitive, easier to learn and maintain.

It is very easy to get started, with rich information and perfect framework functions, adding a lot of features, such as if, for, async, which saves a lot of garbage code for developers. The template supports html and jsx, and supports custom instructions to facilitate the consistent behavior of dom.

1. Low threshold and quick start

The reason why Vue is simple to use is that it does not require complicated configuration, and only needs an HTML and related files to run. From a design point of view, Vue also considers how to lower the threshold, so that if you only master the basics of Web(HTML, CSS, JS), you can quickly understand and get started, so as to implement and complete an application.

Compared with React and Angular, Vue's Chinese documents are the best written, plus there are very rich videos, graphic tutorials, and various open source plug-ins in China. Even if it is a novice front-end development, you can learn for about a week. Get a project out. As we said at the beginning, with the third-party front-end form control SpreadJS, an enterprise-level form collaboration document can be made in a week of self-study. Therefore, it is very suitable for non-professional front-end, or front-end entry-level people.

Secondly, Vue has more settings, so there is less to think about. A lot of attribute directives are defined, and the API documentation is sorted out there. You need to check what you need. The best practice demo is written over there and it is OK.

Secondly, humanized, in line with user habits

React's design philosophy is to provide a powerful and complex mechanism for developers to adapt to me; and Vue is to adapt to the developer's usage habits, and in many settings, it is how to make developers feel comfortable.

For example, Vue's API fits very well with templates familiar to traditional Web developers. Vue's single file component is presented in a combined mode of template + JavaScript + CSS, which can better cooperate with the existing HTML, JavaScript, CSS on the Web; Vue provides reactive data. When the data changes, the interface will automatically Update, and React also needs to call the method SetState.

Three, Vue + third-party controls = high efficiency & ease of use & componentized architecture

Earlier we mentioned two basic features of Vue, but it can become the development trend of the times, indicating that Vue's capabilities are far more than that.

From the perspective of our team's attempt to use Vue, Vue is extremely simple to use. It draws on componentization, prop, unidirectional data flow, performance, virtual rendering from React, and realizes the importance of state management, and from Angular It borrows templates from there, and gives better syntax, as well as two-way data binding(in a single component), it does not force the use of some kind of compiler, so you can use Vue in legacy code, and mess with the previous jQuery code to be modified.

Even though, there are still many people who think that Vue is only suitable for developing simple websites or single-page applications, but in fact Vue has more abundant and diverse third-party control resources than React and Angular. With the use of these resources, Vue is even more convenient and efficient to do enterprise-level projects than other frameworks.

Here we still use the third-party control SpreadJS as an example to see how Suning Tesco built and launched an enterprise-level form collaborative document system in just one week.

clipboard.png
Developed system interface by embedding SpreadJS online editor

Suning Tesco, as my country's leading O2O smart retailer, the way to deal with internal information before implementing collaborative office is to install a plug-in on Excel, and communicate with the database through the plug-in to achieve data authority management and control, which is very inefficient and confusing.

In order to improve efficiency and achieve real collaborative office, they purchased SpreadJS pure front-end table control, and built an Excel data management system based on Web + Vue integration-"Geek Office Platform".

clipboard.png
Screenshot of Geek Office Platform Interface

The reason why Vue is selected as the front-end framework is because Vue itself makes the entire project construction process faster by providing ready-made paradigms. Off-topic:In fact, before choosing Vue, the project team has tried the React framework, but the process of sorting out props and refactoring microcomponents again and again has made it painful.

The reason why SpreadJS is selected is because it has realized more than 90%of the built-in functions of Microsoft Office Excel. Developers do not need to install any software, just add some UI styles and drop-down boxes, you can quickly deliver a complete set of Web-based Excel function module.

According to the sharing of Suning Tesco System Architect Hou Jian, in order to ensure the smooth transition of the new and old systems, a lot of manpower is required to complete a large amount of Excel data migration. Therefore, the compatibility of the old and new systems is very important for Excel files. With the help of SpreadJS pure front-end lossless import and export of Excel product features, the geek office platform can be successfully delivered and quickly put into use.

Click here , to understand the integration of SpreadJS and Vue, the development case of Suning Group's "Geek Office" system .


Why choose Vue + SpreadJS?

Using Vue + SpreadJS can quickly build a set of online collaborative form documents, both for document performance, project development efficiency, and later maintenance costs and new and old system data migration costs, they are a pair of "best partners."

SpreadJS provides an Excel-like operating interface and open API, and embeds it in the system to quickly implement functions such as Excel import and export, formula calculation, online data reporting, print reporting, real-time preview, data verification, and server-side data interaction. Through its second expansion, SpreadJS can be used as the core module of the online document collaborative editing system to meet business needs such as multi-person collaboration, real-time editing, data synchronization, multi-level reporting, and historical query. After actual measurement, with the help of Vue + SpreadJS, less than 100 lines of code can be achieved, and the functions and experience of Excel are perfectly embedded in the online document system.

As in the Suning Tesco example above, the initialization method is re-called in the page component mount corresponding to Vue to achieve a form layout highly similar to Excel. Only the following code is required:

clipboard.png

Vue-fit the current trend

We have tried many times to use Vue to develop a lot of code for different projects, and the results are also very satisfactory(each project cycle does not exceed 3 months). Perhaps, 3 months is not much for back-end development, but in the JS world, it matters.

Wen Wu first Wu Wu second, meaningless debate about who is better than anyone does not make sense, this article does not hope to divide the three frameworks, but hopes to provide you with more reference information, according to their own The actual needs of the project to choose a more suitable framework.

From the objective facts, the most innovative is React, and the most enterprise-level ability is Angular, which can learn from each other. Vue is the data between the two.

It is precisely because Vue has the characteristics of low threshold, easy to use, user-friendly, high efficiency, etc., plus the richest Chinese resources and excellent third-party control blessings such as SpreadJS, developers can achieve the "short and fast" development of the project. In this era of pursuit of "fast" and "change", the positioning of this front-end frame is obviously more in line with the mainstream needs of the era.

Even Vue author You Yuxi has repeatedly stated that if you want to talk about historical status after many years, React is definitely higher than Vue. However, historical status is not a problem that developers need to consider. We can contribute to the development of a certain programming language and a certain framework of the community, but in actual projects, we cannot be blindly tied.

Extended reading of resources in the article:

Vue official document: https://cn.vuejs.org/v2/guide/
SpreadJS official website: https://www.grapecity.com.cn/...
Suning Group Development Case: https://www.grapecity.com.cn/...

clipboard.png