Shulou(Shulou.com)06/02 Report--

This article mainly explains "Why Vue is more in line with the general trend of the times". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "Why Vue is more in line with the general trend of the times".

Comparison of advantages among Vue, React and Angular

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

React is very flexible, which determines that its upper limit is also very high. But React has more rules than Vue. In order to make the rules such as project code more organized, we need more code to implement. If one day we no longer rely on a lot of npm packages and ES5 compilers, it will be extremely difficult to make React applications.

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, and we'll find it interesting in the first thousand lines of code, but after that, the code will start to get worse. Most of the time, you will get lost in a variety of 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, difficult to start, difficult to do the project, even a senior front-end engineer will have a headache, but the early investment is the low maintenance pressure in the later stage.

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

React = Think in JS, everything is JS + Data (structure)

Angular = Think in OO + Patterns (lots of) + best practices

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

Unique advantages of Vue

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

Very easy to get started, informative, well-functional framework, add a lot of features, such as if, for, async, for developers to save a lot of junk code. The template supports html and jsx, and supports custom instructions to facilitate the consistent behavior of dom.

First, the threshold is low and the start is quick.

The reason why Vue is easy to use is that you don't need a complex configuration, you only need a HTML and related files to run. From a design point of view, Vue is also considering how to lower the threshold, so that only mastered the basic knowledge of Web (HTML, CSS, JS), can be the fastest to understand and start, so as to achieve and complete an application.

Compared with React and Angular, Vue Chinese documents are the best written, coupled with a very rich domestic video, graphics and text tutorials, a variety of open source plug-ins, even a novice front-end development, study in a week or so can work out a project. As we said at the beginning, with the third-party front-end table control SpreadJS, we can make an enterprise-level table collaborative document in a week of self-study. Therefore, it is very suitable for non-professional front-end, or front-end beginners.

Second, there are more Vue settings, so there is less to think about. The property directive has a lot of definitions, and the API documentation is right there. Check what you need, and the best practice demo is written over there, and you can OK it.

Second, humanization, in line with the habits of users

The design philosophy of React is to provide a powerful and complex mechanism for developers to adapt to me, while Vue is designed to better adapt to developers' habits, and many settings are designed to make developers feel good.

For example, Vue's API fits very well with templates familiar to traditional Web developers. The single-file component of Vue is presented in the combined mode of template + JavaScript+CSS, which works better with Web's existing HTML, JavaScript and CSS. Vue provides reactive data, and the interface is automatically updated when the data is changed, while the method SetState needs to be called in React.

Third, Vue + third-party controls = high efficiency & easy to use & component-based architecture

We mentioned two basic features of Vue earlier, but they can become the trend of the times, which shows that the capabilities of Vue are much more than that.

From the point of view of our team's attempt to use Vue, Vue is extremely easy to use. It borrows componentization, prop, one-way data flow, performance, virtual rendering from React, realizes the importance of state management, borrows templates from Angular, and gives better syntax and bi-directional data binding (in a single component). It does not force the use of some kind of compiler. So you can use Vue in your legacy code and modify the previously messy jQuery code.

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

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

The system interface is developed by embedding SpreadJS online editor.

SUNING, as the leading O2O smart retailer in China, the way to deal with internal information before realizing collaborative work is to install plug-ins on Excel and communicate with the database through plug-ins to achieve data rights control, which is very inefficient and confusing.

In order to improve efficiency and achieve real collaborative work, they purchased SpreadJS pure front-end table controls to build 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 entire project building process faster by providing a ready-made paradigm. Beside the point: in fact, before choosing Vue, the project team had already tried the React framework, but the process of sorting out prop and refactoring micro-components over and over again made it painful.

SpreadJS is chosen because it has achieved more than 90% of the built-in functions of Microsoft Office Excel. Developers do not need to install any software, but only need to add some UI styles and drop-down boxes to quickly deliver a complete set of Web-based Excel functional modules.

According to Hou Jian, the system architect of SUNING, in order to ensure a smooth transition between the new and old systems, we need 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 very important. With the help of the lossless import and export product feature of SpreadJS pure front-end Excel, the geek office platform can be successfully delivered and quickly put into use.

Click here to learn about the integration of SpreadJS and Vue and the development case of SUNING Group's "geek office" system.

Why choose Vue + SpreadJS?

Vue + SpreadJS can be used to quickly build a set of online collaborative form documents, which are the "best partners" for document performance, project development efficiency, late maintenance costs and data transfer costs between new and old systems.

SpreadJS provides Excel-like operation interface and open API, and embeds it into the system, which can quickly realize the functions of Excel import and export, formula calculation, online data filling, printing and submitting, real-time preview, data verification, server data exchange and so on. Through the second expansion, SpreadJS can be used as the core module of the online document cooperative editing system. Meet the business needs of multi-person cooperation, real-time editing, data synchronization, multi-level reporting, history query and so on. After the actual measurement, with the help of Vue + SpreadJS, we can achieve less than 100 lines of code, and perfectly embed the function and experience of Excel into the online document system.

As in the example of SUNING above, call the initialization method again in the page component mount corresponding to Vue to achieve a form layout that is highly similar to Excel. You only need the following code:

Vue-- in line with the general trend of the times

We have tried many times to develop a lot of code for different projects using Vue, and the results are satisfactory (each project cycle is no more than 3 months). Maybe three months is nothing for back-end development, but in the JS world, it matters.

There is no point in debating who is better than whom, and this article does not hope to divide the three frameworks, but hopes to provide you with more reference information. choose a more suitable framework according to the actual needs of your own project.

From the objective facts, the most innovative is React, and the most enterprise-level capability is Angular, which can learn from each other's strengths to offset their weaknesses, and the data between the two is Vue.

It is precisely because Vue has the characteristics of low threshold, easy to use, humanization and high efficiency, as well as the most abundant Chinese resources and excellent third-party controls such as SpreadJS, developers are able to achieve the "short and fast" development of the project. In this era of pursuit of "fast" and "change", the positioning of this front-end framework is obviously more in line with the mainstream needs of the times.

Even though you Yuxi, the author of Vue, has said many times that if it comes to historical status in many years' time, React must be higher than Vue. However, historical status is not an issue that developers need to consider, we can contribute to the community development of a certain programming language, a certain framework, but in the actual project, we can not be blindly bound.

Thank you for your reading, the above is the content of "Why Vue is more in line with the general trend of this era". After the study of this article, I believe you have a deeper understanding of why Vue is more in line with the general trend of this era, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.