Wat is een hybride app?

Definitie: Een hybride app is een mobiele app die is gebouwd met webtechnieken, zoals HTML, CSS en JavaScript, en die in een native app-omhulsel draait, zodat je hem via de App Store en Google Play kunt installeren. Met één codebasis werkt de app op iOS en Android, en via plug-ins heeft hij toegang tot functies van het toestel.

In het kort

• Een hybride app combineert een webapplicatie met een native schil.
• Bekende frameworks zijn Ionic en Capacitor; Apache Cordova was lange tijd de basis van veel hybride apps.
• Voordelen zijn lagere ontwikkelkosten, één codebasis en hergebruik van webkennis; nadelen zijn minder soepele prestaties en een minder native gevoel.
• Hybride apps worden vaak verward met cross-platform apps in Flutter of React Native, die niet in een webweergave draaien maar dichter bij native werken.

Wat is een hybride app?

Een hybride app is in de kern een webapplicatie. De schermen, de logica en de vormgeving worden gemaakt met dezelfde technieken als een website. Die webapplicatie wordt verpakt in een native app, die op de telefoon een ingebouwde browserweergave opent, een zogeheten WebView. Voor de gebruiker ziet het eruit als een gewone app: hij installeert hem via de app store, ziet een pictogram op het beginscherm en opent hem zonder browser.

Via plug-ins krijgt de app toegang tot toestelfuncties, zoals de camera, de locatie, pushmeldingen en opslag. Een plug-in is een klein stukje native code dat een brug slaat tussen de webapplicatie en het besturingssysteem. Zo combineer je de snelheid van webontwikkeling met de verspreiding en mogelijkheden van een app.

Native, hybride, cross-platform of web app?

Hoe werkt een hybride app?

1. De webapplicatie wordt gebouwd met webtechnieken, vaak met een framework zoals Angular, React of Vue.
2. Het app-omhulsel, bijvoorbeeld met Capacitor of Cordova, verpakt de webapplicatie in een native app voor iOS en Android.
3. Plug-ins verbinden de webcode met functies van het toestel, zoals camera, GPS, bestanden en meldingen.
4. De app wordt ingediend in de App Store en Google Play, net als een native app.

Waar komen hybride apps vandaan?

Hybride apps kwamen op kort na de introductie van de smartphone. Bedrijven wilden apps voor zowel iPhone als Android, maar native ontwikkeling voor twee platforms was duur en vroeg om schaarse specialisten. Frameworks zoals PhoneGap, later Apache Cordova, maakten het mogelijk om met webtechnieken één app voor beide platforms te bouwen. Daarna kwam Ionic, dat kant-en-klare onderdelen bood die eruitzagen als native knoppen en menu’s. Inmiddels is Capacitor de meest gebruikte basis voor nieuwe hybride apps. Tegelijk zijn cross-platform frameworks als Flutter en React Native populair geworden, omdat ze betere prestaties bieden met dezelfde belofte van één codebasis.

Bekende frameworks

• Ionic: een framework met kant-en-klare interfacecomponenten die er op iOS en Android uitzien als native onderdelen. Werkt samen met Angular, React of Vue.
• Capacitor: de moderne opvolger van Cordova, ontwikkeld door het team achter Ionic. Verpakt webapplicaties als native apps en biedt toegang tot toestelfuncties.
• Apache Cordova: lange tijd de standaard voor hybride apps, voorheen bekend als PhoneGap. Adobe stopte in 2020 met PhoneGap; Cordova bestaat als open source project.

Voordelen van een hybride app

• Eén codebasis voor iOS, Android en vaak ook het web.
• Lagere ontwikkelkosten dan twee native apps.
• Hergebruik van webkennis. Webontwikkelaars kunnen direct aan de slag, en bestaande code en onderdelen van een webapplicatie zijn vaak te hergebruiken.
• Snellere ontwikkeling van een eerste versie.
• Eenvoudiger onderhoud, omdat wijzigingen maar één keer hoeven te worden doorgevoerd, voor alle platforms tegelijk.
• Toegang tot toestelfuncties via plug-ins.
• Aanwezig in de app stores, waar gebruikers apps zoeken.

Nadelen van een hybride app

• Prestaties. Omdat de app in een WebView draait, zijn animaties en grote lijsten minder soepel dan bij native of cross-platform apps.
• Minder native gevoel. Bediening en vormgeving voelen soms net anders aan dan gebruikers van hun toestel gewend zijn.
• Afhankelijkheid van plug-ins. Voor nieuwe of specifieke toestelfuncties is niet altijd een goede plug-in beschikbaar.
• Beperkingen bij zware toepassingen, zoals games, beeldbewerking of realtime toepassingen.
• Updates van besturingssystemen kunnen plug-ins of de WebView raken.
• Strengere beoordeling in de stores. Een app die weinig meer doet dan een website tonen, kan worden afgewezen.
• Batterij en geheugen. Een zware webapplicatie in een WebView kan meer van het toestel vragen dan een native app met dezelfde functies.

Hybride app of cross-platform app: het verschil

De termen worden vaak door elkaar gebruikt, maar er is een belangrijk verschil. Een hybride app draait de interface in een WebView: in feite een browser zonder adresbalk binnen de app. De knoppen, lijsten en schermen zijn webonderdelen. Een cross-platform app in Flutter of React Native doet dat niet. Flutter tekent de interface zelf met een eigen render-engine, en React Native gebruikt de native onderdelen van het besturingssysteem. Daardoor zijn cross-platform apps doorgaans soepeler en voelen ze meer aan als een native app. Hybride apps hebben als voordeel dat je bestaande webcode en webkennis bijna één op één kunt hergebruiken.

