Wiederverwendung wird auch in der Webprogrammierung ganz groß geschrieben. Eine nahezu unüberblickbare Auswahl von Bibliotheken und Frameworks bemühen sich um die Aufmerksamkeit des Entwicklers. In ein solches Framework muss man sich sorgfältig einarbeiten, um es dann effektiv anwenden zu können. Nach einer allgemeinen Einführung wollen wir es mit Angular versuchen. Hat man die Funktionsweise und das Prinzip verstanden, dann gelingt ggf. auch der spätere Wechsel.

Auf dem Weg zum Lernen neuer Technologien und Konzepte für moderne clientseitige Webapplikationen sind wir schon ein gutes Stück vorangeschritten. Ein Blick in unsere Agenda zeigt, was heute auf der Tagesordnung steht.

Fassen wir kurz für unsere Leser, die erst jetzt zu unserem Kurs stoßen, zusammen, was bisher geschah. Zunächst haben wir uns die technologische Basis für moderne Webapplikationen angesehen. Die Architektur beruht auf einer clientseitigen Ausgestaltung der Architektur. Die technologische Basis bildet HTML5 für die Gestaltung der Seitenstruktur (Teil 1); damit ist die Aufgabe von HTML5 auch schon erledigt. Um ausdruckstarke Seiten zu erstellen, bietet HTML5 eine Reihe von neuen, spezifischen Tags. Das Design, d. h. das Layout und die Gestaltung einer Seite, werden dagegen in CSS3 vorgenommen (Teil 2). Üblicherweise werden HTML5 und CSS3 nicht in einer Datei vermischt, sondern sauber voneinander getrennt. Die anzuwendende CSS3-Datei wird im betreffenden HTML5-Dokument referenziert und damit bekannt gemacht. Mit HTML5 und CSS3, den absoluten Basistechnologien für das Web, können Sie Webapplikationen erstellen, strukturieren und nach Ihren Vorstellungen gestalten. Auch wenn Sie serverseitige Applikationen bauen, zum Beispiel auf Basis von PHP, brauchen Sie beide Technologien. Um Dynamik auf Clientseite hinzuzufügen, d. h. im Browser, müssen Sie JavaScript einsetzen (Teil 3). JavaScript ist die Skriptsprache, die heutzutage durch alle modernen Webbrowser verarbeitet werden kann. Sie ist dabei plattform- und geräteunabhängig, d. h. nahezu alle Browser (Firefox, Safari, Edge …) auf allen aktuellen Betriebssystemen (Windows, Linux, macOS, Android, iOS …) und allen Geräteklassen (Desktop, Mobil, Tablet …) können JavaScript ohne weitere Zusätze direkt verarbeiten. Mit Hilfe von JavaScript kann man für Aktion und Reaktion sorgen, also etwa für die Verarbeitung von Nutzeraktionen – Daten können dynamisch ausgewertet, Grafiken auf eine Zeichenfläche im Browser ausgegeben werden. Mit der Hilfe spezieller APIs kann man bspw. die Ortungsdienste nutzen, den Batteriestatus bei mobilen Geräten abfragen u. v. m.

React now! Verpasse nicht diese tolle React-Weiterbildung

---

Das dreitägige ReactJS Intensiv-Training zum Vorankommen. Du lernst von den Grundlagen bis Hooks, alles, um dein eigenes React-Projekt erfolgreich zu starten.
mit Hans-Christian Otto, Program Chair der React Days

