en
de
Software Engineering

In 3 Tagen zur Progressive Web App mit React

Jedes Jahr fahren wir mit der gesamten Firma vier Tage lang in ein Hotel zu unserem Weiterbildung-Event, dem „Zühlke Camp“. Dort haben wir die Chance, uns selbstorganisiert mit neuen Technologien, Methodiken und anderen Weiterbildungsthemen zu beschäftigen.

In unserem diesjährigen Camp hat sich eine Gruppe von Kollegen im“Web Topic“ mit dem Ziel zusammen geschlossen, das Thema Progressive Web App und React näher zu beleuchten.

Progressive Web App (PWA)  ist ein Sammelbegriff  und umfasst mehrere Schritte bei deren Durchführung man eine schnelle und offline-fähige „responsive“ Website erhält. Diese macht nativen Apps Konkurrenz, denn sie ist offline verwendbar und kann zum Home Screen hinzugefügt und somit auch wie eine herkömmliche App inklusive Splashscreen geöffnet werden. Außerdem ist die App plattformunabhängig und läuft somit auf Android, iOS* und Windows Phone.* Man muss sich nicht mit dem App Store beschäftigen und kann die Anwendung auch ganz normal am Desktop PC nutzen.

Wir haben uns vorgenommen folgenden Technologie-Stack zu verwenden:

  • React ist eine 2013 von Facebook veröffentlichte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. React wurde schnell wegen seines virtuellen DOMs und der guten Rendering Performance populär. Im Projektalltag konnten wir schon Erfahrungen mit diversen WEB Frameworks wie Aurelia oder Angular sammeln, hatten aber noch nicht die Gelegenheit mit React zu arbeiten. Aus diesem Grund wollten wir uns React etwas genauer anschauen.
  • React wird typischerweise zusammen mit Redux eingesetzt. Redux ist eine Library, um die Architektur und den Datenfluss in einer Anwendung übersichtlicher zu gestalten. Außerdem ist die Bündelung verschiedener Datenquellen in einen Store möglich. An diesen Store können sich die Komponenten (in der Regel: Higher Order Components) binden und die gewünschten Werte im UI anzeigen. Die Manipulation geschieht über Actions und läuft immer synchron ab. Asynchrone Datenoperationen müssen über entsprechende Middleware ausgeführt werden, hierfür gibt es bereits zahlreiche Bibliotheken wie z.B. redux-observable.
  • SemanticUI komplettiert unser Stack. Wenn bei uns ein neues Web-Projekt startet, wird häufig das vielfach erprobte Tool Bootstrap als Layout- und UI-Komponenten-Framework eingesetzt. Es gibt allerdings viele Alternativen wie zum Beispiel Zurb Foundation, Material UI und Semantic UI. Ziel war es, uns ein weiteres UI Framework näher anzuschauen und zu bewerten.

Um das Fortbildungscamp effizient zu nutzen und konkrete Ergebnisse zu erzielen, haben wir uns eine Projektidee überlegt und schnell ergab sich diese in Zusammenarbeit mit der Gruppe „IoT Experiments“.

Die Idee: Vernetze Parkplätze

Wir sind Anfang des Jahres in ein neues Gebäude gezogen. Für die Mitarbeiter gibt es unter dem Gebäude eine Tiefgarage, deren Parkplätze limitiert sind. Daher haben wir zusätzlich Zugang zu einem benachbarten Parkhaus. Damit nun niemand morgens frustriert aus dem einen Gebäude in das andere fahren muss, weil im Ersteren bereits alle Parkplätze besetzt sind, wollten wir unsere Parkplätze vernetzen.

Das IoT Team hatte den Plan, die Parkplätze mit Sensoren auszustatten und die Daten in der Cloud zu speichern, um sie anschließend zu verarbeiten. Daraus ergab sich ein guter Anwendungsfall, um hierfür eine App zu entwickeln. Diese App soll dem Parkplatzsuchendem anzeigen, ob noch Parkplätze frei sind. Da wir uns vorrangig mit den Technologien und nicht mit der Anzeige der Parkplätze selbst beschäftigten wollten, reduzierten wir den Umfang erst einmal auf eine Übersicht der freien Parkplätze.

Umsetzung & Erkenntnisse

Um gleich loslegen zu können, haben wir eine lauffähige „Hello World“ React-Anwendung mit Webpack und eine GraphQL-API mit gemockten Daten bereits vorbereitet. Wir haben in zwei Gruppen gearbeitet: Eine Gruppe hat sich um die Weiterentwicklung der React-Redux-App zur Anzeige der Parkplatz Informationen gekümmert; die zweite Gruppe um den Progressive Web App Part.

