On: Angular v16

[pwb25]

I don't get why, Angular is really nice and has so much included and is well documented and no need for reflux and redux libraries that might do or not do what you need

[Jochim → pwb25]

I worked a bit with AngularJS. My, definitely over-exaggerated, feelings are that it was a hideous abomination. It's been long enough that I can only remember how awful it was to have to register everything with the right strings. A lot of negative sentiment towards modern Angular is probably a holdover from that.

Modern Angular on the other hand just seem full of pointless boilerplate. From a personal perspective, the way it's typically structured just feels verbose and clunky compared to React.

[vekker → Jochim]

I hear this critique a lot, but what exactly is that pointless boilerplate? When I write a React application, I have to use a lot of React-flavored boilerplate too... useEffect, useState, useThis and useThat... What makes this so different from the Angular TS annotations and lifecycle hooks?

[Jochim → vekker]

These are pretty subjective but:

* Angular classes just feel a lot more verbose/messy than the equivalent functional implementation in React.

* Perhaps it's just familiarity but I have a much easier time understanding what a functional React component is doing just by reading it from top to bottom.

* I have an irrational hatred for separate html template files.

* I'm also not a fan of templating via custom html attributes.

* Two way data binding is sometimes convenient but feels messy.

Pulling a random hello world comparison that starts from a base template from google:

React: 16 lines - 342 chars - 2 files changed. Angular 34 lines - 808 characters - 3 files changed, 4 if following common html template practice.

React

HelloWorld.js:

  import React from 'react';

  function HelloWorld() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    );
  }
  export default HelloWorld;

index.js:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import HelloWorld from './HelloWorld';

  ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Angular

hello-world.component.ts

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-hello-world',
    template: `
      <div>
        <h1>Hello, World!</h1>
      </div>
    `,
  })
  export class HelloWorldComponent {}

app.module.ts:

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { HelloWorldComponent } from './hello-world.component';

  @NgModule({
    declarations: [AppComponent, HelloWorldComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

app.component.ts:

  import { Component } from '@angular/core';

  @Component({
    selector: 'app-root',
    template: `
      <app-hello-world></app-hello-world>
    `,
  })
  export class AppComponent {}

[cout → Jochim]

I can definitely relate. I started using Angularjs around version 1.1 and remember being completely flummoxed at the error "Unknown provider: $providerProvider <- $provider". Debugging that left such bad taste in my mouth that I probably will never try Angular.

Angularjs did get better after 1.5 (when they added components and one-way binding), but IMO the model is still fundamentally broken. Vue fits my mental model much better and is much better documented; if I were to start a new project today, that's probably what I would reach for.

[knallfrosch → Jochim]

AngularJS is just a pile of magic strings that work or don't.

Looking at you: $scope, '@' '='

Angular2+ on the other hand, just install the language service and it will enable type checks for stuff like *ngFor even in the template (HTML) files.

It will suggest person .name, and if you do person.namee (typo), it will show up as error immediately. That's not far off from TypeScript.

[Illniyar → pwb25]

I don't know about others but the move from AngularJS(v1) to Angular burned that bridge for me.

Developers have long memories. And the fact google keeps burning good will with other shutdowns isn't contributing.

Besides that Angular is also a heavy framework (gives a lot, but requires you to do things in a very specific way) where hacker news crowd has usually a preference for unintrusive frameworks and ones that give a lot of freedom and leeway.

[rk06 → pwb25]

Look at this way, angular 16 is now introducing signals, vite support and improving standalone components.

Now, let’s compare to Vue, Vue has Standalone components, vite support, signals since v3. And fine grained reactivity since v0.

So, one must ask if here things are so good, why stick with angular and wait for everything to stabilise when you can jump ship to Vue now?

Similar argument can be made for react, though I admit hat Angular to react transition won’t be as easy.

And this is in context of newer advancements only. When you take a step back and look, you will see many cases where certain angular issues are only in angular. While rest of the js frameworks are converging

[Jasp3r → rk06]

I wouldn't call reactivity in Vue "fine grained". Every object that gets loaded into component state becomes reactive, and every piece of code that touches it gets dragged into a massive internal dependency tree.

Vue has blacklisted reactivity, everything becomes reactive (and observed) by default and you can opt-out, while MobX features whitelisted reactivity and is much more fine-grained

[rk06 → Jasp3r]

I say fine grained as changes in an object will invalidate only that object, and only it's dependencies will be updated.

Contrast with coarse grained reactivity I. E. angular, where it must dirty check all "reactive" objects to identify the changed object. As angular can't tell exactly which properties changed.

[cout → rk06]

What is vite?