Vue.js
Vue is a progressive framework for building user interfaces.Vue unlike the other framework, the core library is only focused on the view layer only, and easy to integrate with other libraries or other project. Vue offer use official typing and official decorator. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes. Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. About performance Vue has better performance and is much, much easier to optimize because it doesn’t use dirty checking.

In Vue, we also have render function and support JSX, because sometimes you do need that. Any valid HTML is also a valid Vue template, and this leads to a few advantages of its own:

  • For many developers who have been working with HTML, templates feel more natural to read and write. The preference itself can be somewhat subjective, but if it makes the developer more productive then the benefit is objective.
  • HTML-based templates make it much easier to progressively migrate existing applications to take advantage of Vue’s reactivity features.
  • It also makes it much easier for designers and less experienced developers to parse and contribute to the codebase.
  • You can even use pre-processors such as Jade to author your Vue templates.

Example from Vue :

JavaScript :

HTML :

React
Basically React and Vue have many similarities. Like they both maintain focus in the core library, they provide reactive and composable view components and they utilize virtual DOM.
React and Vue offer comparable performance in most commonly cases, in react we only use JavaScript, if we have HTML structures,we still expressed that in JSX. Render functions with JSX have a few advantages:

  • You can leverage the power of a full programming language (JavaScript) to build your view. This includes temporary variables, flow controls, and directly referencing JavaScript values in scope.
  • The tooling support (e.g. linting, type checking, editor autocompletion) for JSX is in some ways more advanced than what’s currently available for Vue templates.

For large applications, both Vue and React offer robust routing solutions. The React community has also been very innovative in terms of state management solutions. These state management patterns can be easily integrated into Vue applications. React Native enables you to write native-rendered apps for iOS and Android using the same React component model. This is great in that as a developer, you can apply your knowledge of a framework across multiple platforms. About optimization effort in React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root. To avoid unnecessary re-renders of child components, you need to either use Pure Component.

Example code :

 

Angular

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML  as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control.

Angular has 2 type :

Angular 1
Some vue syntax look very similar with Angular, because Vue was isnpired from Vue. Angular more complicated than Vue, where Vue focus on build non-trivial applications take less than a day and it’s tottaly different from Angular. Angular has structure how your application should be, while Vue is more flexible. In data binding angular use two way binding between scopes,while Vue just use one way data flow between components. Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have their own view and data logic. In AngularJS, there’s a lot of confusion between the two.

About performance AngularJS becomes slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to “stabilize” if some watcher triggers another update. AngularJS users often have to resort to esoteric techniques to get around the digest cycle, and in some situations, there’s no way to optimize a scope with many watchers.

Angular 2
Different Angular 2 from Angular 1 is Angular 2 is newest, the features a first-class component system, many component detail has been completely rewritten, and the API has also changed. In Vue all you need is familiar with HTML and ES5 JavaScript, in Angular we learn curve is step by step. The API of framework is huge and as a user we should familiar with the concept before we getting understand to use it. Angular required using TypeScript. Vue is much less opinionated than Angular, offering official support for a variety of build systems, with no restrictions on how you structure your application. Many developer enjoy this freedom, while some prefer having only one right way to build any application.

Leave a Reply