gistfile1.md

#Angular.js / Vue.js similarities & differences

##Similar stuff

• Same transtion API (enter/leave)

• Filters

• Two-way data-binding

• Nested scope inheritance

• Modules:

  • Angular enables to separate an application into modules
  • Vue allows to encapsulate assets, check Encapsulating private assets for more info

• [!] Directives are kind of different:

  • Angular: DOM manipulation, Events, web components
  • Vue: DOM manipulation and Events only. Vue.component for the web components

• Performance: see this performance comparison

##Untested stuff

• ~~Not sure if Vue has an under-the-hood equivalent for ng-src & ng-href (prevent 404 before compilation when binding images & links)~~~ Use the v-attr directive.
• Don't know how testable Vue is, while Angular is built with testability (mocks, DI, karma…) in mind. Check the last paragraph on this documentation page.

Angular

• IE8+ (IE8 support is to be dropped in the future)
• Full-blown framework: routing, services, DI, promises, $http...
• Real structure & config (app.run, app.config)
• $templateCache for building & caching templates
• Get complex on large-scale with nested/isolated $scope, $apply/$digest cycles
• ~80ko bare
• Poor documentation, official tutorial doesn't cover directives and stuff (better with the community growth)
• Dirty checking for data-binding
• Feels a bit like 'writing angular' more than 'writing javascript'
• Still a great framework overall

Vue + Component = pick'n'go

• IE9+
• Well written documentation with examples, and cover all of Vue's features
• Add your features: promises, ajax, routing: more flexible but sometime more glue to write (routing for instance)
• Less declarative templates (only directive are present, no ng-app and stuff)
• Doesn't enforce a particular structure
• require('template.html') for building & caching
• I like the clean, separated scopes: vm.data for all models, vm.methods for the event listeners & stuff, and lifecycle-related methods directly on the vm, such as vm.ready, vm.destroy… (check this example for a better understanding)
• Overall simpler API (Vue, Vue.extend, Vue.component, Vue.directive, Vue.filter)
• ES5 getters/setters for data-binding
• Feels simpler because of a simpler API. No confusion between factory/service/provider...
• ~30ko bare

Good writeup! Regarding testability: Angular definitely has better testing infrastructure because that's been a huge focus for the team and they have dedicated effort in that aspect. But due to the declarative nature of the API, well-written Vue code is very test friendly too. I'd love to provide a more comprehensive example of testing setup in the future.

Haven't noticed you reply, thanks !

After spending some time on Vue (and reactive libraries), I now have a better understanding of the testability of such tools. Basically, you manipulate data only, and code logic only. All DOM updates are left to the library (except in v-effect if you use it).

So the tests end up being simple checks of value instead of complex DOM mocking/simulation. It greatly simplifies and reduce the time & amount of code put into tests.