Lighter and faster Vue.js 2.0 vs. other frames (RPM)

Lighter and faster Vue.js 2.0

The emerging JavaScript Framework Vue.js version 2.0 has been released, bringing a refreshing change in the frenetic JavaScript world.

Vue creator Yu Yuxi says Vue 2.0 has a significant performance boost while maintaining a lightweight file download:

The render layer is rewritten based on a lightweight virtual DOM implementation, and the virtual Dom implements fork from Snabbdom. The new render layer provides a huge performance boost compared to V1 and makes Vue 2.0 one of the fastest frameworks.

According to the 1.0 to 2.0 Migration Guide, "approximately 90% of the APIs are the same". Unlike some JavaScript frameworks, there is a huge change from one version to the next, with "core concepts unchanged" in Vue 2.0.

In addition to the core library, the Vue-router and Vuex libraries have been updated to version 2.0, and VUE-CLI has generated 2.0 scaffolding by default.

When Vue 2.0 first announced its release, Yu Yuxi said the filter was leaving. Over time, however, this position has changed, and Vue 2.0 still retains the text insertion filter. Indeed, the use of the Guide Filter section also indicates that the "Vue 2.x filter can only be used within the mustache internal binding." To implement the same behavior in a directive binding, you should use a computed property. "The framework no longer provides any built-in filters, and the array filter (which cuts standards-based arrays) has been canceled.

Because Vue was not primarily created by large technology companies, Yu Yuxi adopted different financing methods. Yu Yuxi is able to work full-time in this project thanks to Patreon, the sponsorship method set up on Patreon in Utah is guaranteed a certain amount of money each month. As of press time, Patreon sponsored $8853 per month for Vue's sustainability. In addition to Yu Yuxi, the Vue.js core team also has 18 people.

Most of the community responded positively, "Vue is more concise than ng2" and "I found Vue 2.0 between angular 1 and react." It is modern and easy to learn and use. "

