Was bei Mini-Apps gut funktioniert hat
In diesem Kapitel möchte ich auf die Erkenntnisse eingehen, die ich bei der Recherche von Mini-Apps aus der Sicht eines Webentwicklers gewonnen habe, oder die Frage beantworten, was es bedeutet, Mini-Apps zu entwickeln.
Komponenten
Anstatt das Rad neu zu erfinden und Entwickler eine weitere Implementierung gängiger UI-Paradigmen wie Tabs, Akkordeons und Karussells erstellen zu lassen, werden Mini-Apps mit einer Standardauswahl von Komponenten ausgeliefert, die bei Bedarf erweitert werden kann. Auch im Web gibt es viele Optionen, von denen ich einige im Kapitel zu Mini-App-Komponenten aufgeführt habe. Idealerweise wären Komponentenbibliotheken im Web so aufgebaut, dass sie sich frei kombinieren ließen. In der Praxis gibt es oft einen bestimmten Lock-in in Bezug auf ein Designsystem, das Sie verwenden müssen, wenn Sie eine Komponente verwenden. Oder die Komponentenbibliothek wird so verteilt, dass es alles oder nichts ist, aber keine einzelnen Komponenten einfach zu einem Projekt hinzugefügt werden können. Es gibt jedoch atomare Komponenten, die Sie isoliert verwenden können, oder Bibliotheken wie generic-components, die bewusst ohne Stil sind. Es scheint eine gute Idee zu sein, solche zu finden und zu verwenden.
Model-View-ViewModel
Das Architekturmuster „Model–View–ViewModel“ (MVVM) erleichtert die Trennung der Entwicklung der grafischen Benutzeroberfläche (der Ansicht) über eine Markup-Sprache von der Entwicklung der Backend-Logik (des Modells). Das bedeutet, dass die Ansicht nicht von einer bestimmten Modellplattform abhängig ist. Obwohl es einige dokumentierte Nachteile des Musters gibt, funktioniert es im Allgemeinen sehr gut für Anwendungen mit der Komplexität von Mini-Apps. Das ist besonders bei umfangreichen Vorlagenbibliotheken (siehe nächstes Kapitel) von Vorteil.
Seitenweises Denken
Beim Debuggen von Mini-Apps zeigt sich, dass es sich im Wesentlichen um Anwendungen mit mehreren Seiten (Multi-Page Applications, MPA) handelt. Das hat viele Vorteile, z. B. triviales Routing und konfliktfreies Styling pro Seite. Es gibt bereits erfolgreiche Beispiele für die Anwendung von MPA-Architekturen auf progressive Web-Apps. Wenn Sie in Seiten denken, können Sie auch Ressourcen wie die CSS- und JavaScript-Dateien jeder Seite sowie andere Assets wie Bilder und Videos besser verwalten. Am wichtigsten ist, dass Sie auf diese Weise automatisch Code-Splitting auf Routenbasis erhalten, wenn Sie nichts anderes laden. In diesem Fall wird auf jeder Seite per Definition nur das geladen, was für die Funktion erforderlich ist.
Build-Prozess
Bei Mini-Apps gibt es keinen sichtbaren Build-Prozess. Im Web nutzen moderne Build-Tools wie Snowpack das integrierte Modulsystem von JavaScript (ESM), um unnötige Arbeit zu vermeiden und schnell zu bleiben, unabhängig davon, wie groß ein Projekt wird. Technologien wie Web Bundles sind noch relativ neu, lassen sich aber problemlos in den Build-Prozess einfügen.
Leistungsstarke Funktionen
Die Webplattform hat in letzter Zeit viele neue Funktionen erhalten. Der Zugriff auf Geräte über Bluetooth, USB, HID, seriell und NFC ist jetzt möglich. Während Mini-Apps in WebViews ausgeführt werden und von einer JavaScript-Bridge abhängen, sind diese leistungsstarken Funktionen im Web direkt verfügbar. Sie programmieren also nicht über eine API, die von der JavaScript-Bridge bereitgestellt wird, sondern direkt über die Browser-API.
Danksagungen
Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent und Keith Gu geprüft.