Meine erste PWA für eine Konferenz erstellen

Innerhalb von vier Monaten organisierte meine Chefin bei der Digitalagentur, für die ich arbeite, die Konferenz „MV.digital“. (Wow!) Eine Woche vor der Konferenz fragte sie mich im Gespräch: „Ich hätte gerne eine Event-App. Kriegen wir das hin?“

Ich antwortete: „Aber sowas von!“

Endlich eine Gelegenheit für mich, eine Progressive Web App zu bauen. Auch wenn mir nur noch etwa zwei Tage dafür blieben.

Hintergrundinformationen zur MV.digital-Konferenz

Bislang gab es in unserer Region (dem nordöstlichen Bundesland Deutschlands) keine relevante Konferenz der Digitalbranche. Das wollte meine Chefin ändern. Ihr Wunsch war es, Unternehmer, Manager, Mitarbeitende und Interessierte aus der Region an einen Tisch zu bringen und ihnen zu zeigen, wie Digitalisierung ihren Alltag bereichern kann. Warum weit reisen für eine solche Konferenz, wenn man die Möglichkeit hat, selbst eine vor Ort zu initiieren? Sie tat es.

Auf der ersten landesweiten Digitalkonferenz am 10. Mai 2019 teilten insgesamt zwölf Redner aus Deutschland und Österreich – darunter Speaker-Legenden wie Karl Kratz, Tom Alby und Sven Deutschländer – ihr Wissen und ihre Erfahrung über digitale Geschäftspräsenzen und Online-Marketing mit den Gästen. Es war der Hammer!

Die Veranstaltung fand im historischen Gebäude der Universität Greifswald statt. Neben der Aula als Hauptbühne und erstem Slot wurde ein weiterer historischer Raum für einen zweiten Slot vorbereitet. In einem dritten Raum gab es reichlich Essen und Getränke. Wir hatten sogar 100 % handgemachtes Eis vom lokalen Eishersteller Jackle & Heidi. Wer genießt nicht gerne leckeres 🍨?

Ich war schon auf mehreren Konferenzen, darunter auch größere mit mindestens 1500 Teilnehmern. Das Ziel der MV.digital-Konferenz ist es nicht, in diese Dimensionen zu wachsen. Im Gegenteil, es ist ein Kernwert, die Konferenz angenehm klein zu halten. Deshalb war es schön, von Gästen und Rednern Feedback darüber zu bekommen, wie herzlich die Veranstaltung war. Ich habe das Gefühl, dass die überschaubare Größe und die familiäre Atmosphäre wirklich all die angeregten Gespräche ermöglicht haben. Alle waren leicht ansprechbar. Diese Erfahrung konnte ich bei größeren Konferenzen nicht machen.

Der Termin für die zweite Konferenz steht bereits fest. Aber wir werden das Gästelimit nicht ändern. Es soll so familiär bleiben, wie es geschätzt wurde.

Eine Woche vor der Konferenz

Die Vorplanung der Konferenz nahm viel Zeit in Anspruch. Da ich auch in der Woche vor der Veranstaltung involviert war, blieb nicht viel Zeit für die Entwicklung der Event-App. Tatsächlich musste etwa zwei Tage vor dem Versand des endgültigen Zeitplans per Newsletter an Redner und Gäste alles fertig sein.

Ironischerweise hatte ich noch nie eine Progressive Web App von Grund auf selbst gebaut. Ich hatte Tutorials gelesen oder mit Code herumgespielt. Aber ich hatte nie den richtigen Anlass, eine PWA zu entwickeln. Diesmal hatte ich ihn. Tools wie die Vue CLI bieten umfangreiche Features, darunter Unterstützung für Progressive Web Apps out-of-the-box, und sind leicht erweiterbar. Ich sah keine Hürde darin, unter Zeitdruck eine PWA zu erstellen.

Alles hat ein erstes Mal, und ich war total gespannt, loszulegen!

Reichen zwei Tage für die Grundlagen aus?

Nun, ich denke schon. Der Inhalt, der in der App angezeigt werden sollte, war bereits bekannt: Programm, Redner, Unterstützer und Veranstalter. Allerdings mussten die Informationen noch in ein Datenformat überführt werden.

Die App musste auch nicht die beste User Experience bieten. Es ging nur darum, eine App zu bauen. Nicht die beste, die es gibt, sondern die beste, die ich in der mir verbleibenden Zeit schaffen konnte.

Montag, Tag eins: Eine Frage des Stils und des Rahmens

