Well done to the Angular team.
Well done to the Angular team.
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.
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.
* 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'));
Angularhello-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 {}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.
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.
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
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
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.
Now 14 to 15 is a bit more work again, but they have introduced an upgrade guide like this: https://update.angular.io/?v=14.0-15.0
I don't think that's quite true anymore. As someone sarcastically remarked on Twitter [0], React has patched native events with synthetic events; has rolled out its own scheduler in order to achieve the suspense effect ("patched the event loop"), and is going to patch the native fetch for reasons that I am not clear about, but that are doubtless also suspense-related. With hooks, it introduced a syntax with a set of implicit conventions that, confusingly, still looks like javascript, but has significant differences from how javascript works ("the rules of hooks"). React provides its own way of lazy-loading modules; its new server-side renderer currently assumes that when React rehydrates, it takes control of the whole DOM tree; and the docs are now strongly recommending people to use full-fledged frameworks (Next, Remix) when starting new projects. React has long outgrown its "it's just a library" stage, sadly.
[0] - https://twitter.com/RogersKonnor/status/1618739256775815168
Messing with the console is such a no-go that I'm appalled it even passed the drawing board, making the "React isn't a framework, it's a library" argument even more bonkers than it already is.
This all makes me want to move on to web components; but of course now the project that I am a developer on is locked in React :-(