Vue.js 2.0 and react, augular and other front-end frames _javascript skills

React

There are many similarities between react and Vue, all of which are:

Using the Virtual DOM

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

Stay focused on the core library, along with the accompanying Routing and Libraries responsible for handling global state management.

Similar scopes, we'll use more time to compare this piece. Not only do we have to maintain the accuracy of the technology, but also balance. We point out that react are better places than Vue, for example, their ecosystems and rich custom renderer.

The react community is very active here to help us achieve this balance, especially thanks to Dan Abramov from the react team. He has been very generous in his time to devote his expertise to helping us refine this document until we are satisfied.

In this way, I hope you can be assured of the fairness of the comparison between the two libraries.

Introduction to Performance

So far, in real-world tests, Vue is superior to react (usually at least 20% to 50%, although in some cases faster). We can provide a link to this reference project, but frankly, all references are flawed in some ways and rarely have a real application like what you write. Well, let's get down to the details.

Rendering performance

Dom is the most expensive operation when rendering the user interface, unfortunately no library can make these original operations faster.
The best we can do is:

Minimize DOM operations. 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.
If, in react, the extra cost of rendering an element is 1, the average rendering of one component costs 2. In Vue, an element's overhead is more like 0.1, but the average component's overhead will be 4, due to some system settings.

What this means is that in most applications, the elements that need to be rendered are more than the number of components, so Vue performance will be much better than react. However, in extreme cases, such as when each component renders an element, the Vue will typically be slower.

Vue and react also provide functional components that are not declared, are not instantiated, and therefore require less overhead. Vue will be faster when these are used in key performance locations. To prove this, we set up a simple reference project that only renders 10,000 list items 100 times. We encourage you to try, in fact, because of the browser and hardware reasons, the results will be different, because the JavaScript engine, the results will be very different.

If you're too lazy to do it, the following digital numbers run from one in Chrome 52 on a 2014-year MacBook air. To avoid contingency, each reference item is run separately 20 times, and contains the best results:

Update performance

In react, you need to implement shouldcomponentupdate in every place, and use immutable data structures to achieve fully optimized re-renders. In Vue, the dependencies of a component are tracked automatically, so it is updated when these dependencies change. In a long list, there are times when you need to optimize further, just add the key attribute on each item.

This means that because of improved rendering performance within the Vue, it is much quicker to update the Vue without optimization than to avoid the react. Even fully tuned react are often slower than unhandled vue.

In development

Obviously, performance in production is the most important and is what we have discussed so far. The performance of the development process is also very important. The good news is that using Vue and react to develop most applications is fast enough.

However, it will be useful to join you in developing a data visualization or animation application that is more performance-efficient. In development, the Vue processes up to 10 frames per second, while react less than 1 frames per second.

This is because react has a large number of checking mechanisms that allow it to provide many useful warnings and error messages. We agree with those that are important, but we also pay closer attention to performance when we implement these checks.

HTML & CSS

In react, all of them are JavaScript, which sounds simple and elegant. The unfortunate fact is that HTML and CSS in JavaScript can cause a lot of pain. The WEB technology we use in Vue is extended on top of it. Here are some examples to show you what this means.

JSX vs Templates

In react, all of the component's rendering function uses JSX. JSX is a syntactic candy that uses XML syntax to write Javascript. Here's an example of a react community review:

 Render () {Let
  {items} = this.props Let
  children
  if (items.length > 0) {
   children = (
    <UL&G t;
     {Items.map (item =>
     <li key={item.id}>{item.name}</li>
     )}
    </ul>
   )
  } else {
   children = <p>no items found.</p>
  } return
  (
   <div className = ' List-container ' >
    {children}
   </div>
 }

JSX's rendering features have some advantages:

You can use the complete programming language JavaScript to build your view page.
Tool support for JSX is more advanced than other Vue templates available (e.g., linting, type Checker, editor AutoComplete).
In Vue, we also provide rendering capabilities and support for JSX because of the sometimes required functionality. However, rendering functionality is deprecated for most components.

In this context, we provide a simpler template:

 <template>
  <div class= "List-container" >
   <ul v-if= "Items.length" >
    <li v-for= "item In Items ' >
     {item.name}}
    </li>
   </ul>
   <p v-else>no items found.</p>
  </div>
 </template>

Advantages are as follows:

In the process of writing templates, style styles have been identified and less involved in business logic.

A template is always declared.

Any HTML in the template is valid.

Read more like English (for each item in items).

Advanced versions of JavaScript increase readability.

This makes it easier for developers to write code and designers and developers to analyze code and contribute code more easily.

