Ionic

Benieuwd naar de mogelijkheden van Ionic voor het bouwen van een app? We geven je graag de voor- en nadelen, én een aantal voorbeelden van bestaande Ionic-apps.
/>
Ionic · Ionic

In een notendop

Ionic is een HTML 5 open-source framework voor het bouwen van snelle en kwalitatieve apps voor zowel mobiel als desktop.

icon

Eerste release: 13 november 2013

icon

Ontwikkeld door: Max Lynch, Ben Sperry en Adam Bradley

icon

Programmeertalen: o.a. HTML, CSS en JavaScript, React, Vue.js

icon

Integraties: o.a. Cordova, Firebase, Capacitor, Angular

icon

Officiële website:Ionicframework.com

icon

Voorbeeldcode:scroll naar ↓

icon

Voorbeeldapps:scroll naar ↓

Wat is Ionic?

Ionic is een HTML 5 open-source framework voor het bouwen van snelle en kwalitatieve apps voor zowel mobiel als desktop.

logo van het ionic framework

In 2013 werd Ionic uitgebracht als open-source SDK (Software Development Kit) voor hybride mobiele applicaties. Sindsdien zijn er meer dan vijf miljoen apps ontwikkeld op basis van deze technologie. ‘Onder de motorkap’ is Ionic een uitbreiding op Angular, een web framework oorspronkelijk ontwikkeld door Google. Inmiddels zijn er verschillende nieuwe versies verschenen en is Ionic 4 uit 2019 de meest recente. Een grote vernieuwing is dat deze versie niet meer vastzit aan Angular als vast framework.

Ionic als framework richt zich op de ‘front-end’ gebruikerservaring. Denk aan de interactie die je als gebruiker hebt met een app, zoals de knoppen, navigatie, animaties en andere interacties.

Het bouwen van Ionic apps gebeurt op basis van bekende webtechnologieën als HTML, CSS, Javascript en Angular. Ionic werkt grotendeels op basis van Javascript bovenop WebView en (Cordova of in functionaliteit vergelijkbare) plugins. Deze combinatie betekent simpel gezegd dat de app gebouwd is als ‘een website’ die wordt ingeladen binnen de app. Met deze opzet kan een Ionic-app ‘als website in een app’ beschikbaar worden gemaakt voor meerdere platformen. Hiermee wijkt Ionic af van alternatieven als React Native.

Het gebruik van het Ionic-framework bij het maken van apps kent meerdere voor- en nadelen. Hieronder lees je waar je rekening mee moet houden als je van plan bent een Ionic app te (laten) maken.

Voordelen van Ionic

De voordelen van Ionic maken het een interessant framework voor het ontwikkelen van hybride apps.

image alt

1. Open source, dus gratis in gebruik

Ionic is een open-source framework. Dat betekent dat er geen licentiekosten verbonden zijn aan het gebruik van de techniek. Je betaalt dus enkel voor het werk dat een developer moet verzetten om een app te bouwen. Wanneer je de keuze moet maken tussen een eigen app en het afnemen van een bestaande app op basis van een licentie, loont het om de ontwikkeling Ionic-app te overwegen. Op de lange termijn zal de investering in een eigen app zichzelf namelijk terugbetalen. Laat staan dat je dan de vrijheid hebt om de app naar wens in te richten en uit te breiden.

2. Op basis van webstandaarden

Het Ionic-framework is gebouwd op basis van gestandaardiseerde en bekende webtechnologieën als HTML, CSS en Javascript. Daarbij wordt gebruik gemaakt van moderne API’s. Hierdoor is Ionic een stabiel framework. Daarnaast is er een goede en brede ondersteuning van de community. Dit maakt de technologie makkelijk om te begrijpen vanwege alle informatie die online via bijvoorbeeld GitHub gedeeld wordt. Ook worden bugs en andere issues snel opgemerkt en aangepakt.

3. Hybride / cross-platform

Met Ionic ontwikkel je applicaties die op meerdere platformen werken. Denk bijvoorbeeld aan een app die zowel op Android (vanaf 4.1) als iOS (vanaf 7) werkt. Mogelijk is deze ook nog beschikbaar via het web of als Windows 10 app. Met Ionic schrijf je maar één keer code, en optimaliseert vervolgens per platform. Hiermee bespaar je op de dubbele kosten die je hebt wanneer je native apps ontwikkelt. Een native app moet namelijk voor elk platform los worden ontwikkeld.

