After working with the latest VueJS version we would like to share some experience and to tell about main differences between Vue and Angular.

Table of contents

1. Documentation
2. CLI
3. Zone.js vs Vue Reactivity
4. Rx and State Management
5. Drop In
6. Router
7. Extendability and reusability
8. UI components

1. Documentation

When you and your team have made a decision about JS framework the first thing you are going to proceed with is documentation.

Without diving deeply into examples we can admit that Vue docs are much more simple and straightforward. They seem to be written for developer by developers.

Moreover, Vue docs are available in 7 languages, but probably English is enough.

2. CLI

When we used Angular CLI previously, we were sure that it was the best CLI out there, but:
– Sometimes it’s very hard to customize
– Angular and CLI is split into multiple @angular packages with different versions. Sometimes it causes a lot of problems when upgrading CLI/Angular.
At the same time, Vue CLI 3 is the best CLI today:
– Customization is very easy and any package can be added at any time (thanks to the plugin system)
– Simplicity and flexibility (thanks to webpack)

3. Zone.js vs Vue Reactivity

Angular uses Zone.js to detect changes, which monkey-patches standard API’s for that, like setTimeout.

This causes certain problems:

• Difficulties with non-standard API, sometimes quite hard to resolve
• Horrible stack traces

Vue doesn’t need Zone.js, change detection works thanks to conversion of all data/state properties into Observer.
At the top level, it’s quite simple: Vue traverses through all of the properties with Object.defineProperty (this is why IE8 is not supported) and adds the getter/setter.

However, this approach has some caveats, but they are very well described and easy to understand.

Vue does not allow to dynamically add new root-level reactive properties to already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:

 var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

Vue.set(vm.someObject, 'b', 2)

It is also worth mentioning that Vue 2.6 will not have these problems since it will use Proxies and it will be possible to detect addition/deletion of the properties.

4. Rx and State Management

If talking about Angular out of the box, RxJS is a core of the framework, everything is Observable. While we really like Rx, we often have a question: “Should this really be inside Angular core?”

Especially at the very beginning a lot of developers were just casting Observable to a promise via .toPromise().

In addition, the whole idea of single data stream isn’t easy to understand, added on top of complexity of Angular itself.
At the same time, being such a massive framework, Angular doesn’t provide an implementation of the most popular pattern to work with data — State Management.

There is NgRx, but it became really stable and usable not much time ago .

Now let’s have a look at Vue.
First, any RxJS fan can easily integrate it into Vue at any point in time, just by adding an additional package. Second,  there’s even Vue-Rx, allowing to use RxJS Observables along with data.
Regarding State Management there’s an amazing official Vuex.

5. Drop In

Basically, this is the main upside (though some would consider this a downside) of Vue – everything is pluggable when needed.
Just add:

• RxJS
• Vuex
• TypeScript
• SCSS
• etc

Everything you need is always easy and fast to integrate.

6. Router

One of the most painful things with Angular is router. Even though it has been released 3 times, it is still horrible.
If speaking shortly:

1. There are no named routes –  it was really strange decision to remove named routes which is causing a lot of extra problems when supporting large codebase.
2. Strange event system, dependent on the Event type
3. Turning parameters into Observable  –  sometimes they are hard to work with, especially if you only need them once at the component initialization
4. For navigation it is suggested to use commands –  very strange solution which is not used by any other router
5. Lazy Loading of modules via their string names, given whole codebase is strongly typed…

If looking at the source code, it seems that a lot of these problems are related to the complexity and functionality of the router. So even if there were no such things like commands, feature set is still big which makes it complex and heavy.

At the same time, Vue router is super simple and it just works.

Yes, sometimes it may not have some features that Angular router has (i.e. abstract: true parameter for route doesn’t exist (especially useful for organizing tree structure for routes for stuff like breadcrumbs).

Nevertheless, even if it is not present it’s very easy to do via a component like:

// AbstractRoute.vue
<template>
  <router-view/>
</template>

Is it bad that there’s no such functionality out of the box?
Yes and no, because this is easy to do yourself, and at the same time router is still easy and fast (compared to the above problems with feature-rich Angular router).

7. Extendability and reusability

On one hand, every component in Angular is a TypeScript class. However, some TypeScript features are sometimes unusable or there are difficulties.

First of all that relates to OOP — inheritance, abstract classes, member visibility. Most of problems are related to Dependency Injection and AOT compilerю

In Vue  instance configuration is an object б  it’s very easy to work with, to extend and to refactor. There are powerful features for reuse  –  Mixin’s and Plugin’s.

8. UI components

In Enterprise world components usually have mockups, design, etc. Most often they are developed from scratch for specific use case/product. But not every developer has ability to create everything from scratch, especially when it is about pet projects and prototyping.

This is where existing UI components are very helpful. For Vue there’s already a big list of them: Element, Vuetify, Quasar, Vue-Material, Muse, iView, etc.

Especially, we would recommend Element and Vuetify, as they left a great impression: beautiful and stable components for every need, and with good documentation.

We also really like Buefy, based on the great CSS Bulma framework. Best used if you already use Bulma and want to add some components like DatePicker or TugInput.

In case of Angular  – there are only two Enterprise-level component frameworks: Angular Material (Google) and Clarity (VMWare).

And unfortunately, the development speed of Clarity seem to have slowed down a bit lately.