It's not over yet. Vue embrace HTML instead of using JavaScript to reshape it. In the template, Vue also allows you to use a preprocessor such as pub (formerly known as Jade).

React Ecology also has a project that allows you to write templates, but there are some drawbacks:

Features are far from rich in Vue template systems.

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 the components across multiple files (for example, CSS Modules), the CSS in the scope will burst into warning. Very simple CSS can work, but slightly more complex points, such as hover state, media query, pseudo class selector will either be modified or can not be used.

Vue gives you full access to the single file component.

 <style scoped>
  @media (min-width:250px) {
   . list-container:hover {
    background:orange;
   }
  }
 </style>

This optional scoped attribute automatically adds a unique attribute (such as Data-v-1) to the CSS within the component to specify the scope of the function, compile. List-container:hover will be compiled to resemble. List-container[data-v-1]: Hover

Finally, you can choose your preferred CSS preprocessor to write CSS. This allows you to work around the design, rather than introducing libraries to increase the capacity and complexity of your application.

Scale

Expand

Both Vue and react provide a powerful way to deal with large applications. The react community is very innovative in state management (such as Flux, redux), and these state management patterns and even redux themselves are very easy to integrate in Vue applications. In fact, Vue has taken this pattern further, integrating Vuex into Vue can lead to a better development experience Vuex.

Another important difference is that Vue's accompanying Routing and state management libraries are maintained by official support and updated with core libraries. React ecology is more mature, the choice is to put these issues to the Community maintenance.

Finally, Vue provides a vue-cli scaffold that allows you to easily build projects that can contain Webpack, browserify, or no builds system. React also provides create-react-app in this area, but there are some limitations:

It does not allow any configuration when the project is built, while Vue runs Yeoman-like customization.

It only provides a single template for building a single page application, while Vue provides a variety of templates for a variety of purposes.

It is not possible to build projects with user-built templates, which is useful for setting up protocols in the enterprise environment.

Note that these restrictions are deliberately 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 update it as a dependency. If you read more about the different design concepts.

Narrow

React learning curve is steep, you need to know JSX and ES2015 before you begin to learn react, because many examples use these syntaxes. You need to learn to build the system, although you can technically compile the code with Babel Standalone, but it's not recommended for production.

The Vue sample expands like a react, narrowing it down like Jquery. All you have to do is put the following tags on the page:

  <script src= "Https://unpkg.com/vue/dist/vue.js" ></script>

You can then write Vue code and apply it to production without worrying about performance issues.

Since the initial stage does not need to learn jsx,es2015 or build the system, it will take less time to build the application.

Local rendering

Reactnative enables you to write apps (iOS or Android) with native rendering capabilities using 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 conduct official cooperation, Weex is Ali's Cross-platform user Interface Development Framework, the Weex JavaScript framework is run with Vue. This thought that Vue could be exploited not only in browsers, but also in IOS and Android.

In the present, Weex is still active development, maturity also can not contend 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 very popular in the react community, and virtually the same reaction system has been used in Vue. To a limited extent, react + MOBX can also be considered a more cumbersome Vue, so it would be more reasonable to choose Vue if you are used to combining them.

Angular 1

Some of due's syntax is similar to angular's (for example, V-if vs ng-if). Because angular was a source of inspiration for Vue's early development. However, there are many problems in augular, which have been solved in Vue.

Complexity

Both API and design vue.js are much simpler than angular 1, so you can quickly grasp 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 applications in a way that you want, not at all times by following the rules set by angular 1, so that Vue can be applied to a variety of projects. We know that it is very necessary to give the decision to you, and that is why we provide webpack template, so that you use a few minutes to choose whether to use advanced features, such as thermal module loading, linting,
Css extraction and so on.

Data binding

Angular 1 uses two-way binding, Vue enforces one-way data flow between different components. This makes the data flow in the application clear and understandable.

Directives and Components

The instructions and components are more clearly divided in the Vue. The instruction encapsulates only DOM operations, and the component represents a self-contained self-contained unit--with its own view and data logic. There are a lot of mixed places in the angular.

Performance

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

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

Vue.js does not have this problem at all because it uses an observation system based on dependency tracing and asynchronously queues updates, 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.

Angular 2

Augluar 2 is a completely new framework. For example, it has a good component system, and many implementations have been completely rewritten, and the API has completely changed.

Typescript

Angular 1 for smaller applications, angular 2 has shifted focus and is geared toward large enterprise applications. Typescript is cited, which is useful for people who like to use Java or C # as a type of safe language.

Vue is also suitable for enterprise applications, and can also be used typescript to support types of official types and user contributions, although this is optional.

Dimensions and Performance

Both of these frameworks are very fast in terms of performance. But if you look at a third party reference, you can conclude that Vue 2 is faster than ANGULAR2.