JavaScript selbst wird von den Browsern in unterschiedlichen Sprachstandards unterstützt. Neue Features werden dabei noch nicht von allen Browsern angeboten, sodass man bei der Programmierung ein eher defensives Vorgehen wählen sollte, um eine möglichst breite Kompatibilität zu erreichen. Ebenso merkt man JavaScript seinen ursprünglichen Charakter einer Skriptsprache bis heute deutlich an. Moderne und häufig eingesetzte Sprachfeatures wie die Objektorientierung sind nicht immer leicht umsetzbar. Diese „Missempfindungen“, meist in Kombination mit einer vermissten Typisierung der Sprache, haben oft Wechsler aus einer anderen modernen Hochsprache wie Java oder C#. Die Lösung dafür kann der Einsatz von TypeScript (Teil 4), einem Superset von JavaScript sein. TypeScript bietet eine vernünftige Syntax für die objektorientierte Programmierung, den Einsatz von Datentypen und weitere Sprachmerkmale moderner Programmiersprachen. TypeScript wird während des Entwicklungsvorgangs mit Hilfe eines Transpilers (eine Sonderform eines Compilers) in JavaScript übersetzt. Dabei kann der JavaScript-Standard angegeben werden, wodurch man für eine maximale Kompatibilität mit allen zum Einsatz kommenden Browsern sorgen kann. Im Endeffekt bekommt der Browser auch nur JavaScript zur Ausführung angeboten, sodass keine Plug-ins oder Erweiterungen notwendig sind. Es bleibt also auf Seiten des Clients (Browsers) weiterhin bei dem Triple aus HTML5, CSS3 und JavaScript. Aus Sicht des Entwicklers kommt noch positiv hinzu, dass jeder gültige JavaScript-Code auch innerhalb von TypeScript verarbeitet wird, d. h., JavaScript-Bibliotheken und APIs von Drittanbietern kann man stets ohne Einschränkungen verwenden.

Im Grunde hätte man jetzt alles an Bord, um Webapplikationen jeder Größe und Komplexität zu erstellen. Der Nachteil bestände jedoch darin, dass man mit jedem neuen Projekt das Rad im sprichwörtlichen Sinn neu erfinden müsste. Moderne Softwareentwicklung lebt intensiv von Wiederverwendung. Gerade Webapplikationen auf Basis von JavaScript machen davon sehr regen Gebrauch. Für fast alle auftretenden Anforderungen und Programmierprobleme stehen Bibliotheken und Frameworks zur Verfügung. Sie werden über zentrale Paketmanager wie npm angeboten und können mit einem einzigen Befehl in bestehende Projekte zur Verwendung eingebunden werden. Der Einsatz von Bibliotheken und Frameworks ist das Thema dieses Teils der Artikelserie. Neben den theoretischen Grundlagen werden wir uns die konkrete Verwendung anhand des Frameworks Angular ansehen. Daran wollen wir die grundsätzliche Funktionsweise studieren und eine erste Beispielapplikation implementieren.

Bibliotheken und Frameworks als Basis für die Wiederverwendung

Moderne Softwareentwicklung ist dadurch gekennzeichnet, dass man Code für bekannte Probleme und Anforderungen möglichst nicht neu schreibt, sondern wiederverwendet. Open Source hat gerade im Umfeld der Webprogrammierung dazu geführt, dass man vor der Erarbeitung einer eigenen Lösung nach einer generischen Bibliothek oder für umfassendere Fragen nach einem Framework Ausschau hält. Der Aufwand kann damit in vielen Fällen erheblich reduziert werden, denn man kann auf erprobte Lösungen zurückgreifen, die Fehlerrate wird sinken und die eigenen Ressourcen können in die spezifische Problemstellung investiert werden.

Was ist nun der Unterschied zwischen einer Bibliothek und einem Framework? In der Praxis wird zwischen diesen beiden Grundelementen der Softwareerstellung und -wiederverwendung nicht immer exakt getrennt

Bibliotheken

Ein Entwickler spricht von einer Bibliothek, ein anderer von einem Framework. Grundsätzlich kann man sagen: Eine Bibliothek ist eine Ansammlung von Funktionen, Services usw. – meist in Form von generischen Klassen, die durch andere Programme genutzt werden können. Für die Verwendung einer Bibliothek muss man diese in das eigene Projekt einbinden bzw. die zu nutzenden Elemente importieren. Wichtig: Die Bibliothek kann weitgehend ohne Einschränkungen durch das nutzende Programm verwendet werden. Sie macht i. d. R. keine Vorgaben bzw. Einschränkungen bezüglich des Aufbaus des Programms bzw. der Systemarchitektur. Da man meist nur wenige Funktionen/Services einer Bibliothek verwendet, wird die Größe des Quellcodes mehr zunehmen, als wenn man die Funktion eigenständig neu implementiert hätte. Dennoch werden die Vorteile der Nutzung einer Bibliothek die Nachteile in den meisten Fällen überwiegen. Bibliotheken können heruntergeladen und zum Beispiel manuell in die bestehende Projektstruktur eingebunden werden. Für die Aktualisierung ist man in diesem Fall vollständig selbst verantwortlich. Der Programmierer nutzt eine Bibliothek stets wie eine Blackbox, d. h., er muss sich an die vorgegebenen Konventionen zur Kommunikation mit der Schnittstelle halten. Wie die Bibliothek intern arbeitet, ist zweitrangig und man muss sich nicht unbedingt damit beschäftigen.