4. Simpel voor ontwikkelaars om te leren

Ionic is opgezet als een simpel en flexibel platform dat makkelijk is om te begrijpen. Wanneer een ontwikkelaar bekend is met CSS, HTML of Javascript, zal die Ionic snel in de vingers krijgen. Dit maakt dat Ionic apps ook makkelijk overgedragen kunnen worden aan nieuwe ontwikkelaars (en ontwikkelbureaus).

5. Bestaande componenten beschikbaar

Ontwikkelaars kunnen met Ionic gebruik maken van veel voorgedefinieerde componenten. Denk hierbij aan buttons, navigatie en zoekbalken. De beschikbaarheid van deze ‘bibliotheek’ versnelt het ontwikkelproces en heeft daarnaast als voordeel dat de ontwikkelaar het wiel niet opnieuw uit hoeft te vinden.

Nadelen van Ionic

Ionic kent een aantal mogelijke nadelen, met name op het gebied van prestaties. Hoe breder de app wordt ingezet, hoe groter de impact van deze issues. Ontwikkelaars moeten zich hier van bewust zijn en adequaat te werk gaan om problemen te voorkomen. Vanwege de nadelen kiezen we bij Linku met name voor React Native als alternatief framework.

Prestaties op oudere telefoons

Ionic werkt grotendeels op basis van WebView. In tegenstelling tot native apps kunnen Ionic-apps daardoor met name op oudere telefoons tegen performance issues oplopen. Zo zijn animaties mogelijk trager en ontbreken platformspecifieke functies. Bij de ontwikkeling van een Ionic-app moet dus goed rekening worden gehouden met de issues die mogelijk ontstaan op oudere telefoons. Dit kan door goed te testen en risicofactoren eruit te pikken.

Prestatieverschillen tussen telefoons

Ook tussen verschillende telefoonmodellen lopen de prestaties soms uiteen. Niet ieder model en besturingssysteem draait een Ionic-app op dezelfde manier, waardoor soms unieke issues of prestatieproblemen optreden. Op iOS valt dit goed te testen vanwege het relatief kleine aantal aan Apple-telefoons dat op de markt beschikbaar is. Met Android is dit een ander verhaal. Er zijn immers honderden modellen op de markt van verschillende fabrikanten. Met name Android-gebruikers lopen daardoor een grotere kans tegen unieke issues aan te lopen.

Het is de taak van ontwikkelaars om te voorkomen dat deze potentiële nadelen naar voren treden. Daar komt wat ervaring, testen en zorgvuldigheid bij kijken. Het voordeel bij het nadeel is het bestaan van de grote Ionic-community. Die voorziet in veel kennis om Ionic-apps sneller te maken voor diverse platformen.

Ionic app maken

Als webbureau hebben we veel ervaring in de development van Angular/Ionic-apps. We zijn ons goed bewust van de nadelen en nemen altijd maatregelen om de invloed van deze negatieve factoren te minimaliseren.

Uiteindelijk zien we voor veel bedrijven voordelen in de ontwikkeling een hybride applicatie. Met name de potentiële kostenbesparing en flexibiliteit van een Ionic-app maakt het aantrekkelijke keuze voor bedrijven om in te investeren.

Vragen?
Thomas Rutten
Thomas Rutten
Thomas Rutten

Een app maken?

Ben jij benieuwd welke techniek past bij jouw wensen, of zoek je een partij die je kan helpen bij de ontwikkeling van een app? Neem dan contact met ons op.

Stuur een berichtOf bel: 024 3000 316

Meer technieken

Ontdek andere technieken die we toepassen in het ontwikkelen van apps, webapplicaties en websites.

react native logo

React Native

Open-source framework voor het ontwikkelen van apps, maar ook websites en applicaties.

Ontdek React Native
Symfony icon

Symfony

Open-source platform voor het ontwikkelen van complexe webapplicaties.

Ontdek Symfony
Sanity icon

Sanity

Headless cms voor het ontwikkelen van websites, apps en applicaties.

Ontdek Sanity
OpenAI icon

OpenAI

Krachtige AI voor diverse toepassingen, van tekst- en beeldgeneratie tot data-analyse.

Ontdek OpenAI