Einblick in die webbasierte App-Entwicklung

Apps für Smartphones werden heute oft webbasiert entwickelt. Das Wort "webbasiert" bedeutet, dass die App wie eine Webseite mit HTML und JavaScript erstellt wird. Die Codes werden aber nicht in einem Browser angezeigt, sondern in der App. WhatsApp ist ein bekanntes Beispiel. Geräteübergreifende App-Entwicklung ist auch eine Reise durch die bunte Welt der Betriebssysteme, Programmiersprachen und konkurrierenden Standards. Genau das macht das Thema auch interessant.

Webbasierte App-Entwicklung bietet zwei große Vorteile:

• Codes müssen nur einmal geschrieben werden und sind für alle Plattformen wiederverwendbar. Das aufwändige Reengineering entfällt.
• CSS und HTML sind gute Werkzeuge, mit den man fluide Layouts erzeugen kann, Layouts also, die sich verschiedenen Displaygrößen intelligent anpassen.
• Für CSS und HTML sind bekannte Technologien. Dies eröffnet diverse weitere Vorteile.

3 Betriebssysteme - 3 Tools

Die beiden wichtigsten Tools sind XCode für iOS und Android Studio für Android. In der Windows-Welt ist Visual Studio vielleicht das wichtigste Werkzeug. In der iOS-Welt ist XCode unverzichtbar. In Bezug auf Android ist Android-Studio der absolute Platzhirsch.

All diese Tools bieten die Möglichkeit, in eine App eine Art Browser zu integrieren, ein Modul also, das HTML/CSS rendern kann. Genau hier setzt die webbasierte App-Entwicklung an.

Die Browser-Module heißen wie folgt:

• WebView in Android Studio
• WKWebView in XCode
• Chromium in Visual Studio oder nw.js

Chromium ist eine OpenSource-Technologie zur Anzeige und Verarbeitung von Webseiten, die von Google entwickelt wurde. Alle mir bekannten modernen Browser (z.B. Firefox, Opera, Brave und natürlich Chrome) nutzen Chromium als Basis. Und natürlich auch Frameworks wie nw.js, die dann eine Webseite wie eine App aussehen lassen können. Darüber hinaus nutzt nw.js Node.js als Basis. Was ist das nun wieder? Node.js ist eine Technologie, mit der man JavaScript außerhalb eines Browsers ausführen kann. Darüber hinaus kann Node.js auch etwas, was ein Browser nicht kann, z.B. einen Server betreiben oder auf das Dateisystem zugreifen. Dadurch können Apps auch leistungsfähiger werden als eine bloße lokale Webseite. Man kann all das tun, was eine dynamische Webseite auch kann, wie z.B. Dateien speichern, Datenbanken beschreiben usw. Bevor wir so weit ausholen, sollten wir uns gedanklich hier erst einmal mit einem einfachen Projekt auseinandersetzen: Lokale Webseite (ein bisschen HTML/JavaScript) in eine App umwandeln.

Ein Webviewer ist noch kein Browser.

Eine Herausforderung bei der webbasierten App-Entwicklung besteht darin, die Browser-Module so zu konfigurieren, dass sie sich auch wie Browser verhalten.

WKWebView (iOS) hat mit einem Browser ungefähr so viel zu tun wie eine Karosserie mit einem Auto. JavaScript, Redirects, SSL und viele weitere selbstverständliche Funktionalitäten müssen erst aktiviert und konfiguriert werden.

Dies gilt auch für das das WebView-Modul von Android. Meiner Erfahrung nach sind die Nacharbeiten etwas weniger kompliziert wie bei XCode.

Bei Chromium-Browser (im Zusammenhang mit nw.js) sind meiner Erfahrung die wenigsten Anpassungen erforderlich.

Besonderheit WKWebView

WKWebView (iOS) scheint weniger fehlertolerant zu sein, wenn es um die Ausführung bestimmter Codes geht, z.B. zur Medienwiedergabe. Hilfestellung bieten die Guidelines von Apple. Man muss sich daran gewöhnen, die Dokumente 1:1 zu befolgen. Die hohe Ausreifung von Browsertechnologien, z.B. Chromium haben dazu geführt, dass man sich an einen Luxus gewöhnt hat und dies auch irgendwie voraussetzt. Bei WKWebView ist es anders. Die Gefahr von Frustration ist unheimlich hoch.

