Not long ago, Yu Yu Creek released the Vue 3.0 Beta.

After the launch, we conducted a survey of front-end developers in the community, and the general consensus was that Vue already had the necessary conditions for commercial project development, such as concise syntax, elegant and concise code, highly readable code, mature component modularity that allows developers to have fun coding, and so on. Of course, And the ability to combine with third party controls, which commercial project development values most.

It is these capabilities that ensure that “late wave” Vue can keep pace with old front-end development frameworks such as React and Angular, and occupy an increasingly important position among Chinese developers, gradually becoming the first of the three domestic front-end frameworks.

However, from readers’ point of view, Vue is the fastest growing JS framework in recent years, and its rise is mainly due not only to the excessive popularity of fans, but also to the authority of a large company. Compared with React and Angular, Vue achieves a good balance between readability, maintainability and fun. Combining with SpreadJS, a pure front-end table control that we have previously recommended, some users reported that they created a table collaboration document system for internal use after just one week of self-study.

In this article, we will analyze the features of Vue and talk about why I recommend Vue over React and Angular for commercial projects.

Vue, React, Angular advantage comparison

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

React is very flexible, which means it has a high ceiling. React, however, has more rules than Vue, and more code is needed to keep things in order. If we don’t have to rely on a bunch of NPM packages and ES5 compilers, it will be extremely difficult to implement React applications.

Angular is a better front-end framework than React’s emphasis on JS purity and code readability. Angular gets us into development fast. The first thousand lines of code are fun, but after that the code starts to suck. Most of the time, you’ll get lost in directives and scopes, and the difficulty of code management will discourage most new developers.

So The main problem with Angular is that it’s hard to get started, hard to do projects, and even a veteran front-end engineer has a headache, but the upfront investment pays off with low maintenance.

For this, there is a special online summed up a formula:

  • React = Think in JS, everything is JS + Data (structure)
  • Angular = Think in OO + Patterns (lots of) + best practices

Vue draws on the design concepts of both and integrates them. For most developers, it’s elegant and concise, allowing us to focus on problem solving rather than code logic.

Vue’s unique advantages

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

It is very easy to get started, rich in information, complete framework functions, adding many features, such as if, for, async, for developers to save a lot of junk code. Templates support HTML and JSX, and support custom instructions for manipulating the consistent behavior of the DOM.

First, low threshold, fast

Vue is easy to get started because it doesn’t require complex configuration, just an HTML and associated files to run. From the point of view of design, Vue also considers how to lower the threshold, so that only master the basic knowledge of Web (HTML, CSS, JS), can be the fastest understanding and use, so as to achieve and complete an application.

Compared with React and Angular, Vue’s Chinese documents are the best. In addition, there are abundant videos, graphic tutorials, and various open source plug-ins in China. Even a novice front-end developer can start a project in about a week. As we mentioned at the beginning, with the help of SpreadJS, a third-party front-end spreadsheet control, you can create an enterprise-level spreadsheet collaboration document within a week of self-study. Therefore, it is very suitable for non-professional front-end, or front-end entry-level people.

Second, Vue has more Settings, so there’s less to think about. There’s a whole bunch of property directives that are defined, so the API documentation is there, if you need to look it up, the best practices demo is there, just follow it.

Two, humanization, in line with user habits

React was designed to provide powerful and complex mechanics for developers to adapt to me; While Vue is to adapt to the use of developers more habits, in many Settings are to let developers enjoy how to.

For example, Vue’s API fits well with the templates that traditional Web developers are familiar with. The single file component of Vue is presented in the combined mode of template +JavaScript+CSS, which can better cooperate with the existing HTML, JavaScript and CSS of the Web. Vue provides reactive data and updates the interface automatically when the data changes. React also calls the SetState method.

Vue + third-party controls = high efficiency & easy to use & componentized architecture

We mentioned two basic features of Vue earlier, but the fact that it has become a trend shows that Vue is much more than that.