Im Umfeld der Webprogrammierung werden Bibliotheken über Paketmanager wie npm eingebunden. Dazu werden diese über zentrale Repositories bereitgestellt und auch ein Update kann unproblematisch darüber erledigt werden. Viele Services werden heute als nutzbare Dienste über die Cloud in Form von RESTful APIs angeboten und können dann durch das Internet genutzt werden.

Frameworks

Ein Framework geht über die Funktion einer Bibliothek hinaus. Es bietet ein generisches Lösungskonzept für eine bestimmte Art von Applikationen. Die eigene Applikation wird dazu in den Rahmen des Frameworks integriert. Meist gibt das Framework eine bestimmte Struktur und Architektur vor, an die man sich halten muss, wenn man das Framework verwenden möchte. Im Gegensatz zu einer Bibliothek wird der eigene Code über Callback-Methoden vom Framework aufgerufen. Allerdings werden auch beim Einsatz eines Frameworks Bibliotheken genutzt. Sowohl der Quellcode der eigenen Applikation als auch das Framework selbst nutzen Webbibliotheken. Der Unterschied zwischen einem Framework und einer Bibliothek ist in Abbildung 1 illustriert.

Abb. 1: Unterschied zwischen Bibliothek und Framework

Es gibt eine riesige Menge von Bibliotheken und Frameworks für die Nutzung von JavaScript beim Erstellen von modernen Webapplikationen. Tabelle 1 enthält eine Auswahl bekannter Frameworks und eine Kurzbeschreibung.

Tabelle 1: Ausgewählte JavaScript-Bibliotheken und Frameworks

Sehr häufig lesen und hören Sie von Angular. Angular ist inzwischen ein ausgereiftes Framework für eine Vielzahl von Webapplikationen. Es ist das Thema der kommenden Textabschnitte.

Angular

Was brauchen wir? Sofern noch nicht auf Ihrem Entwicklungsrechner vorhanden, installieren Sie Node.js und npm und einen Editor bzw. eine integrierte Entwicklungsumgebung, zum Beispiel Visual Studio Code. Die aktuell installierten Versionen erfragen Sie über die Kommandozeile mit folgenden Befehlen:

node -v
npm –v

Danach installieren wir bereits das Web-Framework Angular. Auch dazu bedarf es nur des Kommandos npm install -g @angular/cli.

Wir können an dieser Stelle bereits die erste Angular-App erzeugen. Erstellen Sie dazu ein passendes Projektverzeichnis, begeben Sie sich dann auf Ebene der Kommandozeile und erstellen Sie das Gerüst der App wie folgt mit dem Befehl ng new MyApp. Beantworten Sie die Frage, ob Sie ein Routing erstellen wollen zustimmend und wählen Sie CSS als Stylingsprache. Einige Augenblicke später sollten alle Dateien und Abhängigkeiten zum Projekt erzeugt sein. Starten Sie Ihren Editor – in unserem Fall Visual Studio Code – und öffnen Sie das Projekt. Vielleicht sind Sie etwas überrascht, wie viele Dateien und Ordner angelegt wurden (Abb. 2). Wie Sie jedoch sehen werden, wird sich die Arbeit hauptsächlich auf den App-Ordner konzentrieren.

Abb. 2: Die Ordnerstruktur einer Angular-App

Wir sind natürlich mehr als gespannt und möchten das Ergebnis sofort begutachten. Aus der Kommandozeile starten Sie die App mittels ng serve --open und öffnen auch gleichzeitig den Standardbrowser des Systems. Dazu wird die App kompiliert und der lokale Server gestartet. Über http://localhost:4200/ greifen Sie auf die App aus Ihrem Browser zu. Das Ergebnis sehen Sie in Abbildung 3.

