Skip to content

Instantly share code, notes, and snippets.

@ayamflow
Last active August 29, 2015 13:56
Show Gist options
  • Save ayamflow/8883206 to your computer and use it in GitHub Desktop.
Save ayamflow/8883206 to your computer and use it in GitHub Desktop.

#Angular.js / Vue.js similarities & differences

##Similar stuff

  • Same transtion API (enter/leave)

  • Filters

  • Two-way data-binding

  • Nested scope inheritance

  • Modules:

  • [!] 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
@yyx990803
Copy link

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.

@ayamflow
Copy link
Author

ayamflow commented Jun 1, 2014

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment