2021
Angular | React | Vue

Angular | React | Vue

Datum: September 2021
Lesedauer: 5 Minuten

In diesem Post fasse ich zusammen, was ich in 2 Tagen über Angular, React und Vue gelernt habe.

Grundprinzip

Angular, React und Vue sind im Grunde dazu da, die Wiederverwendbarkeit des Codes zu fördern und die UI mit Logik zu füllen. Dies ermöglichen die Komponenten. Zudem erleichtern diese einzelnen Teile das Testing und machen den Code der Frontend Applikation leserlicher.

Vergleich

ThemaAngularReactVue
Logoangularreactvue
Release201020132014
GründerGoogleFacebookEvan You
Webseitehttps://angular.io/ (opens in a new tab)https://reactjs.org/ (opens in a new tab)https://vuejs.org/ (opens in a new tab)
Aktuelle Version12.1.417.03.2.1
Beispiel ProjekteGmail, Wix, ...Facebook, Instagram, WhatsApp, Uber, ...Alibaba, Grammarly, GitLab, ...
BeschreibungAngular ist ein Open-Source Frontend Framework, welches primär für Single-Page-Applications verwendet wird. Dabei wird die Logik mit TS oder JS geschrieben.React bezeichnet sich selbst als eine JS Frontend Library. Genutzt wird React meistens um Web und Mobile Applikationen zu entwickeln.Vue ist ein Open-Source JS Framwork zur Erstellung von UI's und Single-Page-Applications. Hinter Vue steckt keine Firma sondern ein ehemaliger Google Mitarbeiter.
StrukturIn Angular werden Projekte in modules, components und services unterteilt. Jede Applikation hat mindestens einen root component und ein root module. Die Komponenten bestehen aus HTML mit einer Angular "template syntax". Somit können Daten empfangen und Elemente gerendert werden. Das einzigartige an Angular ist die Separierung von den UI Komponenten und der JS Logik.React ist eine UI Library, welche keine spezifische Struktur vorschreibt. Eine Applikation besteht aus elements und components. Elemente sind mächtiger als DOM Elemente, da sie bei Änderungen effizient geupdatet werden. Eine Komponente ist ein grösserer Block, welcher Inputs akzeptieren und Elemente produzieren kann.Das Framework ist so aufgebaut, dass das Gerüst mit HTML und die Logik mit JS geschrieben wird. In JS können Komponenten erstellt werden, welche man dann wiederum im HTML einsetzen kann.
EigenschaftenViele Features; alles ist eingebaut; TS; HTML und TS ist separiertMinimalistisch; Features müssen möglicherweise in "community packages" gesucht werden; es ist eine Library und kein Framework; Der JS/JSX Code beschreibt, was im DOM gerändert wird; der glieche Code ist für das Verhalten und UI zuständigVue lässt sich leicht über ein CDN oder npm einbinden und direkt nutzen; Anwendungen bestehen aus wiederverwendbaren Komponenten mit eigener Logik, Template und Styling; Änderungen im Datenmodell spiegeln sich automatisch im DOM wider; die Logik wird in einfachem, reinem JavaScript geschrieben.
TestingJasmine erlaubt die verschiedensten Funktionalitäten beim Schreiben der Tests.Jets ist in jeder React Lirbary eingebetet und benötigt keinerlei Konfiguration.Jets/Mocha kann ausgewählt werden.
LernkurveDie Angular Syntax und das komplexe Setup erschwert den Start mit Angular. Man kann sich aber den Start erleichtern, indem man default HTML und JS schreibt.Bei React ist das komplexe Setup und JSX ein Hindernis. Da alles in einem File ist, kann es auch schnell unübersichtlich werden. Will man etwas fortgeschrittenere Dinge umsetzten, werden schnell "third party libraries" benötigt. Jedoch gibt es auch Vorteile. Man muss kein TS erlernen und auf Stackoverflow ist ist die Library sehr präsent.Man muss lediglich ein script Tag hinzufügen, um Vue zu verwenden. Danach ist es relativ einfach, das simple und flexible Framework zu erlernen. Es ist kein TS nötig, HTML und JS sind separiert und man hat sehr viele Freiheiten. Dadurch ist es aber auch möglich, schlechten Code schreiben.