Vue, Vite,Vitest

Explore Vitest, the JavaScript testing framework built for Vite, with React, Vue, and Node.js support plus modern features like ECMAScript modules.

Download for free

Abb. 3: Die gestartete Angular-App

Es ist Zeit für einige Erläuterungen zur Projektstruktur einer Angular-App. Angular verwendet einen komponentenbasierten Aufbau, das heißt, die gesamte Applikation wird als Komponente aufgefasst. Auf oberster Ebene gibt es die sogenannte Top Level Component. Diese besteht aus weiteren Komponenten usw. So entsteht eine Hierarchie, die auch als Komponentenbaum bezeichnet wird. Im Wesentlichen besteht die Anwendung aus den beiden Dateien app.module.ts und app.component.ts im app-Ordner. Zusätzlich dient die Datei main.ts als Startpunkt der Applikation. Die Anwendungslogik wird in der Datei app.component.ts definiert (Listing 1).

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titel='My App';
}

Es handelt sich hierbei um TypeScript und an dieser Stelle liegt die erste Angular-Komponente vor. Diese besteht aus zwei Teilen:

• aus dem Komponentencode, der durch eine TypeScript-Klasse repräsentiert wird

• aus dem Decorator (@Component), der die Konfiguration und die Anmeldung der Komponente beim Angular Framework übernimmt

Mittels import { Component } from '@angular/core'; importieren wir die Klasse Component zur eigenen Verwendung, dann kommen wir auch schon zum Decorator @Component, der hier wie folgt definiert ist:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Mit Hilfe eines Decorators werden Klassen um weitere Informationen, d. h. um Metadaten erweitert. Über die Eigenschaft selector zeigen Sie an, an welcher Stelle die Komponente verwendet werden soll. Über die template-Eigenschaft konfigurieren Sie schließlich, dass bei der Instanziierung der Komponente das hinterlegte Template gerendert werden soll. Ebenso verweisen Sie auf die zugehörige CSS-Datei für das Styling der Komponente. Die eigentliche Komponente wird nun in Form einer ECMAScript-2015-Klasse, d. h. mit TypeScript definiert. Im Moment gibt es nur eine einzige Eigenschaft: titel. Damit haben Sie eine erste Komponente vollständig definiert bzw. von Angular erstellen lassen.

Kommen wir zur Datei app.module.ts, dem Applikationsmodul. Den Quellcode sehen Sie in Listing 2.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nach den Import-Anweisungen folgt der Decorator @NgModule. Hier findet eine deklarative Konfiguration eines Angular-Moduls statt. Mit Hilfe von Modulen werden in der Angular-Plattform zusammengehörige Komponenten und Services gekapselt. Dabei besteht jede Angular-Anwendung aus mindestens einem Modul, nämlich konkret dem Applikationsmodul. Folgende Angaben sind verpflichtend:

• Die Einstiegskomponente in die Applikation: bootstrap: [AppComponent]

• Die Angabe, welches Zielsystem angesprochen werden soll: imports: [BrowserModule]; in diesem Fall möchten wir die Applikation in einem Webbrowser laufen lassen; wir verwenden vorerst nur diesen Applikationstyp; wir haben schon darauf hingewiesen, dass mit Angular auch Applikationen für andere Systeme, wie etwa mobile Geräte, möglich sind; in diesem Fall müssten wir an dieser Stelle andere Module importieren, stellen diese Möglichkeiten hier jedoch ausdrücklich zurück

• Abschnitt declarations: alle hier aufgeführten Komponenten sind im gesamten Applikationsmodul sichtbar und können von jeder anderen Komponente verwendet werden; wir haben im Moment nur eine Komponente namens AppComponent

Wenn Ihnen diese Konfigurationen zunächst etwas verwirrend, vielleicht sogar übertrieben vorkommen, dann liegt es daran, dass Sie im Moment nur eine Komponente haben. Sobald die Webapplikationen umfassender werden, wird sich die Stärke einer zentralen Konfiguration schnell herausstellen.

Schreiten wir weiter durch die Dateien des Angular-Projekts und kommen wir zur Datei main.ts (Listing 3).

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
 