Uitgewerkt voorbeeld

Een bedrijf heeft een webapplicatie waarin monteurs hun werkbonnen bijhouden. Monteurs gebruiken die via de browser op hun telefoon, maar ze vragen om een app: makkelijker te openen, foto’s direct vanuit de camera toevoegen en een melding als er een nieuwe opdracht is. Met een hybride aanpak wordt de bestaande webapplicatie verpakt met Capacitor. Met een paar plug-ins krijgt de app toegang tot de camera en pushmeldingen. Binnen relatief korte tijd staat de app in beide app stores, zonder dat er een nieuwe app hoeft te worden gebouwd. De schermen blijven dezelfde als in de webversie, waardoor monteurs niets nieuws hoeven te leren.

Dit werkt goed omdat de app vooral formulieren en lijsten bevat. Zou dezelfde organisatie een app willen met zware animaties, offline kaarten en realtime samenwerking, dan is een cross-platform of native aanpak geschikter.

Wat kost een hybride app?

Een hybride app is meestal goedkoper dan twee native apps, omdat je één codebasis bouwt en onderhoudt. Als er al een webapplicatie bestaat, zijn de extra kosten om die als app aan te bieden vaak beperkt: het verpakken, het toevoegen van plug-ins, het aanpassen van de bediening voor mobiel en het indienen in de app stores. Reken daarnaast op de jaarlijkse bijdrage voor het Apple Developer Program, de eenmalige registratie bij Google Play en onderhoud bij nieuwe versies van iOS en Android. Bij een volledig nieuwe app liggen de kosten dichter bij die van een cross-platform app, omdat de webapplicatie ook nog moet worden gebouwd.

Waar let je op bij een hybride app?

1. Ontwerp voor mobiel. Een webapplicatie die op desktop goed werkt, is niet automatisch prettig op een telefoon.
2. Test op echte toestellen, zowel iOS als Android, en op oudere en nieuwere modellen.
3. Kies plug-ins die actief worden onderhouden, zodat ze blijven werken bij nieuwe versies van besturingssystemen.
4. Houd rekening met de richtlijnen van de app stores. Apple wijst apps af die alleen een website in een omhulsel zijn zonder meerwaarde.
5. Denk aan offline gebruik. Wat gebeurt er als de verbinding wegvalt?

Hybride app en PWA

Een progressive web app, of PWA, is een webapplicatie die zich op een telefoon bijna als een app gedraagt: je kunt hem op het beginscherm zetten, hij kan offline werken en soms meldingen sturen. Het verschil met een hybride app is dat een PWA niet via de app stores wordt verspreid en volledig in de browser draait. Een hybride app staat wel in de stores en heeft via plug-ins meer toegang tot het toestel. Wie al een goede webapplicatie heeft, kan beginnen met een PWA en later een hybride app maken als aanwezigheid in de stores of extra toestelfuncties nodig blijken.

Wanneer kies je voor een hybride app?

• Je hebt al een webapplicatie en wilt die ook als app in de stores aanbieden.
• De app draait vooral om formulieren, overzichten, content en eenvoudige interactie.
• Je budget is beperkt en je wilt één codebasis onderhouden.
• Je team bestaat uit webontwikkelaars.
• Toegang tot een paar toestelfuncties, zoals camera of pushmeldingen, is genoeg.

Een cross-platform framework zoals Flutter of React Native is vaak een betere keuze als prestaties en een native gevoel belangrijk zijn. Een native app past bij intensief gebruik van toestelfuncties of maximale prestaties. En als de app niet in de stores hoeft te staan, is een PWA vaak het eenvoudigst.

Wat betekent dit voor jouw project?

Bij een nieuw idee vraag ik eerst wie het gaat gebruiken en welke taak die persoon als eerste moet kunnen afronden. Daaruit volgt welke vorm past. Veel zakelijke toepassingen werken goed als webapplicatie die ook op de telefoon prettig te gebruiken is. Moet de app in de stores staan, dan is de keuze tussen hybride, cross-platform en native een afweging tussen budget, prestaties en hoe vaak gebruikers de app openen.

Twijfel je welke soort app past bij jouw idee? Stuur me voor wie het is, waar die persoon werkt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap.

Veelgestelde vragen over hybride apps

Wat is een hybride app?

Een hybride app is een mobiele app die is gebouwd met webtechnieken en in een native app-omhulsel draait. Je installeert hem via de App Store of Google Play, en met één codebasis werkt hij op iOS en Android.

Wat zijn de voordelen van een hybride app?

Een hybride app heeft één codebasis voor meerdere platforms, lagere ontwikkelkosten, snellere ontwikkeling en eenvoudiger onderhoud. Webontwikkelaars kunnen hun kennis direct gebruiken, en via plug-ins is er toegang tot toestelfuncties.

Wat is het verschil tussen een hybride app en een native app?

Een native app is speciaal gebouwd voor één besturingssysteem in de eigen taal van dat platform. Een hybride app is een webapplicatie in een app-omhulsel en werkt met één codebasis op meerdere platforms, maar is doorgaans minder soepel.

Verwante termen

Native app · Flutter · Progressive Web App (PWA) · Web app · Webapplicatie · Maatwerk software