Zum Entwickeln haben wir Visual Studio Code und Chrome Lighthouse genutzt. Lighthouse ist ein Browserplugin welches eine Website scannt und feststellt, wie PWA kompatibel die Webseite bereits ist.

Bei der Umsetzung konnten wir uns dabei ein ganz gutes Bild der Technologien machen und diese für etwaigige Projekteinsätze einschätzen.

ReactJS

ReactJS zwingt einen dazu, stark komponentenbasiert zu denken. Dies erfordert zu Beginn ein Umdenken in den Köpfen der Entwickler, da z.B. Vererbung von Views durch komponentenbasierte Ansätze ersetzt wird. Sobald man sich die entsprechenden Paradigmen aber angeeignet hat, merkt man schnell, dass es keine Szenarien gibt (zumindest soweit uns bekannt), die man nicht auch mit den ReactJS-typischen Ansätzen lösen könnte.

Es mutet auf den ersten Blick merkwürdig an, dass die Komponenten einer ReactJS-Anwendung in JSX geschrieben werden, da hier HTML-ähnliches Markup mit JavaScript gemischt wird. Der Vorteil liegt auf der Hand: Es muss keine spezielle Template-Syntax erlernt werden, da für Schleifen oder Verzweigungen die bekannte JavaScript-Syntax verwendet werden kann. Seine wahre Stärke spielt ReactJS aber dann aus, wenn man statt JavaScript auf TypeScript setzt (wodurch JSX-Dateien zu TSX-Dateien werden).
Durch die statische Syntaxanalyse weiß der Entwickler bereits während dem Entwickeln, welche Properties eine Komponente besitzt und wie sie typisiert sind. So bekommt der Entwickler bereits während der Kompilierung Feedback, ob er alle Properties korrekt gesetzt hat.

Solche Fehler fallen bei SPA-Frameworks wie Angular oder Aurelia erst zur Laufzeit auf (und dann häufig auch nur durch manuelle Tests durch den Entwickler), da das Binding der Properties zwischen View und Viewmodel im untypisierten HTML geschieht. Allerdings gibt es bei den meisten Frameworks auch hier Abhilfe wie z.B. bei Aurelia das Paket „aurelia-template-lint“ welches in der Lage ist einen Sanity Check der Templates vorzunehmen.

Redux

Der Aufwand für die Implementierung der Actions und Reducer (und evtl. Funktionen der Middleware) sowie für das Verdrahten des Redux-Stores mit den Komponenten ist relativ hoch. Dieser Aufwand zahlt sich jedoch aus, sobald man die Actions ohne großes Nachdenken in den Komponenten verwenden kann und sich einfach an die gewünschten Properties des Stores bindet, um diese anzuzeigen. Sobald sich eine Property ändert, bekommen alle Komponenten, die sich daran binden, dies mit und können den aktualisierten Wert anzeigen, bzw. alle Werte aktualisieren, die sich aus dieser Property berechnen oder ergeben.

Neben ReactJS bieten auch Angular und Aurelia eine Integration von Redux in das Framework, wodurch Redux auch in Projekten, die nicht auf ReactJS setzen, verwendet werden kann. Die Verwendung von Redux macht durch den Aufwand der Action- und Reducer-Implementierung aber vor allem dann Sinn, wenn mit komplexen Datenströmen umgegangen werden muss.

Semantic UI

Semantic UI ist im Gegensatz zu Material UI nicht an Googles Android angelehnt, wodurch es ein plattformunabhängiges Look and Feel besitzt. Es ist wie Bootstrap responsive und bietet darüber hinaus zahlreiche Komponenten. Hierzu gehören z.B. Container, die einen Loading-State besitzen, während dessen ein Loading-Indicator über den Container gelegt wird und der eigentliche Inhalt sowie Suchfelder und ähnliche Komponenten, die man aus nativen Anwendungen kennt ausgegraut werden. Mithilfe von Semantic UI gelang es uns mit geringem Aufwand ein UI zu bauen, das sich tatsächlich nativ anfühlt. Hilfreich war dabei sicherlich die gute Integration in ReactJS, da Semantic UI hierfür einen Komponenten-Bibliothek bietet, die es ermöglicht anstelle von CSS-Klassen im Markup mit den Properties der Semantic UI-Komponenten zu arbeiten. Dadurch kann man beispielsweise die loading-Property der Container-Komponente von Semantic UI an eine entsprechende Property des ReactJS-States binden.