if (environment.production) {
  enableProdMode();
}
 
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Hier wird der Start der Applikation definiert. Der Browser möchte zum Schluss eine HTML5-Datei verarbeiten. Diese trägt auch hier den Namen index.html (Listing 4).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Innerhalb des <body>-Tags wird der sogenannte Bootstrap-Vorgang ausgelöst. Konkret:

<app-root></app-root>

Die selector-Konfiguration der AppComponent-Komponente sorgt ihrerseits dafür, dass an dieser Stelle die Komponente gerendert wird. Der <body>-Tag wird nach erfolgreichem Laden der Komponente ersetzt. Achten Sie darauf, dass innerhalb der index.html-Datei kein <script>-Tag für die Einbindung von JavaScript notwendig ist. Auch die Script-Anweisung wird gewissermaßen erst während des Builds der Anwendung dynamisch in die HTML-Datei eingefügt.

Das war sicherlich eine sehr umfassende Version eines „Hello World“-Beispiels. Nun wollen wir mit einer echten kleinen Applikation starten.

To-do-Liste

Die Überschrift verrät es bereits: es geht um das simple Beispiel einer To-do-Liste. Wir können an diesem einfachen Beispiel einige wichtige Vorgehensweisen erklären. Schließen Sie die bisherige Testapplikation in Visual Studio Code, begeben Sie sich dann auf die Kommandozeile und legen Sie ein neues Angular-Projekt an. Wir nennen es MyToDo. Das Projekt erstellen wir also mit dem Befehl ng new MyToDo. Danach starten wir die Applikation via ng serve. Öffnen Sie nun das Projekt (bzw. die Ordnerstruktur) in Visual Studio Code. Los gehts mit den Änderungen.

Wir brauchen zunächst eine minimale View. Diese definieren wir in der HTML-Datei der Komponente. Es genügen uns ein Eingabefeld und ein Button, also:

<input type="text" placeholder="Eintrag hinzufügen"/>
<button>Hinzufügen</button>

Hinweis: Bitte binden Sie beide Tags nicht, wie in HTML üblich, in ein <Form>-Tag ein. Ansonsten wird die Seite fälschlicherweise nach dem Betätigen des Buttons neu geladen. Das ist bei einer Single-Page-Applikation nicht gewünscht. Sie werden jetzt sehen, wie Sie die Daten aus der View (HTML) zum Controller (TS) bekommen. Dazu ermöglicht Angular es Ihnen, für jedes Element im DOM-Baum eine lokale Variable zu deklarieren. Die Deklaration einer Variable erfolgt dabei über ein vorangestelltes #-Zeichen. Diese Variable steht Ihnen danach innerhalb des gesamten Templates (HTML-Datei) zur Verfügung. Definieren wir eine Variable für den input-Tag:

<input #item type="text" placeholder="Eintrag hinzufügen"/>

Die Variable haben wir mit item bezeichnet, also hier #item. Nun müssen wir auf einen Klick auf den Button reagieren, was mit Event Binding passiert. Die allgemeine Syntax lautet:

(eventName)="NameDesEvents"

Und konkret für den Button sieht das dann wie folgt aus:

<button (click)="addToDo(item.value)">Hinzufügen</button>

Wir definieren also ein Event addToDo und als Parameter übergeben wir den Wert der lokalen Variable item mittels item.value. An dieser Stelle sind wir in der View zunächst fertig und wechseln in den Controller der Komponente, d. h. in die zugehörige TypeScript-Datei. Die Klasse AppComponent erweitern wir wie folgt:

export class AppComponent {  
 
  toDoArray:Array<string>=[];
 
  addToDo(item:string){
    this.toDoArray.push(item);
  }
}

Wir definieren ein Array für die Aufnahme der Listeneinträge und das Event addToDo. Dieses nimmt den Wert über den Parameter item entgegen und fügt diesen der Liste hinzu. Im Übrigen müssen die Namen des Parameters im Controller und in der View nicht übereinstimmen. Sie können statt item im Controller zum Beispiel auch value verwenden. Zusammengefasst: Der Wert, der im Inputfeld des Formulars eingegeben wurde, ist nun durch den Weg über die lokale Variable in der Klasse AppComponent gelandet und kann dort verarbeitet werden.