Vue published a comparison Guide (http://vuefe.cn/guide/comparison.html) on the official web site, showing how it differs from other frameworks, and this article extracts it in contrast to the angular and react.

Compare React

There are many similarities between React and Vue, both of which are:

Using Virtual DOM

Provides a responsive (reactive) and modular (composable) View component.

Keep your focus on the core library, along with the matching routes and libraries responsible for handling global state management.

With a lot of similarities, we'll spend more time comparing this piece. Here we not only guarantee the accuracy of the technical content, but also balance the consideration. We need to point out that React is a better place than Vue, like their ecosystem and rich custom renderers.

The React community has been very active in helping us to accurately balance our concerns, thanks in particular to Dan Abramov from the React team. He was very generous in spending his time contributing expertise, helping us to refine this document, and finally we were very satisfied with the final result.

With this in mind, we hope you will feel comfortable with the fairness of the comparison between the two libraries below.

Performance profile

So far, the performance of Vue has been better than React for real-world testing. If you doubt it, please read on. We will explain why (and provide a baseline that is agreed with the React team).

Rendering performance

DOM has the highest operational cost when rendering the user interface, but unfortunately no library can make these primitive operations faster.

The best effect we can do is:

Minimize DOM manipulation. Both Vue and React are implemented using virtual DOM, and both work as well.

Minimize any operations other than DOM operations. This is a different place for Vue and React.

In React, we set the extra cost of rendering an element to be 1, while the average cost of rendering a component is 2. So in Vue, the cost of an element is more like 0.1, but the cost of the average component will be 4, because we need to set the response system.

This means that, in a typical application, the performance of Vue will be much better than React, because the elements that need to be rendered are more than the number of components. However, in extreme cases, for example, each component renders only one element, Vue is usually slower. There are other reasons, of course.

Vue and React also provide functional components, which are not declared, are not instantiated, and therefore cost less. When these are used for critical performance scenarios, Vue will be faster. To prove this, we have established a simple reference project (https://github.com/chrisvfritz/vue-render-performance-comparisons), which is responsible for rendering 10,000 list items 100 times. We encourage you to try to run it based on this. In practice, however, the results will vary, due to differences in browser and hardware, and even JavaScript engines.

If you are too lazy to do this, the following values are generated from a 2014-year MacBook Air and run in Chrome 52 version. To avoid contingency, each reference project is run 20 times and taken from the best results:

Vuereact

Fastest23ms63ms

Median42ms81ms

Average51ms94ms

95th Perc.73ms164ms

Slowest343ms453ms

Update performance

In React, you need to implement shouldcomponentupdate everywhere, and you can use an immutable data structure for optimal rendering. In Vue, component dependencies are automatically traced, so when these dependencies change, it is updated. The only thing that needs to be noted for further optimization is that in a long list, you need to add a key property on each item.

This means that an unmodified Vue is much faster than an React. Because Vue has improved rendering performance, even fully optimized React are often slower than out-of-the-box Vue.

In development

Clearly, performance in a production environment is critical, and what we've discussed so far is specifically for this environment. But the performance of the development process should not be overlooked. It's nice to develop most applications with Vue and React fast enough.

However, if you are developing a data visualization or animation application with high performance requirements, you need to be aware of the following: in development, Vue processes up to 10 frames per second, while React processes up to 1 frames per second.

This is because React has a lot of checking mechanisms, which gives it a lot of useful warning and error messages. We also consider these to be important, but we also pay more close attention to performance when implementing these checks.

HTML & CSS

In React, they are all written in JavaScript, which sounds very simple and elegant. Unfortunately, however, the HTML and CSS in JavaScript produce a lot of pain points. In Vue we use WEB technology and expand on it. The next step is to show you what this means, through some examples.

JSX vs Templates

In React, all component rendering functions rely on JSX. JSX is a syntactic sugar that uses XML syntax to write Javascript. Here's an example that has been reviewed by the react community:

The JSX rendering features have the following advantages:

You can use the Full programming language JavaScript feature to build your view page.

Tool support for JSX is more advanced than existing Vue templates available (for example, linting, type checking, editor AutoComplete).

In Vue, we also provide rendering capabilities and support for JSX because of the occasional need for these features. However, for most components, rendering functionality is deprecated.

In this regard, we are providing a simpler template:

The advantages are as follows:

In the process of writing a template, the style style has been defined and involves fewer functional implementations.

The template will always be declared.

Any HTML syntax in the template is valid.

Read more in English (for example, for each item in items).

The advanced version of JavaScript syntax is not required to increase readability.

This way, not only is it easier for developers to write code, but designers and developers can also analyze code and contribute code more easily.

It's not over yet. Vue embraces HTML, rather than using JavaScript to reshape it. Within the template, Vue also allows you to use a preprocessor such as Pug (formerly known as Jade).

React Ecology There is also a project (https://wix.github.io/react-templates/) that allows you to write templates, but there are some drawbacks:

Features far less than Vue template system rich.

You need to detach the HTML code from the component file.

This is a third-party library, and unofficial support may no longer be supported by future core library updates.

Component scopes for CSS

Unless you distribute components across multiple files (for example, CSS Modules), a warning is generated for CSS within the scope of React. Very simple CSS can also work, but slightly more complex, such as hover state, media queries, Pseudo-class selectors, etc. are either re-used by heavy dependencies or directly unavailable.

And Vue gives you full access to CSS in every single file component.

This optional scoped property automatically adds a unique property (such as Data-v-1) to the CSS within the component to specify the scope, when compiling. List-container:hover will be compiled into a similar. List-container[data-v-1]: Hover

Finally, just like HTML, you can choose your favorite CSS preprocessor to write CSS. This allows you to work around the design, rather than introducing a dedicated library to increase the volume and complexity of your application.

Scale

Scale up

Vue and React both provide a powerful way to handle large applications. The React community is very innovative in state management (such as Flux, Redux), and these state-management patterns, even Redux itself, can be easily integrated into Vue applications. In fact, Vue has further adopted this model (VUEX) and more deeply integrates with Vue's state management solution Vuex believes it will bring you a better development experience.

Another important difference is that Vue's Routing and state management libraries are supported by official maintenance and are updated with the core library. React chose to give these issues to the community for maintenance, thus creating a more decentralized ecosystem. But relative, React's ecosystem is more prosperous than Vue.

Finally, Vue offers VUE-CLI scaffolding, which allows you to build projects very easily, including Webpack, browserify, and even no build system. React also provides create-react-app in this regard, but there are some limitations:

It does not allow any configuration when the project is built, and Vue supports yeoman-like customization.

It only provides a single template for building single-page applications, and Vue provides templates for a variety of purposes.

It is not possible to build projects with user-built templates, and self-built templates are particularly useful for pre-established protocols in an enterprise environment.

It is important to note that these restrictions are intentionally designed, which has its advantages. For example, if your project needs are very simple, you don't need to customize the build process. You can use it as a dependency to update. If you read more about the different design concepts.

Scale down

React learning curve is steep, before you begin to learn React, you need to know JSX and ES2015, because many examples use these syntax. You need to learn to build the system, although you can technically use Babel to compile the code in real time, but this is not recommended for production environments.

Just as the Vue-up extension is like React, the Vue is scaled down to resemble jQuery. You just have to put the following tags on the page to run:

Then you can write the Vue code and apply it to production, you just have to replace it with the Min version of the Vue file without worrying about other performance issues.

Since the start-up phase does not need to learn jsx,es2015 and build systems, developers can build simple applications in less than a day's time reading the guide.

Local rendering

Reactnative enables you to write apps with native rendering capabilities (IOS and Android) with the same component model. It's great for developers to be able to develop across multiple platforms at the same time. Accordingly, Vue and Weex will have official cooperation, Weex is Ali's cross-platform user interface development Framework, Weex's JavaScript framework runs with Vue. This means that with the help of Weex, the components you develop using VUE syntax can be used not only on the browser side, but also in the development of native apps on IOS and Android.

In the present, Weex is still positive development, maturity can not compete with reactnative. However, the development of Weex is driven by the needs of the world's largest e-commerce enterprise, and the Vue team will work actively with the Weex team to ensure a good development experience for developers.

Mobx

MOBX is popular in the React community, and virtually the same reaction system is used in Vue. To a limited extent, React + MOBX can also be thought of as a more cumbersome vue, so choosing Vue would be more reasonable if you're used to combining them.

Compare Angular 1

Some of Vue's syntax is similar to Angular (for example, v-ifvsng-if). Because angular is a source of inspiration for Vue's early development. However, many of the problems that exist in Augular have been addressed in Vue.

Complexity

Both the API and the design vue.js are much simpler than the Angular 1, so you can quickly master all of its features and put it into development.

Flexibility and modularity

Vue.js is a more flexible and open solution. It allows you to organize your application in the desired way, rather than having to follow the rules set by Angular 1 at all times, which allows Vue to work on a variety of projects. We know it is very necessary to give you the right to decide.

That's why we offer Webpack template, which allows you to choose whether to enable advanced features such as hot module loading, linting, CSS extraction, and so on, in a few minutes.

Data binding

Angular 1 uses two-way binding, and Vue enforces one-way data flow between different components. This makes the data flow in your app clearer and easier to understand.

Directives and Components

The instructions and components are more clearly divided in Vue. Directives encapsulate only DOM operations, and components represent a self-sufficient unit of independence-with its own view and data logic. In the Angular, there are a lot of mixed places.

Performance

Vue has better performance and is very, very easy to optimize because it does not use dirty checking.

In Angular 1, when Watcher becomes more and more slow, because every change within the scope, all watcher are recalculated. Also, if some watcher trigger another update, the Dirty Check Loop (digest cycle) may have to run multiple times. Angular users often have to use esoteric techniques to solve the problem of dirty check loops. Sometimes there is no easy way to optimize the scope with a large number of watcher.

Vue does not have this problem at all, because it uses a dependency-tracking-based observing system and an asynchronous queue update, and all data changes are triggered independently unless there is a clear dependency between them.

Interestingly, Angular 2 and Vue have solved some of the problems in Angular 1 with similar designs.

Compare Angular 2

We classify Augluar 2 separately as it is a completely new framework. For example: It has an excellent component system, and many implementations have been completely rewritten, and the API has completely changed.

TypeScript

Angular 1 is for smaller applications, Angular 2 has shifted focus and is for large enterprise applications. TypeScript is often quoted at this point, and it is useful for people who like to use a type-safe language such as Java or C #.

Vue is also ideal for enterprise applications, and you can also support TypeScript by using an official type or user-contributed adorner, which is completely free to choose.

Size and performance

In terms of performance, both frameworks are very fast. However, there are not enough data use cases to show the concrete. If you must quantify this data, you can view the third-party reference, which shows that Vue 2 is faster than ANGULAR2.

In terms of size, although Angular 2 uses tree-shaking and off-line compilation techniques, the code is much smaller. However, Vue2 (23KB), which contains the compiler and all functions, is much smaller than Angular 2 (50kb). However, it is important to note that the volume reduction of apps using Angular 2 uses tree-shaking to remove features that are not used in the framework, but the size becomes larger as the feature is introduced.

Flexibility

Vue is more flexible than Angular 2, and Vue officially provides build tools to help you build your project, but it doesn't limit how you build it. Some people might like to build it in a uniform way, and many developers like it in a flexible and free way.

Learning curve

To get started with Vue, you're using familiar HTML, ES5-compliant JavaScript (that is, pure JavaScript). With these basic skills, you can quickly master it (guide) and put it into development.

The learning curve of Angular 2 is very steep. Even if TypeScript is not included, it is used in the Start guide with the ES2015 standard javascript,18 NPM dependency package, 4 files and more than 3,000 words, all to complete a Hello world. And Vue's Hello world is very simple. We don't even have to spend an entire page to introduce it.

Lighter and faster Vue.js 2.0 vs. other frames (RPM)