Hybrid Apps - Dein Guide

Wir lieben sie. Seit über 10 Jahren entwickeln wir sie. Und auch unser Unternehmensname hat schon lange eine: Wir reden von Apps. Kein Wunder also, dass wir eigentlich alle Arten von Apps schon einmal kennengelernt haben. Denn es gibt sie für viele unterschiedliche Hardware, Zwecke und Inhalte – die Möglichkeiten sind quasi unendlich. Eine tragende Rolle spielt dabei immer die Technologie dahinter: Nur sie ermöglicht es nämlich, Apps zu bauen, die reibungslos funktionieren und beeindruckende Benutzererfahrungen bieten. 

Das Beste: Es gibt für jedes App-Projekt die richtige Technologie. Doch manchmal fällt es schwer zu verstehen, welche davon für Dein Projekt am meisten Sinn macht. In dieser Reihe werden wir deshalb alle Stärken und Schwächen jeder Technologie beleuchten und Dir dabei helfen, die beste Wahl für Dein nächstes App-Projekt zu treffen. 

Bisher haben wir Dir in unserer Reihe die Native App Entwicklung, Cross-Plattform Entwicklung, LowCode Apps  und Progressive Web Apps nahe gebracht. Heute dreht sich alles um Hybrid Apps.

Hybrid-Apps kombinieren Elemente von nativen und webbasierten Apps. 

Sie laufen in einer sogenannten WebView, einer integrierten Browserinstanz in der App. Der native Teil wird zum Beispiel in Android mit Kotlin oder in iOS mit Swift geschrieben. Der Web-Teil wird durch die Webtechnologien HTML, CSS und JavaScript entwickelt. Das bedeutet, dass die App, wenn sie auf Deinem Smartphone läuft, durch die WebView schaut und Dir die Web-basierten Teile anzeigt. Das ermöglicht es, Web-Technologien zu verwenden, um bestimmte Teile der App zu erstellen, was oft einfacher und plattformübergreifend ist.

Hybrid-Apps eignen sich gut für Unternehmen, die eine kosteneffiziente Möglichkeit suchen, auf mehreren Plattformen präsent zu sein, ohne den vollen Entwicklungsaufwand nativer Apps zu betreiben.

Typische Anwendungsfälle sind Apps, die hauptsächlich auf Inhalten basieren. Die bekanntesten Beispiele, die Du sicherlich kennst, sind Airbnb und Evernote.

🎯 Plattformübergreifende Entwicklung und Verfügbarkeit

Praktisch bei Hybrid-Apps ist, dass ein Code für verschiedene Plattformen (z. B. iOS und Android) verwendet werden kann. Änderungen und Aktualisierungen müssen nur an einer Stelle vorgenommen werden und betreffen beide Plattformen. 

💰 Ressourcenersparnis

Unsere Entwickler:innen können durch die Plattformübergreifende Entwicklung und Wartung Zeit und Ressourcen sparen, da sie eine einzige Codebasis pflegen. Dadurch entstehen natürlich auch geringere Kosten. Du musst also nicht separate Teams für jede Plattform einsetzen, was insgesamt wirtschaftlicher ist.

🛒 Veröffentlichung über den App Store 

Bei Hybriden-Apps kann man wie bei PWAs Web-Technologien verwenden, allerdings kann man diese, im Gegensatz zu PWAs, in die App Stores stellen.

🐌 Einschränkungen in der Performance

Kann langsamer sein als native Apps, insbesondere bei aufwändigen Animationen oder rechenintensiven Anwendungen. Das liegt an der WebView, die sie nutzen, was zu einer gewissen Verzögerung bei der Anzeige von Inhalten führen kann. Dieses Problem kommt bei nativen Apps nicht vor, da sie direkten Zugriff auf die Hardware haben und so leistungsfähiger sind.

🚫 Keinen Zugriff auf native UI-Elemente

Wie bei PWAs hat die WebView keinen Zugriff auf native UI-Elemente. Daher müssen Bibliotheken wie Onsen, Material UI oder Material Components Web verwendet werden.

🙅 Eingeschränkter Zugriff auf native APIs

Die nativen Funktionen der App können entweder durch eine JavaScript Bridge angebunden oder durch Plugins nachgerüstet werden. Beides ist nicht in jedem Fall optimal. Eine JavaScript Bridge ist recht aufwändig und geht sehr leicht kaputt, wenn sich am Inhalt der WebView etwas ändert. Und die Plugins kommen von Drittanbietern und bringen das Risiko von Kompatibilitätsproblemen, Verzögerungen bei der Implementierung neuer Funktionen und Sicherheitslücken.

🧑‍💻 Mehraufwand bei nicht gepflegten Projekten

Hybride Frameworks wie React Native bringen mit jeder neuen Version viele Änderungen mit sich. Zudem verwenden sie, neben nativen Libraries und Tools, eine Vielzahl von Web-Libraries und -Tools. Wenn diese nicht regelmäßig aktualisiert werden, z.B. weil ein Projekt pausiert, kann es schnell zur "Dependency Hell" kommen und der Wartungsaufwand exponentiell steigen.

Anforderungsanalyse