Die erste Frage, die ich mir stellte, war, wie ich die App gestalten sollte. Nachdem ich die Idee, eigene Styles zu schreiben, aus Zeitgründen verworfen hatte, kam mir Googles Material Design in den Sinn. Auch wenn ich das Design dieser visuellen Sprache als eher kühl und technisch empfinde, wollte ich eine App in diesem Stil bauen. Ein willkommener Nebeneffekt: Die App fühlt sich mit dieser Design-Architektur für Android-Nutzer noch nativer an. (Meine bescheidene Meinung zu 🔗 PWAs vs. nativen Apps weiter unten.)

Ich hatte zuvor keine Erfahrung mit React oder Preact, wollte diese Frameworks aber ausprobieren. Ich habe etwa eine Stunde lang mit der Preact CLI herumgespielt. Auch dafür gibt es ein Material-Template mit Material-Komponenten. Ich merkte jedoch schnell, dass JSX und das Preact-Ökosystem mir noch nicht vertraut genug waren, um damit schnell eine App zu produzieren. Ich vertagte das Preact-Lernen.

Also ging ich zurück zur Vue CLI, auf der ich zwar auch noch keine PWA gebaut hatte, aber zumindest Erfahrung mit Vue.js hatte. Das Setup des Projekts klappte flott. Anschließend installierte ich Vuetify, das Material-Komponenten-Framework, das meiner Meinung nach das beste Framework für Vue.js ist, um die Material-Design-Richtlinien umzusetzen.

Und oh Mann. Ich bin immer wieder erstaunt, wie komfortabel es ist, mit den Vue-CLI-Templates loszulegen. Was für ein wunderbares Fundament. Routes waren schnell aufgesetzt, und auch die Einbindung von Vuetify ins Projekt war eine Freude.

Apropos Vuetify: Ich war überrascht, wie gut die Dokumentation gemacht ist. Ich konnte den Prototyp innerhalb eines Tages erstellen und alles, was ich mir vorgestellt hatte, mit Vuetifys Komponenten umsetzen. Die Beispiele in der Dokumentation sind sehr zugänglich und lassen sich leicht anpassen und integrieren.

Während der Entwicklung mit Vuetify wurde jedoch schnell klar, wie stark das Framework auf die Komponenten zugeschnitten ist. Vom vorgesehenen Zweck abzuweichen ist schwierig und nur mit Styling möglich, das an die Substanz geht. Ich wollte beispielsweise, dass das List-Element die Zeilen seiner Items nicht abschneidet. Um diese Idee durchzusetzen, musste ich jede Höhe des Elements auf auto umschreiben und auch eine ganze Reihe anderer Properties anpassen.

Dienstag, Tag zwei: Eine Frage der Daten und der letzten Feinheiten

Am zweiten Tag wurde mir klar, dass Nuxt auch eine Alternative zu meinem Vue-CLI-Setup gewesen wäre, aber ein Wechsel wäre zeitlich keine Option gewesen, und außerdem war die Nuxt-Architektur für das Projekt auch nicht notwendig. Ein anderes Mal also.

Den größten Teil des zweiten Tages verbrachte ich damit, Daten wie den Zeitplan, Biografien der Redner, Informationen über Veranstalter usw. in JSON zu mappen und einzubetten. Da ich eine Vielzahl von Informationen manuell sammeln musste (einschließlich Erstellung von Avataren der Redner und Optimierung von Logos), war eine Automatisierung dieses etwas mühsamen, aber notwendigen Prozesses nicht möglich.

Mit Hot Reloading der Website wurde jede Datenänderung sofort sichtbar, nachdem einer der Datenströme der Source aktualisiert worden war. Es war der Content, der die App wirklich zum Leben erweckte!

Es fühlte sich gut an, wie die App mit jedem Datenbaustein immer greifbarer wurde. Erst als die Komponenten mit Daten gefüllt und alles aufeinander abgestimmt war, konnte die App tatsächlich als App bezeichnet werden und begann darüber hinaus, ihre Kernaufgabe zu erfüllen: als Event-App zu informieren.

Natürlich wären Features wie Wegbeschreibungen schön gewesen, aber das war nicht essenziell und zeitlich nicht mehr drin. Ich hebe das für die nächste Version auf.

Auffällig beim Testen ist der Unterschied, wie PWAs zwischen Android und iOS gehandhabt werden. Während Android anbietet, PWAs direkt zum Home Screen hinzuzufügen, gibt es bei iOS kein Pop-up oder Hinweis darauf, dass die aktuelle Website standalone genutzt werden kann. Deshalb habe ich ein kleines, aber effektives Modal-Script verwendet, das speziell auf Safari abzielt und den Nutzer anleitet, wie die PWA installiert wird.

