In diesem Workshop wollen wir die Komponentenbibliothek Ant Design im praktischen Einsatz kennenlernen. Die geniale React-Komponentenbibliothek Ant Design bietet eine vollständige Palette an hochwertigen, responsiven und reaktiven Enterprise UI-Komponenten für Web-Frontends. Darüberhinaus ermöglicht sie die schnelle Realisierung kompletter Webpräsenzen ohne dafür eine einzige Zeile HTML oder CSS Code schreiben zu müssen.
Zum Bauen unseres Web-Frontends nutzen wir den Paketmanager npm. Mit diesem können wir schnell und einfach einen modernen Web-Frontend Tech Stack unter Verwendung der Technologien TypeScript, Webpack und React realisieren. Außerdem können wir zahlreiche Zusatztools wie Tests, Linter und CSS-Präprozessoren aus der npm Registry nutzen.
Insgesamt kommen die folgenden Technologien zum Einsatz:
- Ant Design 3.1
- TypeScript 3.4.5
- Webpack 4.40
- React 16.2
- JavaScript Fetch API
- Less 3.9
- Jest 24.9
- TypeDoc 0.14
- ESLint 6.8.0
- TSLint 5.16
Als fertig bestehendes Backend für unser Frontend-Projekt bietet sich die International Chuck Norris Database an, eine einfache und klar strukturierte REST-API die wir mit der integrierten JavaScript Fetch API ansprechen können und die uns mit unendlich vielen Chuck Norris Witzen versorgt. Beispielsweise liefert hier ein simpler GET-Request auf http://api.icndb.com/jokes/random einen entsprechenden Response Body im JSON Format zurück, den wir anschließend in unserem Frontend parsen und anzeigen können:
{
"type": "success",
"value": {
"id": 478,
"joke": "Chuck Norris can instantiate an abstract class.",
"categories": ["nerdy"]
}
}
Nach dem Klones des Git Repositories installiert der folgende Befehl alle npm Pakete die der genannte Tech Stack verwendet und die in der Datei package.json aufgelistet sind. Die in dieser Datei im Bereich script aufgelisteten npm Targets stehen anschließend zur Verfügung.
npm install
Zum Bauen und Betrieben des Web-Frontends kann mit dem folgenden Befehl der Webpack Dev Server gestartet werden:
npm run webpack:devserver
Die gebaute und in den Webpack Dev Server gemountete Frontend Anwendung kann jetzt im Browser eingesehen werden unter:
http://localhost:5000/
Es sollte nun das folgende Frontend im Browser zu sehen sein:
Beim allen Änderungen am Projektcode baut der Webpack Dev Server das Frontend selbstständig neu und aktualisiert die Webseite im Browser.
Hier sind nun zwei Übungsaufgaben, die es durch Erweiterungen im TypeScript-Code umzusetzen gilt:
Eine neue Instanz der Komponente Progress aus dem Ant Design Framework soll in der Komponente RandomJoke anzeigen, wieviele Chuck Norris-Witze der maximal täglich ertragbaren Anzahl von 10 bereits angezeigt wurden.
Zeigen Sie einen Notification Dialog mit einer sprechenden Beschreibung und der Severity INFO aus dem Ant Design Framework an, wenn der Benutzer einen Menüpunkt auswählt, für den im Content-Bereich noch "To be defined .." angezeigt wird.
Hier sind ein paar weiterführende Workshops zur Vertiefung der einzelnen verwendeten Technologien unseres Tech Stacks:
https://blog.mayflower.de/6135-typescript.html
https://blog.mayflower.de/6324-typescript-tooling-npm-webpack.html
https://blog.mayflower.de/6344-typeacript-java-entwickler.html
https://blog.mayflower.de/6229-typescript-workshop.html
Eine ausführliche Übersicht über die Funktionsweise aller npm-Targets unseres npm-Tech Stacks kann in der MarkDown-Datei NPM-TARGETS.md eingesehen werden.