Der erste Schritt ist immer eine gründliche Analyse der Anforderungen. Klarheit darüber, welche Funktionen die App haben soll und wer die Zielgruppe ist, ist super wichtig. Denn es gibt, wie Du sicherlich durch diese Technologie Reihe gemerkt hast, sehr viele Möglichkeiten eine App zu bauen. Welche die Richtige ist, entscheidet sich an diesem Punkt.

Die Begriffe und Konzepte von "Hybrid" und "Cross-Platform" Apps überschneiden sich zum Teil, deshalb hier nochmal eine kurze Abgrenzung zur Verständlichkeit:
 

Web-App: Nutzt Web-Technologie (HTML, CSS, JavaScript)

Hybride App: Nutzt Web-Technologie und native Technologie

Cross-Platform App: Läuft auf mehreren Plattformen (iOS, Android, evtl. Desktop)

Bei Apps, die einfache Hardwarefunktionen nutzen und auf verschiedenen Plattformen laufen sollen, macht unter anderem die Hybrid-Entwicklung Sinn. Insbesondere wenn Du oder Dein Entwickler:innen-Team bereits viel Erfahrung mit Web-Technologien habt, aber noch nicht viel Erfahrung mit Native-Entwicklung.

Auswahl der Hybrid-Technologien

Deine Analyse hat dazu geführt, dass Hybrid tatsächlich die richtige Technologie für Dein Projekt ist? Prima, dann geht es darum, das passende Framework zu suchen. 

Beispiele für Frameworks zur Erstellung von hybriden Apps sind React Native oder Ionic. Diese Frameworks bieten fertige “Plugins”, die nativen Code und Web-Code enthalten. Durch sie kann die App auf native Teile, wie z.B. die Kamera oder den Standort zugreifen. Das passende Framework wird genutzt, um die Arbeit zu erleichtern und weitere Funktionen bieten zu können. Entscheidest Du Dich gegen die Entwicklung mit einem Framework, dann muss die native Funktionalität über eine JavaScript Bridge angebunden werden.

Design und Prototyp

Dadurch, dass die App plattformübergreifend bereitgestellt wird, sollte das auch im Design berücksichtigt werden. Durch responsives Design stellen wir sicher, dass Deine App auf verschiedenen Geräten ein konsistentes Benutzererlebnis bietet. Wir empfehlen, vor Beginn der eigentlichen Entwicklung einen Prototypen zu erstellen, um das geplante Erscheinungsbild und die Funktionalität zu überprüfen. In diesem Schritt sind Änderungen deutlich einfacher als mitten in der Entwicklung oder sogar nachträglich. Sonst würde Dein Projekt doch nicht so viel Zeit und Geld sparen, wie Du es Dir mit dieser Technologie erhofft hast.

Entwicklung & Testings

Die eigentliche Entwicklung erfolgt unter Verwendung der ausgewählten Frameworks und Tools. Der Hybrid-Charakter ermöglicht die Verwendung eines gemeinsamen Codes für verschiedene Plattformen. Während der Entwicklung ist es wichtig, auf die Optimierung der Leistung zu achten, insbesondere wenn komplexe Funktionen implementiert werden. Und abschließend sind umfassende Tests natürlich auch wichtig, um potentielle Bugs vor Launch zu erkennen. 

Deployment

Yay, Deine App ist bereit für den Launch! Sie wird ähnlich wie native oder Cross-Plattform Apps auch über den App Store bereitgestellt. Der Veröffentlichungsprozess hängt dann von der Plattform ab, für die die App entwickelt wurde.

Wartung und Aktualisierung

Wie bei allen digitalen Anwendungen erfordert auch die Wartung und Aktualisierung von Hybrid-Apps regelmäßige Pflege. Die Integration neuer Funktionen und die Behebung von Fehlern sollten systematisch erfolgen, um die App auf dem neuesten Stand zu halten.

Eine Hybrid-App macht für Dein Projekt Sinn, wenn Du nach einer plattformübergreifenden Lösung suchst und Zeit und Ressourcen sparen möchtest. Sie eignet sich gut für Apps mit grundlegenden Anforderungen an die Gerätehardware und bietet dennoch eine native Erfahrung. 

Deine Anwendung muss in diesem Fall aber relativ einfach sein und keine extreme Leistungen haben, denn in diesem Fall wäre es dann sinnvoller, eine Native App oder Cross-Plattform App zu programmieren. Solltest Du aber nur eine reine Webfunktionalität benötigen, ist eine Progressive Web App (PWA) eine passende Wahl. Hybrid wird es erst, wenn Du die nativen Funktionen benötigst.

Wie Du siehst, kommt es auf die spezifischen Anforderungen Deines Projektes an, Deine Ressourcen und die langfristigen Pläne an. Wenn Dir diese Sachen klar sind, wird Dir die Entscheidung leichter fallen. Und natürlich bieten wir Dir wie immer unsere Beratung an.

Dir hat der Artikel gefallen?

Dann schau doch gerne mal bei den anderen Artikeln aus dieser Reihe vorbei, die dir die  Native App Entwicklung, Cross-Plattform Entwicklung, LowCode Apps und Progressive Web Apps näher bringen.

Du bist ein Unternehmen und möchtest mit uns zusammenarbeiten? Melde Dich gerne!

Du bist ein:e krasse:r Digital-Expert:in und möchtest ein Homie werden? Hier entlang!