Progressive Web App

Um unsere Anwendung „progressiv“ zu gestalten, haben wir die Chrome Extension Lighthouse verwendet. Diese analysiert auf Knopfdruck die gerade angezeigte Webpage und vergibt in den 4 Kategorien „Progressive Web App“, „Performance“, „Accessibility“ und „Best Practices“ bis zu 100 Punkte. Wird in einer Kategorie nicht die volle Punktzahl erreicht, werden Hinweise angezeigt und Anleitungen verlinkt wie man die fehlenden Punkte erreichen kann. Dadurch ist es sehr einfach die eigene App „progressiv“ zu entwickeln.

Die wichtigsten Anforderungen, welche eine Web-Anwendung erfüllen muss, um den progressive Web Test zu bestehen sind nachfolgend kurz beschrieben.

  • Es sollte ein Service Worker registriert werden, dieser kümmert sich um das Caching der Anwendung.
  • Des Weiteren muss die App sichere Verbindungen (https) nutzen und auch bei einer schlechten Datenverbindung noch schnell genug laden.
  • Im Falle, dass kein Netzwerk verfügbar ist, sollten Server Anfragen ohne Fehler beantwortet werden (200-er Status-Codes).
  • Außerdem sollte ein Splash Screen sowie App-Icons in verschiedenen Auflösungen und diversen Farben in der manifest.json konfiguriert werden.
  • Falls Javascript nicht verfügbar ist, sollte ein entsprechender Hinweis angezeigt werden.

Am vorletzten Tag des Camps hatten wir bereits ein ansehnliches Ergebnis. Eine offline-fähige App, welche Daten aus der Cloud von realen Sensoren erhält und diese als (nicht) freie Parkplätze anzeigt. Außerdem kann man nach Parkplatzart filtern, so dass zum Beispiel einem Autofahrer keine Motorrad-Parkplätze angezeigt werden.

Fazit

Es waren wieder vier sehr lehrreiche und spannende Tage mit den Kollegen, in denen wir uns mit neuen Technologien beschäftigt haben.
React hat einige neue interessante Ansätze. Je nach Teamsetup und Projektanforderungen sollte man sich – eigentlich wie immer – gut überlegen ob React und/oder Redux eingesetzt werden sollen. Die Lernkurve ist im Vergleich zu anderen Frameworks recht hoch und man sollte es nur dann verwenden, wenn es zum Projekt passt, das Team bereits Erfahrung hat oder man sich das Anlernen während des Projektes leisten kann. Konzepte wie Redux oder reactive extensions können auch in anderen modernen Frameworks wie Aurelia oder Angular eingesetzt werden.

SemanticUI bringt einige neue Ideen und Features mit. Auch wenn wir mit Semantic UI unsere Vorstellungen umsetzen konnten, konnten wir keinen entscheidenden Vorteil gegenüber Bootstrap erkennen, sodass wir aufgrund unserer Erfahrung mit Bootstrap und dessen größerer Community weiterhin auf Bootstrap setzen würden.

Momentan hört man sehr viel über das Thema Progressive Web Apps und es gibt fast täglich neue Informationen zu Implementierung und Einsatzmöglichkeiten. Die Ideen und die Konzepte dahinter sind sehr gut um eine Webanwendung so zu entwickeln, dass sie einer nativen App in vielen Punkten Konkurrenz macht. Nicht alle dieser Konzepte sind neu, einige existieren schon länger und haben jetzt nochmal an Popularität gewonnen und wurden durch die Lighthouse Extension sehr gut aufbereitet.

Für weitere Ausbaustufen der Parkplatz-App gibt es bereits viele Ideen. Ein weiteres cooles Feature wäre zum Beispiel eine Push-Benachrichtigung mit einer Information, welche freien Parkplätze noch verfügbar sind. Diese könnte rund 100 Meter vor dem Büro versendet werden. Vorstellbar wäre auch eine Mustererkennung um eine Vorhersage zu treffen. Damit wüsste ein Mitarbeiter zum Beispiel, dass er mittwochs um 9 Uhr gar nicht erst einen Parkplatz in der Tiefgarage suchen muss.

*Noch nicht alle PWA-Features werden auf allen Plattformen unterstützt

 

Kommentare (0)

×

Updates

Schreiben Sie sich jetzt ein für unsere zwei-wöchentlichen Updates per E-Mail.

This field is required
This field is required
This field is required

Mich interessiert

Select at least one category
You were signed up successfully.