App maken van je website als een pro

Heb je een website en wil je daar een app van maken? Dan wel als een pro, natuurlijk!

Is het makkelijk, is het moeilijk?

We vragen het zo’n professional! Egon Meijers is Guild Lead Mobile bij Kabisa (rechts). Als software ontwikkelaar gespecialiseerd in e-commerce, fintech en hightech maakt Kabisa zowel webapps als mobiele apps. Egon leidt een team dat zich volledig richt op mobiele appontwikkeling. In dit artikel deelt Egon zijn kennis over het ontwikkelen van web naar app!

Lees het artikel of bekijk de livestream opnieuw:

Hoe maak je van een app een website?

Op zich al een interessante vraag. Want ja, het kan. Je kan een website zo responsieve maken dat je die op de App Store kan zetten. Dat noemen we wrappen; de website verpak je zó dat je met de app hetzelfde kan doen als de website, maar dan zonder alle andere browser elementen. Vergeleken met een native mobiele app is dit een goedkopere optie, maar lever je wel in op gebruiksgemak en laadsnelheid.

Het nadeel van een wrapper tegenover een app:

• Laadtijden zijn altijd langer dan bij een 'gewone' app.
• Weergave van dynamische content — bijvoorbeeld voor webshops — duurt langer om op gang te komen.
• Hardware van je apparaat kan je niet zomaar gebruiken in een wrapper. Denk aan de camera, gps of nfc technologie

Wil je je gebruikers écht het gevoel geven dat ze een ‘echte’ app gebruiken, die ook lekker snel werkt? Dan heb je gewoon die ‘echte’ app nodig. 

Hoe maken profs sneller tegelijkertijd een app én een website?

We werken met een platform genaamd Flutter. Dit is een hybride platform, waarmee je veel van je code — tot wel 70% — kan hergebruiken voor andere platformen.

Stel dat je een app native programmeert, dan is het eigenlijk onmogelijk om code te hergebruiken. Want native ontwikkeltalen zijn verschillend en gebruiken dus ook andere code. Er is dus meer kennis en tijd nodig om hetzelfde resultaat te krijgen, namelijk een app en een website. Het grootste voordeel van een hybride ontwikkelingsplatform is dus het verschil in ontwikkelingstijd dankzij efficiënt hergebruik van de code.

Als gebruiker merk je vrij weinig verschil tussen een native app of hybride app. Vooral als je wat extra tijd en moeite stopt in het vormgeven van een typische iOS of Android app. Afhankelijk van welke functies je graag wil hebben, kan dat meer of minder tijd kosten. Maar het hoeft natuurlijk niet; een hybride app bouwen die in 1x voor beide platformen werkt, is net zo interessant, juist omdat het tijd en kosten drukt.

Welke apps en websites heb je al uit een codebase gemaakt?

Op dit moment werken we voor Signify, eerder bekend als Philips Lighting. We ontwikkelen eerst een mobiele app via Flutter, om later ook een webapplicatie te ontwikkelen. In dit geval gebruiken we de code dus niet gelijk opnieuw, maar zetten we die in een latere fase in.

Andersom werkt ook. Zo werken we voor een ander project voor Signify eerst met een webapplicatie. Ook met Flutter. En daarin werken we zelfs aan native desktop applicaties voor Windows en MacOS.

Nu merken we wel dat er enkele nadelen aan hybride platformen als Flutter zitten. Zo is een hybride app wat groter en langzamer dan een native app. Gelukkig zien we dat recente ontwikkelingen al grote stappen hebben gemaakt, waardoor we verwachten dat hybride apps over een paar jaar al gelijk kunnen staan met native apps.

Toch kiezen we ervoor om door te gaan met Flutter; de hoeveelheid tijd en geld die je ermee bespaart, weegt op tegen de snelheid. Want onderhoud hoef je maar 1x te doen, in plaats van apart voor elke app. De code is overal hetzelfde.

Daarnaast zijn platformen als Flutter steeds stabieler. Zowel in de ontwikkeling als lange termijn. Want vroeger was men bang dat als Google niet langer hun platform Android voor Flutter ondersteunt, je je app kwijt was. Maar ondertussen is de community achter Flutter zo groot dat dit een ongegronde angst is; er is simpelweg teveel vraag naar om af te stoten.

Nieuwste ontwikkelingen van Flutter in 2023

Flutter blijft in ontwikkeling. Sinds het gesprek met Egon zijn er alweer een aantal zaken veranderd aan Flutter. Het gevolg van die veranderingen is dat inmiddels 1 op de 5 apps op de Play Store gebruik maakt van Flutter. Dan moet het écht wel iets goed doen. Dus, wat zijn de laatste ontwikkelingen?

1. Meer snelheid voor de gebruiker     
   Waar soortgelijke frameworks inzetten op portability, ofwel de overdracht tussen platformen, focust Flutter zich op de performance.     
    
2. Meer mogelijkheden om als volledige website te ontwikkelen     
   Flutter focust zich op het verkleinen van de afstand tussen website en app. Die brug wordt naarmate Flutter zich verder ontwikkelt steeds kleiner. Ze geven aan hier nog stappen in te willen zetten, zodat dit voor alle platformen geldt; zowel Android en iOS als Windows en macOS.     
    
3. Betere looks voor Windows en macOS app     
   Verschillende schermgroottes zijn altijd al een grote uitdaging geweest voor het ontwerpen van apps en sites. Laat staan als je hetzelfde ontwerp op verschillende groottes én platformen wil verspreiden. Flutter gebruikt 2023 om dit punt aan te scherpen in hun framework.     
    
4. Betere ondersteuning tooling van developers, zoals Figma en GitHub     
   Alleen red je het niet op de markt. Zo gaat Flutter de samenwerking aan met developer tools en web bedrijven om een zo geïntegreerd mogelijke oplossing te bieden. Zo kijken ze naar ondersteuning van Google, Flame Figma en GigtHub.     
    

5. Beveiliging, zodat ook apps met hoge beveiligingseisen in Flutter kunnen worden gebouwd     
   Online criminaliteit is altijd een gevaar voor websites en apps. Fluter blijft bouwen aan de veiligheid van hun software. Zo gaan ze ervoor om dit jaar volledig te voldoen aan de SLSA-4 veiligheidsstandaarden en maken ze duidelijker welke data ze verzamelen. Deze publiceren ze genaonimiseerd ten behoeve van de community om vertrouwen te scheppen in hun open source projecten, Flutter en Dart.

    

Tips voor starters met een app-idee en website-wens

Afhankelijk van je wensen heb je meerdere opties.

Wil je naast je app een website die nauw aansluit op jouw app? Dan is Flutter zeker een interessant ontwikkelplatform.

Gebruik je jouw website eigenlijk vooral voor statische informatie, oftewel teksten en afbeeldingen? Dan is het handiger om je app op Flutter te laten ontwikkelen en een aparte site te laten bouwen.

Uiteindelijk moet je dus afwegen wat de inhoud, het doel en het budget is voor je app en website. Flutter is dé oplossing om een native gevoel te geven, zonder dat je twee aparte apps hoeft te bekostigen.

Ontwikkelingsvergelijker

Voor iedereen is de situatie anders en past weer een andere oplossing. Om te vergelijken welke opties er allemaal zijn en wat bij jouw idee past, staat voor jou de Ontwikkelingsvergelijker klaar. Vul hieronder je gegevens in en voor je 't weet kan je aan de slag met de vergelijker.