Grösse

Angular ist eindeutig das grösste Framework. Jedoch sind alle drei Frameworks sind relativ klein, verglichen mit einer durchschnittlichen Webseite.

Performance

Bundle Size

Auch hier ist Angular etwas im Nachteil. Obwohl nur das gerändert wird, was die Applikation auch benötigt, ist ein Angular Projekt etwas grösser.

Runtime Performance

Die Geschwindigkeit bei Interaktion mit der Seite ist bei allen Frameworks grossartig.

Popularität

npm Trends

downloads

Jobangebote

  1. React
  2. Angular
  3. Vue

Beispiel

Angular

index.html
<body>
    <app-root></app-root>
</body>
app.component.html
<app-top-bar></app-top-bar>
 
<div class="container">
    <router-outlet></router-outlet>
</div>
app.component.ts
import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
 
@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{ path: '', component: ProductListComponent }]),
    ],
    declarations: [AppComponent, TopBarComponent, ProductListComponent],
    bootstrap: [AppComponent],
})
export class AppModule {}
product.ts
export interface Product {
    id: number;
    name: string;
    price: number;
    description: string;
}
 
export const products = [
    {
        id: 1,
        name: 'Phone XL',
        price: 799,
        description: 'A large phone with one of the best screens',
    },
    {
        id: 2,
        name: 'Phone Mini',
        price: 699,
        description: 'A great phone with one of the best cameras',
    },
    {
        id: 3,
        name: 'Phone Standard',
        price: 299,
        description: '',
    },
];

Online Beispiel: https://stackblitz.com/angular/xamroalrvyvx (opens in a new tab)

React

App.tsx
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
 
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

Online Beispiel: https://codepen.io/gaearon/pen/gWWZgR?editors=1010 (opens in a new tab)

Vue

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Markdown Editor</title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/marked@0.3.6"></script>
        <script src="https://unpkg.com/lodash@4.16.0"></script>
        <link rel="stylesheet" type="text/css" href="/style.css" />
    </head>
    <body>
        <div id="editor">
            <textarea :value="input" @input="update"></textarea>
            <div v-html="compiledMarkdown"></div>
        </div>
 
        <script>
            new Vue({
                el: '#editor',
                data: {
                    input: '# hello',
                },
                computed: {
                    compiledMarkdown: function () {
                        return marked(this.input, { sanitize: true });
                    },
                },
                methods: {
                    update: _.debounce(function (e) {
                        this.input = e.target.value;
                    }, 300),
                },
            });
        </script>
    </body>
</html>

Online Beispiel: https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-markdown-editor?from-embed=&file=/index.html:0-878 (opens in a new tab)

Fazit

Mit fast 150'000 Webseiten liegt Angular weit hinter seinen Konkurrenten. Zudem ist auch kein grosser Wachstum erkennbar. Selbst Google setzte z.B. bei der Entwicklung neuer Projekte nicht immer auf sein eigenes Framework.
React ist klar am populärsten. Neben den vielen Facebook-Projekten wird das Framework auf über 10 Mio. Webseiten eingesetzt. Zudem ist es auf dem Arbeitsmarkt am gefragtesten, da viele Unternehmen auf React setzen.
Vue ist zwar am jüngsten, konnte jedoch in den letzten Jahren einen grossen Zuwachs verzeichnen. Momentan sind bereits 1.8 Mio. Seiten mit Vue realisiert worden. Auf GitHub ist Vue mit 188'000 Sternen sogar beliebter als React (mit 175'000 Sternen).

Fazit

Angular ist etwas schwieriger zu lernen, dafür sehr ausgereift. Da man bei der Installation das komplette Packet erhält, ist die Applikation später etwas grösser und langsamer. Dafür hat man aber auch alles dabei und muss sich nicht selbst nach Features umsehen.

React hat eine grosse Gemeinschaft. Die Zukunft der flexiblen Library sieht gut aus.

Vue ist am neusten. Es steckt auch keine Firma dahinter. Trotzdem kann es mit dem simplen und flexiblem Aufbau punkten.