Daten müssen jedoch auch wieder vom Controller in die View übertragen werden. Dazu wechseln wir wieder in die View (HTML-Datei) und erstellen eine Liste mittels <ul>-Tag. Die einzelnen Elemente der Liste werden über <li>-Tags generiert. Da man sehr häufig Listen von Daten darstellen muss, gibt es in Angular die sogenannte *ngFor-Direktive. Mit deren Hilfe kann man über die einzelnen Elemente einer Liste iterieren und zwar direkt in der View. Wie sieht das genau aus? Relativ einfach, jedoch für den Neueinsteiger in Angular durchaus eindrucksvoll:

<div class="data">
    <ul>
      <li *ngFor="let item of toDoArray">{{item}}</li>
    </ul>
  </div>

Wir iterieren über jedes Element der Liste toDoArray und geben den Wert der Liste über item aus. Das erfolgt mit Hilfe der Angular-Direktive *ngFor. Im Browser können Sie nun einen Eintrag in das Formularfeld schreiben und mit Betätigung des Button wird dieser in das Array geschrieben und als Liste wieder ausgegeben. Dass es funktioniert, beweist ein Blick auf Abbildung 4*.

Abb. 4: „ToDo“-Liste mit Angular

Natürlich sieht das Design alles andere als ansprechend aus. Darum haben wir uns jetzt auch in keiner Weise gekümmert. Es ging lediglich darum, wie wir Daten aus der View an den Controller übertragen, diese dort verarbeiten und sie wieder ausgeben. Ebenso fehlt noch jegliche weitere Funktionalität, zum Beispiel das Löschen von Items.

Angular bietet also eine Reihe von Features und damit einen umfassenden Rahmen für anspruchsvolle Webapplikationen. Dazu gehören u. a.:

• ein Rahmen zur Strukturierung von Webapplikationen

• die Umsetzung des MVC-Patterns zur Trennung der Schichten

• Daten- und Event-Bindung

• Erweiterungen in Form von Angular-Direktiven wie *ngFor

Im Übrigen reagiert Angular sofort mit einer Neuübersetzung der Quellen und einem Reload im Browser, wenn Sie Änderungen am Quellcode vornehmen. Das beschleunigt die Entwicklung erheblich. Wir konnten hier nicht viele Features von Angular beschreiben, dennoch zeigt bereits das sehr einfache Beispiel, wie viel Unterstützung man durch ein Framework bei der Entwicklung einer Webapplikation bekommen kann.

Fazit und Ausblick

Das Thema dieses Teils der Artikelserie war es, sich mit der Arbeit von Bibliotheken und Frameworks vertraut zu machen. Wir haben erfahren, dass diese ein Mittel zur Wiederverwendung sind. Durch den Einsatz eines Frameworks wird einem als Entwickler die Struktur einer Applikation vorgegeben. Bei sehr einfachen Anwendungsfällen mag das etwas aufgesetzt wirken, sobald man jedoch eine gewisse Größe und Komplexität erreicht hat, wird man die Features eines solchen Frameworks zu schätzen wissen. Am Beispiel von Angular haben wir den Einstieg vorgenommen. Hat man einmal die Idee, den Ansatz und die Projektstruktur verstanden, wird man nach und nach besser damit zurechtkommen. Die vielen Features, die ein Framework mit sich bringt, kann man nur sehr schwer eigenhändig programmieren. Daher lohnen sich i. d. R. der Aufwand für die Einarbeitung und der Overhead, der mit der Nutzung verbunden ist.

Im kommenden Teil der Artikelserie wird es um Ionic gehen. Ionic ist ein Open-Source-Web-Framework zur Erstellung von Hybrid-Apps und Progressive Web Apps (PWAs) auf Basis von HTML5, CSS, Sass und JavaScript bzw. TypeScript. Dabei basiert es zudem auf Angular und Apache Cordova und stellt eine Programmbibliothek aus verschiedenen Komponenten zur Verfügung, mit denen interaktive Apps programmiert werden können. Wir bauen also erneut auf dem vorhanden Technologiestack auf und sehen uns ein anderes Teilgebiet der modernen Webprogrammierung an. Bis dahin: Feilen Sie an Ihrer ersten Angular-App. Hinweis: Den Quellcode zum Projekt finden Sie hier.