Bei multimedialen Projekten, die ggf. auf Fremd-Bibliotheken aufbauen, kann die termingerechte Umsetzung gefährdet sein. Dann muss man in den Tiefen der verwendeten Bibliotheken nach Fehlern suchen. Ich bin sicher, dass dies auch schon einige Entwickler an den Rand der Verzweiflung gebracht hat.

Frameworks für die Entwicklung

Es gibt Frameworks, mit denen häufig vorkommende Aufgabenstellungen bei der App-Entwicklung schnell erledigt werden können. Beispiele Ionic, Flutter oder Cordova.

Wozu sind jetzt diese Frameworks da und welche Rolle spielen die Tools (XCode, Android Studio)? Um den Zusammenhang zu erklären, muss ich etwas ausholen.

Auf dem folgenden Screenshot sehen Sie, wie ein App-Projekt typischerweise aufgebaut ist, hier am Beispiel eines Xcode-Projekts. Links wird die Ordnerstruktur gezeigt. im mittleren Bereich können wir die Inhalte der Datei editieren:

Innerhalb der Ordnerstruktur befindet sich auch der HTML-Code, der für die Oberfläche der App zuständig ist. Eine typische App bietet ja auch Funktionen, die darüber hinausgehen, was ein Browser bietet (z.B. Kamera- oder Speicherzugriff). Diese Funktionen müssen betriebssystemspezifisch umgesetzt werden.

Der folgende Screenshot zeigt das Programm Android Studio, mit dem man eine App für Android-Systeme entwickelt:

Die Frameworks bieten eine Art Sorglospaket, bei dem man sich auf die Programmierung mit JavaScript konzentrieren kann. Dass der Code dann auch auf allen Geräten ausgeführt wird, kann man dem Framework überlassen. Das Framework sorgt dafür, dass all die gerätespezifischen Funktionen vorhanden sind - und zwar auf allen Betriebssystemen.

Frameworks sparen unheimlich viel Zeit, weil man sich auf die Programmierung der App-Funktionalität konzentrieren kann. Dass es auf allen Endgeräten läuft, kann man dem Framework überlassen. So jedenfalls die Theorie.

Die Firma Adobe hatte dem Cordova-Framework zu einer großen Popularität verholfen, indem Sie die Umwandlung eines HTML/JavaScript in eine App als Webservice angeboten hat. Dieses PhoneGap-Projekt wurde eingestellt, vielleicht, weil man sich schon bald den Markt mit anderen Anbietern teilen musste. Diese Anbieter verwenden als Kerntechnologie ebenfalls ein Framework. Ionic scheint derzeit eines der populärsten Frameworks zu sein.

Die Arbeit mit Frameworks ist eigentlich Laien nicht zu empfehlen, weil das Debugging dieser Projekte im Alltag ein tiefes Verständnis der Basistechnologien erfordert. Expertise erarbeitet man sich meiner Meinung zunächst mit einem der genannten Tools und dem Betriebssystem der Wahl. Ggf. käme auch ein Webservice infrage oder - bei einfachen Projekten - der Kauf eines fertig konfigurierten Webview-Moduls. Ein einfaches Projekt ist meiner Ansicht dadurch definiert, dass man sich innerhalb der Browserfunktionalität bewegt, also eine Webseite in eine App umwandeln möchte.

Fazit:

Die webbasierte und geräteübergreifende App-Entwicklung war nie einfacher. Man muss sich Zeit fürs Ausprobieren nehmen können. Wenn das Projekt zum ersten Mal durchgeführt wird und man im beruflichen Bereich unterwegs ist, müssen die Fallstricke in der iOS-Welt bewusst sein, damit es keine Enttäuschung gibt. Zur Einarbeitung sollte man direkt mit einem Tool erste Projekte umsetzen. Im späteren Verlauf kann man mit einem Webservice bzw. einem Framework die erste geräteübergreifende App entwickeln. Wer Apps geräteübergreifend entwickelt, weiß später eine Menge über die bunte Welt der Betriebssysteme. Das macht das Thema auf für viele Leute interessant. Meiner Meinung nach spart es sehr viel Zeit, eine App über einen Webservice (z.B. "webintoapp") generieren zu lassen, falls es sich um ein kleines Projekt handelt.