Native App vs Hybrid App vs Web App

    Wenn Sie eine App für möglichst viele Betriebssysteme entwickeln lassen möchten, haben Sie die Qual der Wahl auf welches Framework sie setzen. Die Entscheidung Native App vs Hybride App vs Web App beeinflusst signifikant Ihr Budget und die möglichen Funktionen, die Sie in Ihrer App umsetzen können.

    Dieser Artikel soll Ihnen eine erste Orientierungshilfe bieten, um zu entscheiden welche Umsetzungsmöglichkeit für Ihre App die richtige ist. Wir stellen Ihnen außerdem ein paar Checklisten und Entscheidungskriterien bereit, mit denen die Wahl leichter fällt.

    Zunächst ein paar kurze Definition sowie die wesentlichen Vor- und Nachteile der jeweiligen Ansätze. Weiter unten finden Sie dann noch eine Tabelle und Entscheidungshilfen damit die Wahl nicht allzu sehr zur Qual wird.


    Native app

    Eine native App ist eine App die individuell für ein bestimmtes Betriebssystem entwickelt wurde. Wobei, wenn man es genau nimmt, eine native App individuell für ein bestimmtes Betriebssystem “kompiliert” also bereitgestellt wurde. Eine native App für mobile Endgeräte gibt es meist für iOS und Android. Es werden native Komponenten verwendet um das Interface (die Oberfläche für die Benutzer) darzustellen, so dass sich der Nutzer der App wie auf seinem Betriebssystem “zu Hause” fühlt.


    Vorteile nativer Apps

    Der großes Vorteil nativer Apps ist, dass Sie für eine bestmögliche Performance und User Experience auf dem jeweiligen Betriebssystem sorgen.

    Eine native App kann auf alle Gerätefunktionen zugreifen und bietet die Möglichkeit, bestimmte Funktionen und Daten auch offline auf dem mobilen Endgerät nutzen zu können. Eine native App für iOS wird mit Swift programmiert, eine native App für Android wird mit Java oder Kotlin entwickelt. Alle genannten Programmiersprachen setzt man für native App-Entwicklung ein. Ein weiterer wichtiger Vorteil nativer Apps ist, dass Updates des Betriebssystems direkt verwendet werden können. In anderen Ansätzen muss man meist auf ein Update des Frameworks oder der verwendeten Libraries warten.


    Nachteile nativer Apps

    Der wohl wichtigster Nachteil nativer Apps ist die Tatsache, dass jede App für das jeweilige Betriebssystem individuell entwickelt werden muss. Auch wenn beide Teams parallel arbeiten sind die Kosten fast doppelt so hoch. “Fast” eben nur, da man die Konzeption der User Interfaces für beide Geräte verwenden kann, wenn man die Nutzerführung betrachtet. Dennoch muss man auch hier auf Besonderheiten der UI Rücksicht nehmen. Möchte man sein Budget sicher planen, dann würde ich den Aufwand mit Faktor zwei versehen.


    Hybrid app

    Eine Hybride App ist im engeren Sinne eine Browser Anwendung in einer nativen Hülle, also eine Webseite die in einen nativen Container gepackt wurde um sie als App auf einem mobilen Endgerät bereitstellen zu können. Die Web-App wird einmal entwickelt und in einem nativen Container als Hybride App für das jeweilige Betriebssystem “exportiert”. Verwendete Frameworks für eine Hybride App Entwicklung sind PhoneGap oder Apache Cordova.


    Vorteile Hybrider Apps

    Der wichtigste Vorteil hybrider Apps ist, dass man erheblich an Zeit und Geld spart, da man eine Webseite einmal entwickelt und diese dann (wenn keine Probleme auftreten) direkt für iOS und Android als Hybride App exportieren kann. Vorteile Hybrider App Entwicklung sind im wesentlichen Zeit- und Kostenersparnis in der initialen Entwicklung als auch in der Wartung.


    Nachteile Hybrider Apps

    Die Nachteile Hybrider Apps sind ein schwächere Performance und Kompromisse in der User Experience. Dass der Benutzer meist individuelle Web-Komponenten in der App nutzt und nicht die gewohnten nativen Elemente wird oft als Nachteil Hybrider Apps in Kauf genommen um von den geringeren Kosten zu profitieren.


    Cross Platform App

    Eine Cross-Plattform App wird in einer Programmiersprache entwickelt und über ein Cross Plattform App Framework wie Xamarin oder React Native in das jeweilige Betriebssystem exportiert (oder besser kompiliert). Man muss bei den Cross-Platform App Frameworks allerdings nochmal zwischen Hybrid- und NativCross-Platform unterscheiden. Der Unterschied liegt hauptsächlich darin wie die UI gerendert wird, sprich wie die Oberfläche erzeugt wird. Hybride Frameworks (z.B. Phonegap) setzen dabei auf HTML5 und sind somit vergleichbar zu einem aufgebohrtem Web-View (verhält sich wie ein Browser). Native Frameworks (z.B. React Native) besitzen hingegen ein eigenes Rendering um die UI performanter und flüssiger zu machen. Allerdings kann sich das Verhalten und das „Feeling“ der UI dabei immer noch von einer nativen App unterscheiden, da eben die native UI durch das eigene Rendering komplett übergangen wird (alle  Interaktionen und Animation werden „nachgebaut“).


    Vorteile Cross-Platform Apps

    Der wesentliche Vorteil von Cross Platform Apps ist der gute Kompromiss zwischen nativer Performance und guter User Experience auf dem nativen Endgerät. Über die meisten Cross Platform App Frameworks lassen sich auch native Plugins entwickeln, die dann zusätzlich eingebunden werden um bestimmte Funktionen oder UI Elemente nativ mit voller Performance und nativem Look-and-Feel bereitzustellen. Wenn die Apps komplexe Logik implementieren müssen, dann ist die Zeit- und Kostenersparnis ein großer Vorteile bei Cross Platform Apps.


    Nachteile von Cross-Platform Apps

    Auch wenn man hier fast alle nativen Funktionen einsetzen kann ist ein Nachteil von Cross-Platform Apps, dass es eben doch nur “einige” sind. Wo die Fallstricke lauern erkennt man meist erst während der Entwicklung. Das kann hin und wieder zu nicht unerheblichen Mehraufwänden führen. Gerade bei Cross-Plattform Apps kann es unter Umständen zu nicht unerheblichen Verzögerungen kommen, wenn der Framework-Anbieter neue Funktionsupdates nicht zeitnah als Update bereitstellt.


    Web App

    Eine Web App ist eine vollständig Browser basierte Anwendung. Sie wird über den Browser aufgerufen und nutzt ausschließlich Webtechnologien wie Javascript. Die Web App ist für die nutzung mobiler Endgeräte optimiert und kann somit überall und plattformunabhängig über einen Browser aufgerufen werden. Da Browser immer mehr Funktionen mobiler Betriebssysteme zugänglich machen (GPS etc) und das Internet immer schneller wird, schwinden die Nachteile einer Web App zunehmend.


    Vorteile einer Web App

    Der größte Vorteil einer Web App ist, dass sie auf bewährte Web-Technologien und bewährte Javascript Frameworks aufbaut. Inzwischen kennt jeder die Nutzung moderner Web Apps und das verhalten im Umgang ist meist gelernt. Zudem spart man sich die doppelten Entwicklungskosten für mehrere Betriebssysteme und schließt dennoch alle Nutzer über einen üblichen Browser ein.


    Nachteile von Web Apps

    Web App haben an sich keine Nachteile es sei denn man hat grundlegend falsche Erwartungen. Als Nachteile von Web Apps wird oft gesehen, dass man immer einen Internetzugang braucht und die Apps nicht offline funktionieren und dass man diese nicht im App Store veröffentlichen kann. Daher wird eine Web App im klassischen Sinne nicht mit einer “mobile App” verglichen. Die App läuft ausschließlich im Browser und nicht nativ auf einem mobilen Betriebssystem.


    Native app vs. Hybrid App vs. Cross Platform App Vs. Web App

    Native App vs Hybrid App vs Web App

    Man sieht relativ eindeutig den Trade-Off den man machen muss: Performance & UX vs. Zeit & Kosten.

    Zum vollständigen Vergleich befindet sich in der Tabelle auch noch die Spalte Web Apps. Dabei geht es um Anwendungen die nicht aus dem Store kommen sondern über den Browser aufgerufen werden. Das kann z.B. eine für Mobile optimierte Single-Page-Application (React.js, Angular.js) sein. Diese können teilweise auch auf Geräte-Funktionen zugreifen, Push-Notification senden oder auf dem Home-Screen als eigene „App“ abgelegt werden. Dieser Ansatz nennt sich dann Progressive Web App, kurz PWA.

    Ein Vorteil hier ist auch, dass man direkt eine Desktop-Version (über den Browser) anbieten kann.

    Man muss allerdings bedenken, dass ein komplett anderes Skill-Set dafür benötigt wird und sich der Entwicklungs-Workflow stark von den anderen Methoden unterscheidet. Auch wird hier im Gegensatz zu den „Store-Apps“ ein Web-Hosting benötigt, welches zusätzlich konzipiert werden muss und regelmäßige Kosten verursacht. Eine Distribution über die nativen App Stores ist bei Web Apps nicht möglich.


    Wann sollte man sich für … entscheiden?
    NativeCross-PlatformWeb-App
    • Performance und UX haben höchste Priorität
    • Lange Projektlaufzeit / Nachhaltigkeit ist wichtig
    • Sicherheit hat hohe Priorität
    • Offline-Fähigkeit hat hohe Priorität
    • Gerätefunktionen werden ausgiebig genutzt / stehen im Mittelpunkt
    • App soll (erst mal) nur auf einem OS laufen
    • App ist das Haupt-Produkt
    • Plattform-spezfische UI soll genutzt werden (Material Design auf Android, iOS-Design auf iOS ***)
    • Zeit / Budget ist knapp **
    • Beide Plattformen (iOS, Android) müssen komplexe Logik implementieren (Code-Sharing)
    • Eine konsistente UI/UX über beide Plattformen ist explizit gewünscht
    • Bestehende JavaScript Logik/Libraries soll(en) verwendet werden (→ React Native)
    • Kurze Release-Zyklen mit wenig Budget sollen möglich sein
    • Desktop und Mobile Nutzer sollen gleichermaßen angesprochen werden

    • Drupal oder SPA bereits vorhanden, gleicher Content soll ein „App-Feeling“ bekommen

    • Content/News/Magazin-Seiten

    ** Hängt stark von dem Projekt ab und von unserer Erfahrung/Manpower im Bereich Cross-Platform

    *** Teilweise ist das auch mit dem Cross-Platform Framework Flutter möglich, auch wenn es nicht empfohlen wird


    Cross-Platform Frameworks

    React Native

    • Typ: Nativ
    • Sprache: JavaScript
    • Plattformen: Android, iOS
    • Von: Facebook
    • Veröffentlichung: 2015

    Flutter

    • Typ: Nativ
    • Sprache: Dart
    • Plattformen: Android, iOS
    • Von: Google
    • Veröffentlichung: 2017

    PhoneGap / Cordova

    • Typ: Hybrid
    • Sprache: JavaScript
    • Plattformen: Android, iOS, Windows Phone 8, (…und mehr)
    • Von: Adobe / Apache
    • Veröffentlichung: 2009

    Ionic

    • Typ: Hybrid
    • Sprache: JavaScript
    • Plattformen: Android, iOS, Windows Phone 8, Chrome, Desktop
    • Von: Ionic / Drifty
    • Veröffentlichung: 2012

    Xamarin

    • Typ: Nativ
    • Sprache: C# / .NET
    • Plattformen: Android, iOS, Windows
    • Von: Microsoft
    • Veröffentlichung: 2013

    Interessante Links über native Apps und Cross Plattform Apps


    Distribution

    In der folgenden Tabelle sehen Sie, wie das Veröffentlichen Ihrer App geschieht abhängig davon, welche Art von App Sie einsetzen.

    App StorePlay StoreTestflightPlay Store Alpha/BetaHockey AppMDME-MailDownload
    AnbieterAppleGoogleAppleGoogleMicrosoftSoti, MobileIron,
    Blackberry, Citrix, SAP, etc.
    iOS( ✅)( ✅)
    Android
    Hauptvertriebskanal
    In-House( ❌) *( ✅)( ✅)
    Kosten
    **
    99$ / Jahr25$ / einmaligkostenloskostenloskostenlos?kostenlos(Hosting-Kosten)


    * Wenn man G-Suite nutzt, kann man auch „private“ Firmen-Apps über den Play Store verteilen:
    https://support.google.com/a/answer/2494992?hl=de

    ** Bei allen Varianten ist für iOS ein Developer Programm nötig (99$ / Jahr). Bei Play Store Alpha/Beta sind die 25$ / einmalig fällig.


    App Store / Play Store

    Verwandte Blogbeiträge

    Diese Themen beschäftigten uns und unsere Kunden kürzlich
    Darmstadt

    Bright Solutions GmbH
    Pfnorstraße 10-14
    64293 Darmstadt

    Adresse anzeigen
    Hamburg

    Bright Solutions Hamburg GmbH
    Altonaer Poststraße 9a
    22767 Hamburg

    Adresse anzeigen
    Telefon

    Darmstadt: +49 6151 / 27 647 - 0

    Hamburg: +49 040 / 350 80 130

    Nummern anzeigen

    Bereit für Projekte ohne Grenzen?

    Wir freuen uns auf Ihre Projekt-Ideen! Lernen Sie uns gerne in einer kostenlosen Erstberatung kennen und nehmen Sie noch heute Kontakt zu uns auf.PROJEKT ANFRAGE STELLEN

    Wie sieht Ihre perfekte Digitalagentur aus?

    Wir haben aus über 500 Anfragen die häufigsten Kriterien zur Agenturauswahl zusammengetragen. So können Sie Ihre Anbieter einfach vergleichen.CHECKLISTEN HERUNTERLADEN
    Darmstadt

    Bright Solutions GmbH
    Pfnorstraße 10-14
    64293 Darmstadt

    Adresse anzeigen
    Hamburg

    Bright Solutions Hamburg GmbH
    Altonaer Poststraße 9a
    22767 Hamburg

    Adresse anzeigen
    Telefon

    Darmstadt: +49 6151 / 27 647 - 0

    Hamburg: +49 040 / 350 80 130

    Nummern anzeigen