War Angular jemals uncool?
Natürlich nicht. Es ist neben React und Vue eines der "Big 3". Doch Angular hatte immer seinen eigenen Bereich — Enterprise–Anwendungen. Das Ökosystem hinter Angular ist riesig. Alles, was unter @angular auf github zu finden ist, ist de facto Standard. Die Lernkurve ist höher als bei anderen Frameworks oder Libraries.
Deswegen war es für mich nie attraktiv genug, es für sehr kleine Projekte einzusetzen und vermutlich war das auch das Problem von einigen anderen Entwickler*Innen. Dafür gab es z. B. React oder Vue. Einfachere Handhabung, einfacheres Setup, geringere Lernkurve und für die Integration in andere Anwendungen eher geeignet als Angular.
Lösung
Um dieses Problem zu lösen, wurden schon frühzeitig einige Verbesserungen an Angular vorgenommen. Allem voran der Ivy renderer, welcher in Angular 6 angekündigt wurde, jedoch erst wirklich in Angular 12 Einzug fand. Alles sollte besser und schlanker werden. Hat sich das ganze durchgesetzt? Durchaus. Es brauchte nur eben seine Zeit.
Aber hat es die Leute zum Umdenken gebracht? Weiß ich nicht. Vue und React waren einfach die Platzhirsche für kleinere Anwendungen. Und Angular blieb meiner Meinung nach weiterhin vor allem im Enterprise–Umfeld vertreten. Das könnte sich mit den neuen Features ab Angular 14 stark geändert haben. Nun ist es auch in Angular möglich, wirklich kleine Anwendungen und Bibliotheken zu bauen.
Das Modulsystem ist mittlerweile optional, man setzt stattdessen auf Standalone Components. Boilerplate Code fällt weg, Abhängigkeiten (Module oder andere Standalone Components) können einfach direkt in die Komponente importiert werden. Das macht den Code schlanker, verbessert das Treeshaking und bringt die Abhängigkeiten näher an die Komponente heran als gesammelt in einem riesigen Modul.
Kurzum: Es macht den Code besser wartbar. Und auch die Developer Experience hat sich deutlich verbessert, was z. B. das Bauen angeht. Man kann ab v16 esbuild verwenden, was den Bauprozess extrem beschleunigt. Da das Angular Team sehr eng mit den Chrome DevTools Entwickler*Innen zusammenarbeitet, hat sich auch das Debugging von Angular Anwendungen verbessert. Es ist noch nicht so lange her, dass der Stacktrace beim Debuggen extrem groß war. Das lag daran, dass auch sehr viel irrelevanter Angular Code angezeigt wurde, den die meisten schlichtweg nicht benötigten. Diesen kann man sich jetzt optional einblenden lassen.
Beispiel
Bauen mit esbuild:
Initialer Start ca. 2 s, gecachter Start ca. 1,5 s & weniger Dateien
Bauen ohne esbuild:
Initialer Start ca. 8 s, gecachter Start ca. 3 s
@Component({
selector: 'app-root',
standalone: true, // Standalone component feature
imports: [CommonModule, RouterOutlet, FormsModule], // Standalone component feature
template: `
<input placeholder="placeholder" type="text" [ngModel]="name()" (ngModelChange)="name.set($event)" />
<div>{{sayHello()}}</div>
`,
})
export class AppComponent {
public name = signal('Chris'); // Signal feature
public sayHello = computed(() => `Hi, my name is ${this.name()}`); // Signal feature
constructor() {
effect(() => console.log(`show me the current value on signal change: ${this.name()}`));
}
}
