Single Page Applications

Die UI vieler Businessanwendungen werden mittlerweile mittels Single Page Application (SPA) Frameworks umgesetzt. In diesem Abschnitt sollen die ersten Schritte absolviert werden.

Ziel des Kurses

Vorstellung von SPA

Was ist SPA?

  • SPA = Single Page Application

  • Es wird initial eine (meistens fast leere HTML Seite) mit einem Javascript File

  • JavaScript wird nach Ladevorgang ausgeführt und ertellt HTML.

  • Es werden asynchron Server-Request ausgeführt um Daten empfangen und anschließend anzuzeigen

  • Es gibt relativ viele Frameworks die diese Funktionalität bereitstellen

Vorstellung SPA Frameworks

React

  • Maintainer: Facebook

  • JSX als eigene HTML nahe Sprache

  • Komponenten werden durch Funktionen abgebildet

  • Webpack als technologische Basis

Angular

  • Maintainer: Google

  • Klare Trennung zwischen HTML, Typescript, CSS

  • Eigener HTML Style für Schleifen oder Bedingungen

  • Webpack als technologische Basis

VueJS

  • Maintainer: Evan You (developer)

  • HTML ähnliches Template Script

  • Eigene Objekte zur Stateverwaltung

Gemeinsamkeiten

  • Alle haben "Starter-Befehl": Das Grundsetup wird mit einem Befehl eingerichtet

  • Alle bauen auf webpack auf (module builder / dev server provider)

  • Alle stellen Hot-Reloading Dev Server bereit

  • Alle liefern nach dem Bau statischer Dateien aus, welche beliebig ausgeliefert werden können

  • Man kann jedes im Web lösbares Problem mit jedem dieser Frameworks lösen

React

  • React als UI Framework mit Stateverwaltung

  • Voraussetzung: NodeJS und NPM

Aufsetzen einer React Anwendung (create-react-app)

Generell ist die Dokumentation auf der offiziellen Seite zu finden https://reactjs.org/docs/create-a-new-react-app.html

  • im Terminal ausführen: npx create-react-app <app-name>

  • Projekt wird in Ordner <app-name> erstellt.

  • npx: execute npm package binaries, https://www.npmjs.com/package/npx

Inhalt des Ordners:

create react app files

Möchte man TypeScript als Programmiersprache mit React verwendung fügt man --template typescript als Parameter hinter dem create-react-app Befehl zum Erstellen einer neuen React App ein.

package.json

  • package.json ist die Projektdatei für node Projekte

  • wichtigste Abschnitte in der Package.json:

    • dependencies: Alle Pakete die man in dem Projekt nutzen möchte. Zu finden unter https://npmjs.com

    • devDependencies: Alle Pakete zur Entwicklungszeit. Nicht zur Laufzeit auf Servern

    • scripts: Skripte die man mit npm ausführen kann. npm run <scriptName> in Terminal ausführen

Skripte

  • start: Starten des development Servers

  • build: Bauen der produktiven App

  • test: Testen der Anwendung

  • eject: Das Tor um Hinter die Kulisse der Magic (Oneway-Script)

JSX

JSX ist ein HTML änlich aussehende Scriptsprache welche die Verbindung von JavaScript und HTML Syntax ermöglicht.

Weitere Informationen findet man unter: https://reactjs.org/docs/introducing-jsx.html

Grundsätzliche Funktionsweise von Komponenten

Komponenten können Abschnitte der Anwendung kapseln. Dies dient der Wiederverwendbarkeit von Funktionalität.

Funktionen als Tag in dem JSX Dialekt eingebunden werden. Die Parameter werden über Attributes im öffnenden Tag übergeben (ausgenommen der Property children). Die übergebenen Daten werden als Objekt als Argument in der Funktion zur Verfügung gestellt.

Weitere Informationen findet man unter:https://reactjs.org/docs/components-and-props.html

Das in der Vorlesung gezeigte Beispielprojekt ist auf Github zu finden:

Hooks

Um Zustände zu speichern und asynchrone Operationen wie die Abfrage von Daten vom Server durchzuführen werden seit React 16.8 Hooks innerhalb der functional components genutzt.

useState

Um Daten und Zustände innerhalb einer Komponente zu verwalten wird useState verwendet. Eine Anleitung ist unter https://reactjs.org/docs/hooks-state.html zu finden.

useEffect

Um Seiteneffekte wie beispielsweise das Holen Daten von Servern zu veranlassen werden useEffects genutzt. Eine Anleitung ist unter https://reactjs.org/docs/hooks-effect.html zu finden.

Daten von Server anzeigen

Im Folgenden werden not einmal die notwendigen Schritte für das Abfragen der TodoListe vom Server erklärt.

Als Erstes muss man den Proxy Server des Development Servers einrichten. Eine Anleitung dazu findet man bsp. https://create-react-app.dev/docs/proxying-api-requests-in-development/.

Dazu fügt man die Property proxy in der package.json hinzu: https://github.com/StevieSteven/react-typescript-example/blob/master/package.json#L44

Die Abfrage der Daten geschieht mittels der Clientbibliothek axios: https://github.com/StevieSteven/react-typescript-example/blob/master/src/rest/apiCalls.ts

Ausgelöst und gesteuert wird das Holen der Daten in der App.tsx: https://github.com/StevieSteven/react-typescript-example/blob/master/src/App.tsx

Dabei ist zu beachten, dass noch der Zustand des Ladevorganges verwaltet werden muss um wiederholtes Laden zu verhindern.