In terms of size, although angular 2 uses tree-shaking technology and compilation techniques, the code size can be reduced.

Even though the compiler and the full functionality Vue2 (23KB) are much smaller than the angular 2 (50kb). Note, however, that the size reduction of the angular App uses tree-shaking to remove features that are not used in the frame, and will grow larger as the introduction function increases.

Flexibility

Vue provides building tools, but it doesn't limit how you build them. Some people like to build in a unified way, and many developers like this flexible and free way.

Learning curve

To start using Vue, you're using familiar HTML, JavaScript that conforms to ES5 rules (that is, pure JavaScript). With these basic skills, you can quickly grasp it (the guide) and put it into development.

The learning curve of angular 2 is very steep. Even if typescript is not included, they begin with a ES2015 standard javascript,18 npm dependency pack, 4 files and more than 3,000 words, all in order to complete the Hello world. And Vue's Hello world is very simple.

Ember

Ember is an omnipotent framework. It offers a lot of conventions, and once you get to know them, development can be very efficient. However, it also means that the learning curve is higher and inflexible. Trade-offs between frameworks and libraries (plus a series of loosely coupled tools). The latter is more liberal, but it also requires you to make more architectural decisions.

That is, it is best to compare the templates and data model layers of the Vue.js kernel and ember:

Vue creates a response on an ordinary JavaScript object, providing automated computational properties. In Ember you need to put everything within the Ember object and manually declare dependencies on the computed property.

Vue's template syntax can be a full-featured JavaScript expression, while handlebars syntax and help-function syntax are very limited by comparison.

In performance, Vue off Ember a few streets, even Ember2.0 's newest glimmer engine. Vue automatic batch update, ember when the performance key needs to be manually managed.

Knockout

Knockout is a pioneer in the field of MVVM and relies on tracing. Its response system is similar to Vue. It is also impressive for browser support and all the performance. It can support the minimum to IE6, while Vue can only support to IE9.

Over time, the development of knockout has slowed down, and a little bit old. For example, its component systems lack complete lifecycle event methods, although these are now very common. And an interface that is a bit unwieldy compared to the Vue call subassembly.

If you are interested in research, you will find that they are different in the conceptual concept of interface design. These can be reflected by the simple Todo List that they create. It may be a bit subjective, but many people think that the Vue API interface is simpler and more elegant.

Polymer

Polymer is another Google-sponsored project that is in fact a source of inspiration for Vue. Vue components can be roughly analogous to polymer custom elements, and both have similar development styles. The biggest difference is that polymer is built on the latest version of the Web Components Standard and requires extraordinary polyfills to work (performance degradation) that browsers don't support. In contrast, Vue does not need to rely on polyfills to work, at least to IE9.

In the polymer 1.0 release, the team is very limited in its use of data-binding systems to compensate for performance. For example, the only expressions supported in Ploymer are Boolean negation and a single method invocation, and the implementation of the computed method is not very flexible.

Polymer custom elements are created using HTML files, which limits your common javascript/css (and the language features commonly supported by modern browsers). By contrast, Vue's single file allows you to easily use the precompiled processor of ES2015 and the CSS you want to use.

When deployed to a production environment, Polymer recommends that all resources be loaded with HTML imports. This requires both the server and the client to support the HTTP 2.0 protocol, and the browser implements the standard. Whether this works depends on your target users and the deployment environment. If the situation is bad, you must use the Vulcanizer tool to pack the polymer elements. In this respect, Vue can implement lazy loading (lazy-loaded) Combining the characteristics of asynchronous components with the Webpack code partitioning feature. This also ensures compatibility with older browsers and can be loaded faster.

It is also perfectly possible to consolidate the Vue and Web component standards, such as the custom Elements, Shadow DOM style encapsulation. But now, before we make a serious commitment, we are still waiting for the standard to mature, and then widely used in the mainstream browser.

Riot

Riot 2.0 provides a small, elegant API that resembles a component-based development model (called "Tag" in Riot). Riot and Vue may share some design ideas. Even though the roit is heavier than the Vue, there are many notable advantages:

Rendering based on real conditions, Roit shows or hides all content based on whether there are branches.

The more powerful routing mechanism, the roit of the routing function of the API is very small.

More mature tools for support. Vue provides official support for Webpack, Browserify and Systemjs, while Roit relies on communities to build integrated systems.
Transition effect System. Riot is not available now.

Better performance. Roit the same performance problems as angular 1, despite the fact that the ad uses a virtual DOM, which is actually a dirty check mechanism.

The above is a small set to introduce the Vue.js 2.0 and react, Augular and other front-end framework competition, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!