Comparison with Angular

Framework Knowledge
1

Hello everyone.

I read an interesting comparison from a reddit comment. I am not sure if this is the most accurate information, but I would like to know your take on it.

For Angular:

  1. Way better forms/validation built in
  2. RxJS/reactive style programming built in + async pipe so you seldom have to subscribe
  3. Saner life cycle hooks than Aurelia
  4. Framework agnostic/web components built in with Angular Elements
  5. Better change detection so you aren’t limited to using a bunch of getters in your component
  6. Deep object checking by default when running Change detection
  7. Robust css encapsulation so your styles only affect their component, but it can be changed as needed
2

as someone working with angular on a daily basis here’s my take.

  1. the built in solution is pretty subpar and any more complex app will reach out to stuff like ngx-formly or the likes. the aurelia plugin on the other hand does some things super brilliant like being able to craft validation rules in a builder pattern style and reuse those across multiple fields.

  2. ng has a hard dependency on rxjs (e.g outputs) so lots of craft around that stems from its dependency. Aurelia on the other hand doesnt need it so naturally doesnt offer anything out of the box. there is an aurelia async binding though, which does exactly thw same as the async pipe

  3. nonesense. way more fine grained controll in Aurelia. guaranteed.

  4. true, although rarely in use

  5. blunder. in ng you cant really do computed observing, are limited to push strategy if perf is critical and fiddling with zone.js to wrap non-ng controls is a nightmare. in contrast Aurelia makes these super simple and just-works pretty much most of the time. otherwise a computedFrom or watch deco help brilliantly

  6. perf wise a nightmare

  7. the built in feature to prefix selectors with a random dynamic attribute is helpful but the deprecation of ng-deep makes you opt out of the feature way too often just to get simple child styling going

4 Likes
3

Yeah, I can’t speak to angular much but I can relate to using Aurelia:

  1. Way better forms/validation built in

I have found aurelia’s validation plugin to be quite pleasing to work with. It has a very easy to use TS api that you apply to your class constructors. Once you figure it out it works exactly how you’d want it to.

  1. RxJS/reactive style programming built in + async pipe so you seldom have to subscribe

I don’t use RxJS in aurelia (the store plugin i think) and have been able to build some pretty sweet apps with a lot of state using plain Typescript classes and services. So in my opinion RxJS is more complicated - there may be use cases for it in really complex apps but I haven’t need it yet.

  1. Saner life cycle hooks than Aurelia

Aurelia has easier to remember lifecycle hooks IMHO. Ask yourself, what code would you put in ngOnInit, ngAfterViewInit and ngAfterContentInit? Compare that to bound, attached, detached, etc.

  1. Framework agnostic/web components built in with Angular Elements
  1. Better change detection so you aren’t limited to using a bunch of getters in your component

I don’t use getters too often in Aurelia. Most of the time if I need change detection I use

@bindable propName;
propNameChanged(newValue, oldValue){ ...}
  1. Deep object checking by default when running Change detection

I think this doesn’t exist in angular, you have to use some sort of push thing, which I don’t know much about. In aurelia, deep object bindings work pretty well, but for change detection you probably have to do some event dispatching when you change a deep property if you need that.

  1. Robust css encapsulation so your styles only affect their component, but it can be changed as needed

I build my css using scss and basically wrap the entire scss block in the name of the component. Seems to encapsulate it pretty well.

my-component {
     // custom css here
     .class-name {}
}
2 Likes
4

Here’s my 5 cents
Validation in angular sucks - when I looked at it there was a major issue where you couldn’t easily access validation parameters in a validation message. Plus I had to use ng forms.

Rxjs everywhere is a minus! Why force it on http requests - it just makes it so much less convenient than await/async. There is a place for it certainly and nothing stops you from using it in aurelia.

4 Likes
5

It is truly great to see all the wonderful responses. Now, I am going to study all the finer points made here, verify myself and hopefully write about it.