Liebes Apple, Safari ist wirklich alt geworden, und es ist ein bisschen mühsam, sich um die vielen Nachteile zu kümmern. Bitte seid aktueller.

Mittwoch: Geräteübergreifende Tests und Markteinführung

Auch wenn der Schwerpunkt der Tagesplanung am Mittwoch nicht auf der App lag, war es entscheidend, alle Inhalte noch einmal von Kollegen überprüfen zu lassen. Und natürlich mussten auch ein paar Device-Tests durchgeführt werden. Alles verlief wie erwartet, nur das Modal für Safari zeigte sich nicht.

Ein paar Code-Fixes, Inhaltsrevisionen und Logo-Resizes später war die fertige Event-App bereit, deployed zu werden!

Ich habe kein Tracking in die App integriert, sodass ich keine Nutzungsdaten erfassen konnte. Erinnert mich nächstes Jahr daran, ja?

Auf jeden Fall haben wir uns das Drucken eines Zeitplans gespart, und auch wenn nicht alle Teilnehmer der Konferenz die App zum Home Screen hinzugefügt haben, blieb ein Tab der Event-App immer offen. Ich würde das als Erfolg einstufen. 😊

Progressive Web Apps vs. Native Apps

Ein kurzer Exkurs.

Die Debatte darüber, ob PWAs besser sind als native Apps, läuft seit Jahren. Ich unterstütze stark die Überzeugung, dass PWAs tatsächlich die Zukunft sind.

Eine native App zu bauen und zu warten ist teuer und zeitaufwendig. Seit es Progressive Web Apps gibt, macht es jedoch in der Regel keinen Sinn mehr, eine native App zu erstellen. Wer möchte schon eine App für iOS und Android entwickeln und zwei völlig unterschiedliche Codebasen pflegen?

Mit einer PWA hat man eine funktionierende (SEO-freundliche!) Website inklusive. Wenn das allein für viele nicht schon ein Knockout-Argument ist.

Für bestimmte Bereiche können native Apps niemals ersetzt werden, aber der durchschnittliche Zweck einer App lässt sich mit einer PWA sehr gut umsetzen. Der komplexe Schritt der Veröffentlichung in Stores kann einfach umgangen werden. Außerdem: PWAs sind nicht in irgendeinem Store eingesperrt. Im Gegenteil, eine PWA kann direkt von jeder Website aus zum Home Screen hinzugefügt werden. Für mich ist das der schnellere Weg für Entwickler, eine App zu deployen, für Nutzer, eine App zu installieren, und insgesamt die angenehmere User Experience.

Unzählige Beispiele zeigen, wie die Erstellung einer PWA die Conversion von Unternehmen gesteigert hat. Starbucks ist eines der prominentesten Beispiele dafür.

Für die meisten Anforderungen und unter Verwendung von Frameworks wie Vue.js und React ist die Erstellung einer PWA einfacher denn je.

Wie Andy Bell es in seinem Artikel zur Web vs. native App Debatte formulierte:

Die ganze Idee, mit nativen Apps zu konkurrieren, erscheint mir auch ziemlich dämlich. Das Web gibt uns so viel kostenlos, wovon App-Entwickler nur träumen können, wie URLs und die Möglichkeit, sofort und kostenlos für die ganze Welt zu veröffentlichen.

[...] Ich glaube ans Web und werde weiterhin daran glauben, dass das Bauen von Progressive Web Apps, die die Webplattform umarmen, dem nicht-inklusiven Walled Garden der nativen Apps und ihrer App Stores weit überlegen sein wird. Ich wünschte nur, andere würden genauso denken.

Es liegt ganz in unseren Händen als Entwickler, PWAs schöner, schneller und voller flüssiger Interaktionen und User Experience zu machen!

Schlussworte

Eine einfache PWA in ein paar Tagen zu bauen ist mit modernen Tools definitiv kein Wunder mehr. Es ist eine Erleichterung, wie viel Arbeit einem dabei abgenommen wird.

Ich freue mich, dass die App aktiv genutzt wurde, und werde nächstes Jahr sicherlich etwas mehr Zeit investieren, um ihre Funktionalität zu erweitern. 🎉

Lass mich diesen Artikel mit ein paar Worten meiner Chefin, Dr. Katrin Zeidler, abschließen:

„Wenn man das Wissen aufschlüsselt, es leicht dosiert und den Druck hinter dem Thema Digitalisierung nimmt, kann man viel mehr erreichen.“

---

Artikel zu Ende. Hast du Tippfehler entdeckt oder Gedanken zu diesem Artikel? Schreib mir gern! 🙆‍♂️