From our team’s use of Vue, Vue was surprisingly simple to use. It borrowed componentation, prop, one-way data flow, performance, virtual rendering from React, recognized the importance of state management, and borrowed templates from Angular with better syntax. And two-way data binding (within a single component), which doesn’t force the use of a compiler, so you can use Vue in legacy code and revamp the previously messy jQuery code.

Although many people still think that Vue is only suitable for developing simple websites or single-page applications, Vue has a richer and more diverse resource of third-party controls than React and Angular. With these resources, Vue is even more convenient and efficient for enterprise 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.

The system interface is developed by embedding SpreadJS online editor

As a leading O2O smart retailer in China, Suning Tesco deals with internal information before collaborative office by installing plug-ins on Excel and communicating with the database through plug-ins to achieve data permission control, which is very inefficient and chaotic.

In order to improve efficiency and realize true collaborative working, they purchased SpreadJS pure front-end table control and built an Excel data management system based on Web + Vue integration — “Geek Office Platform”.

Screenshot of geek office platform interface

Vue was chosen as the front-end framework because Vue itself makes the whole project construction process faster by providing ready-made paradigms. Off-topic: Actually, the project team had tried React framework before choosing Vue, but the process of rearranging prop and refactoring microcomponents again and again made it unbearable.

SpreadJS was chosen because it already implements more than 90 percent of Microsoft Office Excel’s built-in features, enabling developers to quickly deliver a complete set of Web-based Excel features without installing any software, just adding UI styles and dropdowns.

According to hou Jian, system architect of Suning Tesco, in order to ensure the smooth transition of the new and old systems, it is necessary to invest manpower to complete a large number of Excel data migration work. Therefore, the compatibility of the new and old systems to Excel files is crucial. The geek office platform has been successfully delivered and quickly put into use thanks to SpreadJS ‘feature of importing and exporting Excel without loss at the front end.

Click here to learn about the integration of SpreadJS and Vue and the development case of suning Group’s “Geek Office” system.

Why Vue + SpreadJS?

Using Vue + SpreadJS, you can quickly build a set of collaborative online spreadsheet documents, which are the best match for document performance, project development efficiency, maintenance costs and data migration costs for old and new systems.

SpreadJS provides an Excel like operating interface and open API. Embedded into the system, SpreadJS can quickly implement Excel import and export, formula calculation, online data filling, print and report, real-time preview, data verification, server data interaction and other functions. SpreadJS can be used as the core module of an 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. With the help of Vue + SpreadJS, it is possible to perfectly embed Excel functions and user experience into an online document system with less than 100 lines of code.

For example, in the above example of Suning, re-call the initialization method in the corresponding page component mount of Vue to achieve a highly similar Excel form layout, just need the following code:

Vue — Fits the general trend of the moment

We have tried using Vue numerous times in the past to develop a lot of code for different projects with satisfactory results (each project lasted less than 3 months). Maybe three months isn’t much for back-end development, but in the JS world, it is.

It is meaningless to argue who is better than who. This paper does not hope to distinguish these three frameworks, but to provide more reference information for everyone to choose a more suitable framework according to their actual needs of the project.

Objectively speaking, React is the most innovative, Angular is the most enterprise-class, and Vue is in between.

Vue is easy to use, user-friendly and efficient, with the most abundant Chinese resources and excellent third-party controls such as SpreadJS, enabling developers to achieve “short, smooth and fast” development of projects. In this era of “fast” and “change”, the positioning of this front-end framework is obviously more in line with the mainstream needs of the era.

Even though You Yuxi, the author of Vue, said many times that React was definitely higher than Vue when it came to historical status years later. We can contribute to the development of the community in a particular programming language or framework, but in the actual project, we can’t be tied down blindly.

Resources in this article:

Vue official document: cn.vuejs.org/v2/guide/

SpreadJS website: www.grapecity.com.cn/developer/s…

Suning group development case: www.grapecity.com.cn/blogs/sprea…