Onze website bevat functionele en analytische cookies die nodig zijn om de website goed te laten functioneren
en jou als bezoeker een goede webervaring te geven. Deze statistieken worden volledig anoniem verwerkt. Meer
informatie is beschikbaar in onze privacyverklaring.
De laatste jaren vindt er een transitie plaats op het gebied van mobile development. Steeds vaker kiezen bedrijven ervoor om hun mobiele applicaties niet langer in Java (voor Android) of Swift (voor iOS) te ontwikkelen, maar kiezen zij voor een hybride framework als basis voor hun mobiele applicatie. In deze blog beschrijf ik één van deze frameworks, namelijk Ionic. Wat is Ionic, hoe werkt het en waarom zou jij de transitie moeten maken naar een native web-framework voor het ontwikkelen van mobiele applicaties.
Wat is Ionic?
Ionic is een open source interface platform waarmee mobiele en desktop-applicaties ontwikkeld kunnen worden met gebruik van web-technologieën als HTML, CSS en JavaScript. Deze toolkit wordt nauw geïntegreerd met een populair Front-end JavaScript framework naar keuze, zoals Angular, Vue en React. In andere woorden maakt Ionic het mogelijk om jouw webapplicatie voor verschillende platforms te ontwikkelen vanuit één codebase en daarbij gebruik te maken van de native functionaliteiten van de apparaten waarop de applicatie draait. Omdat Ionic apps gebaseerd zijn op het web, kun je ook verschillende web-gebaseerde UI libraries gebruiken zoals TailwindCSS of Bootstrap voor de opmaak van je applicatie.
Ionic maakt gebruik van Capacitor. Capacitor is een cross-platform native runtime die verschillende web-gerichte API’s biedt. Daarmee kan de app zoveel mogelijk web standaarden blijven gebruiken en heeft daarbij toegang tot de uitgebreide systeemeigen apparaat-functies. Denk hierbij bijvoorbeeld aan het gebruik van bluetooth, locatie, push notificaties, batterijstatus, opslag en de camera.
Waarom wil je Ionic gebruiken?
Ionic biedt de gebruiker een naadloze ervaring, waar de gebruiker zich ook bevindt. Of dat nu op een telefoon is, op een desktop of in de browser; de gebruiker verwacht consistentie via alle kanalen. Door het gebruik van Ionic kan met een enkele codebase voor al deze kanalen een applicatie uitgerold worden.
Door met Ionic te bouwen, kun je je bestaande web-ontwikkelaars inzetten voor het bouwen van mobiele- en desktop applicaties. Je hoeft niet langer op zoek naar een aparte ontwikkelaar voor ieder platform dat je wilt ondersteunen. De web-ontwikkelaars ontwikkelen de applicatie in Ionic en rollen deze zonder problemen uit naar de verschillende platformen.
Naast bovengenoemde voordelen is Ionic ook nog eens open-source en dus helemaal gratis. Ionic heeft een grote community en vraagstukken waar je als ontwikkelaar tegenaan loopt worden dan ook veel besproken op de verschillende ontwikkelforums. Daarnaast integreert Ionic heel gemakkelijk met bekende tools (bijvoorbeeld met Azure), zodat het uitrollen van applicaties naar de Google Play Store of Apple App Store heel eenvoudig wordt.
Hoe werkt Ionic?
Een native functionaliteit is door het gebruik van Capacitor eenvoudig in een Ionic-app toe te voegen. Zo kunnen we bijvoorbeeld de locatie van ons toestel gebruiken. Als eerst moeten we een nieuwe Ionic applicatie genereren. Dit kunnen we zelf doen via de command-line Interface die Ionic biedt, of via een handige web-interface.
In dit voorbeeld maken wij de applicatie met de CLI. Eerst zorgen we ervoor dat Ionic globaal op onze computer geïnstalleerd is en daarna starten we het initialisatie proces.
$ npm install -g @ionic/cli
$ ionic start
De Ionic-CLI vraagt ons nu een aantal dingen te kiezen voor ons project, zoals welk framework en welke basis-lay-out wij willen in onze app? In mijn voorbeeld kies ik voor Angular met een `blank` applicatie-lay-out, maar andere opties zijn een lay-out met tabbladen of met een menu. De eerste opzet van deze applicatie heeft nog weinig functionaliteit, hier gaan we verandering in brengen.
Om de locatie-functionaliteit toe te voegen, moeten we de gewenste Capacitor-plug-in installeren in ons project zodat wij deze kunnen gebruiken. In de documentatie van Ionic voor native functionaliteiten (https://ionicframework.com/docs/native) is een uitgebreide lijst te vinden met alle native API’s die geïnstalleerd kunnen worden en hoe deze te gebruiken. Als eerst voeren we de volgende commando’s uit om de locatie plug-in te installeren.
Vervolgens openen wij het Home-component van onze nieuwe Ionic-applicatie die nu nog de standaard template code bevat waarin wij de locatie gaan gebruiken. Door middel van de volgende code kunnen we eenvoudig de locatie van onze gebruiker opvragen. In de initialisatie van dit component vragen we de huidige positie op via de Geolocation-API en tonen deze in het template.
Zoals hierboven te zien is, maakt Ionic het ons erg gemakkelijk. Als ontwikkelaar hoef je je helemaal niet bezig te houden met de functionele werking van de locatiebepaling of welke andere native functionaliteit dan ook. We roepen simpelweg de functies aan die de plug-in ons biedt (zoals ‘getCurrentPosition’ in bovenstaand voorbeeld) en Ionic regelt alles achter de schermen voor ons. Er wordt door het besturingssysteem ook automatisch om toestemming gevraagd voor het gebruiken van de locatie.
Als de locatie succesvol kan worden opgehaald, zien we dat de coördinaten van de locatie in de app worden weergegeven.
Een volgende stap kan bijvoorbeeld zijn om deze locatie op een kaart weer te geven of op te slaan in een SQL-database op het apparaat. Ionic biedt hier heel veel mogelijkheden in. Het mag duidelijk zijn dat ik als web-ontwikkelaar geen weet heb van de platform-specifieke vereisten voor het toepassen van deze functionaliteiten. Dit is iets wat Capacitor en Ionic ons volledig uit handen nemen.
Conclusie
Ionic biedt een alles-in-één pakket om mobiele-, desktop- en webapplicaties te ontwikkelen die gebruik kunnen maken van systeemeigen functionaliteiten van je toestel. De voordelen die je hieruit kan halen zijn enorm, maar kort samengevat zijn dat:
Een naadloze, consistente ervaring voor de eindgebruiker via verschillende kanalen.
Eén ontwikkelteam voor zowel mobiele-, desktop- als webapplicaties.
Open-source en dus helemaal gratis.
Geen kennis nodig van complexe, apparaat-eigen functionaliteiten.
Veel grote tech-bedrijven maken al gebruik van Ionic. Voorbeelden van apps die gemaakt zijn met Ionic zijn Sworkit, MarketWatch en Sanvello. Voor meer voorbeelden verwijs ik je naar de website van Ionic zelf!
Benieuwd naar hoe Ionic binnen jouw organisatie ingezet kan worden? Neem gerust contact op, dan bespreken we samen de mogelijkheden. Ben je zelf een ontwikkelaar met interesse in ontwikkelen van Ionic-applicaties? Kom dan eens langs voor een kop koffie!
Deel deze pagina:
Auteur
Sem
Developer
Heb je vragen over dit onderwerp of zou je Sem willen inhuren voor een vergelijkbare opdracht?
Vorige maand was alweer de zesde Tech Thursday die ik organiseerde en de tweede die ook toegankelijk is voor iedereen die geïnteresseerd is; waarom zouden we stoppen met delen bij de voordeur?
Terug naar het onderwerp van de laatste sessie: testen, testen en testen. Aan de titel van het blog kan je lezen dat er één keer testen afgevallen is. Waar ik het bij mijn presentatie over de drie bekendste frameworks had: MS-Test (v2), nUnit en xUnit, spits ik me nu toe tot twee andere interessante ontwikkelingen. Over bUnit heb ik toen ook al gesproken, maar aan het eind van mijn presentatie werd ik door een externe deelnemer gewezen op een andere package, Stryker Mutator.
bUnit
bUnit
Ik ga het echter eerst over bUnit hebben. Met bUnit kan je Blazor-componenten testen en het werkt altijd in combinatie met één van de andere drie testframeworks. Met bUnit is de Blazor-cirkel rond: van Back-End tot Front-End kan het geheel in C# opgezet worden, inclusief alle (unit)testen.
bUnit is dus bedoeld om een component te renderen en hier acties op uit te voeren en te testen of de output dan aan de verwachting voldoet. En dit kan meegenomen worden in een build pipeline.
Testen met bUnit kan in een normaal C# bestand (.cs) of in een Razor bestand (.razor).
Het voordeel van Razor bestanden is dat het volgende mogelijk is:
@inherits TestContext;
@code
{
[Fact]
public void HelloWorldComponentRendersCorrectly()
{
var cut = RenderComponent<HelloWorld>();
cut.MarkupMatches(@<h1>Hello world from Blazor</h1>);
}
}
De markup kan dus gewoon door middel van het @ teken toegevoegd worden zonder allerlei andere escape tekens. Daarnaast negeert bUnit allerlei opmaak binnen HTML zoals tabs, spaties en enters.
Wil je echter gebruik maken van testen in Razor, dan is het handig om niet met het framework te beginnen (dus niet bijvoorbeeld een xUnit Test Project aanmaken), maar met een ASP.NET Core Empty project. Vervolgens voeg je de gebruikelijke NuGet packages toe om te testen.
Met C# 11 wordt het wellicht weer makkelijker om gewone C#-bestanden te gebruiken, omdat daar een interessante manier wordt geïntroduceerd die “raw string literals” heet .
var location = $$"""
You are at {{{Longitude}}, {{Latitude}}}
""";
Door drie quotes (of meer) te gebruiken, wordt een “raw string literal” gemaakt. Daarnaast heeft het aantal dollartekens aan hoeveel accolades er nodig zijn voor string interpolation.
Zoals het voorbeeld laat zien, is het niet gelijk aan bovenstaande code, maar hierdoor kan het gebruikt van C#-bestanden wel een overweging zijn.
Dat delen met iedereen een voordeel blijkt te hebben, geeft dit deel van de blog wel aan. Stryker was voor mij onbekend en deze interactie was precies waar ik naar zocht toen ik de Tech Thursday toegankelijk wilde maken voor iedereen.
Stryker Mutator is een project van InfoSupport met het doel om de kwaliteit van unit tests te verhogen. Stryker Mutator maakt aanpassingen aan je code waardoor er mutanten ontstaan. Goede unit tests zouden vervolgens moeten falen om gemuteerde code te ontdekken. Als (alle) unit tests slagen dan betekent dit dat de gewijzigde code niet afgedekt wordt door de unit tests.
Een simpel voorbeeld is de volgende code:
public bool IsAdult(int age)
{
return age >= 18;
}
Stryker zal deze code muteren door de code te wijzigen in:
public bool IsAdult(int age)
{
return age < 18;
}
Als je bovenstaande code test, dan krijg je nu een omgekeerd resultaat waardoor je test faalt en de mutant wordt uitgeschakeld.
In combinatie met een goede code coverage tool (zoals bijvoorbeeld SonarQube), is dit een waardevolle tool die ingezet kan worden bij Pull Requests: Stryker kan ingezet worden in build pipelines. Dan wordt niet alleen de code coverage gecontroleerd, maar ook de kwaliteit van de unit test.
Voor meer informatie over Stryker klik hier. Wijzigingen die Stryker Mutator allemaal kan doen, vind je hier en de NuGet package staat hier.
Het afgelopen jaar hebben bedrijven als Facebook en Microsoft veel geïnvesteerd in metaverse-oplossingen. Zo heeft Microsoft 68,7 miljard dollar uitgegeven aan de aankoop van gamestudio Activision/Blizzard. Microsoft ziet deze aankoop als een strategische keuze voor de verdere ontwikkeling en uitrol van hun metaverse-plannen. Facebook ziet de metaverse als de volgende stap in sociale interactie en investeert hier dan ook veel geld in. Ze hebben hun overkoepelende naam ook niet voor niets veranderd in ‘Meta’.
Maar wat is de metaverse nou eigenlijk en hoe kan het gebruikt worden door bedrijven? In deze blog geef ik antwoord op deze vragen!
Wat is de Metaverse?
De term ‘metaverse’ is bedacht door Neall Stephenson in zijn sciencefictionroman Snow Crash uit 1992, waarin mensen als avatars in contact staan met elkaar en met software-agenten, in een driedimensionale ruimte die een metafoor vormt voor de werkelijke wereld. Stephenson benut de term om een virtuele wereld aan te duiden die op de werkelijkheid is gebaseerd. Deze virtuele wereld is volgens hem de opvolger van het internet.
De huidige werkelijkheid ligt hier niet ver vandaan. Al verschillende bedrijven werken aan oplossingen voor hun kijk op de metaverse. Al jaren zijn er producten en games te vinden waarbij er een voortdurend doorlopende wereld is, waar mensen elkaar kunnen ontmoeten en samen opdrachten kunnen uitvoeren. Denk bijvoorbeeld aan Second Life of World of Warcraft. De afgelopen jaren zijn ook sociale platformen steeds meer in opkomst, zoals AltSpaceVR, VrChat, Meta Horizon en Mozilla Hubs. Deze platformen bieden een plaats om virtueel mensen te ontmoeten, rond te lopen en het gevoel te hebben dat je ergens samen bent.
Ook de volgende stap in metaverses wordt al gezet met oplossingen als Decentraland, the Sandbox en NetVrk. Deze oplossingen bieden digitaal vastgoed aan, wat in de metaverse kan worden aangekocht en worden ontwikkeld. Je kunt dus als gebruiker jouw virtuele kantoor in het Business District van Decentraland neerzetten naast dat van bijvoorbeeld Microsoft. De prijzen van sommige stukken virtueel land lopen al in de honderdduizenden euro’s om een goede centrale ligging te hebben!
Al deze oplossingen hebben één ding gemeen: ze vormen een netwerk van digitale 3D-ruimtes. Een Metaverse, dus.
De Microsoft metaverse
Vorig jaar heeft Microsoft hun plannen voor de Microsoft metaverse bekendgemaakt en zet, zoals we kunnen zien aan hun investeringen, hard in op de metaverse. Microsoft heeft een aantal jaar geleden AltSpaceVR aangekocht, waarin gebruikers in een digitale wereld meetings kunnen organiseren en zelfs hun eigen wereld kunnen bouwen.
AltSpaceVR
De Microsoft Ignite Keynote van 2021 was volledig te beleven in AltSpaceVR en Microsoft heeft hiermee de toekomst van metaverse-evenementen laten zien: niet langer kijken naar platte slides over een onderwerp, maar het onderwerp om je heen beleven. In plaats van een plaatje van een boot, komt er een 3D-model van de boot de ruimte binnendrijven en de presentatoren zijn geen platte video’s meer, maar full fidelity hologrammen. Het evenement werd door duizenden gebruikers wereldwijd beleefd en ondanks de wereldwijde covid-lockdown konden mensen van over de hele wereld elkaar ontmoeten en met elkaar netwerken.
Het komende jaar wil Microsoft AltSpaceVR gaan integreren in Microsoft Teams en de avatars van AltSpaceVR gaan gebruiken als Teams-Avatar, zodat mensen kunnen deelnemen aan meetings met een interactieve representatie, zonder dat ze zelf in beeld zijn. Deze digitale reprensentatie van personen is een essentieel onderdeel van alle metaverses en zal de komende jaren nog veel aandacht gaan krijgen. Gebruikers zullen hun avatar zoveel mogelijk kunnen beïnvloeden, omdat dit de digitale identiteit zal zijn. Wellicht overkoepelend over de metaverses.
Hololens
Naast AltSpaceVR ziet Microsoft ook de hololens als onderdeel van de metaverse. De hololens projecteert virutele onderdelen voor de gebruiker in de echte wereld, en kan ook de echte wereld terug naar de digitale wereld sturen met behulp van de camera’s. Gebruikers kunnen om hulp vragen bij een taak en een medewerker kan op afstand tekenen in de wereld van de gebruiker met de hololens. Maar ook meetings kunnen worden gedaan in combinatie met bijvoorbeeld AltSpaceVR- én hololens-gebruikers, waarbij de verschillende gebruikers als avatars aan elkaar worden getoond.
Mesh voor Teams
Als laatste pijler van de Microsoft Metaverse wordt Azure ingezet met Mesh. Mesh kan veel van de rekenkracht verzorgen die nodig is om de verbindingen onderling op te zetten. Maar ook de rekenkracht die nodig is om grote en complexe 3D-modellen te kunnen tonen kan door Mesh worden overgenomen. Hierdoor wordt de drempel om mooie, complexe 3D-werelden te kunnen beleven verlaagd; je hebt geen krachtig apparaat meer nodig die alle berekeningen uit moet kunnen voeren. Mesh neemt deze berekening uit handen en streamt dit naar de gebruiker, zodat iederen de metaverse kan beleven. Ook vanaf je telefoon.
Hoe de metaverse in te zetten
Er zijn verschillende use cases voor het gebruik van de metaverse, en de komende jaren zal het gebruik hiervan meer en meer zichtbaar worden. Je kunt digitale evenementen organiseren zoals de Ignite Keynote, maar ook een kleinschalige borrel zoals we tijdens de pandemie meerdere keren bij ShareValue hebben gedaan. Je kunt ook denken aan een digitaal kantoor waar medewerkers wereldwijd 24/7 naartoe kunnen om elkaar te ontmoeten, te overleggen of voor een praatje aan de -digitale- koffie-automaat. Het ligt allemaal in de mogelijkheden. Één van de dingen die ik zelf heel tof vind, is dat het mogelijk is om realtime ondertiteling te krijgen wanneer je in gesprek bent met een avatar. Zo kunnen mensen die elkaars taal niet spreken, toch met elkaar een gesprek voeren! De metaverse biedt echt heel veel opties. We zijn er nog lang niet over uitgepraat.
De toekomst van de metaverse
De komende jaren gaat er nog veel veranderen op het gebied van metaverse, gezien de grote investeringen die Microsoft en Meta momenteel doen in de verdere ontwikkeling hiervan. Het voelt een beetje als een race; wie kan als eerste de meeste gebruikers aan zich koppelen? Meta focust zich hierbij op de gebruikers van hun sociale netwerk Facebook en Microsoft focust zich op bedrijven en gamers.
Één van de ontwikkelingen die nu al zichtbaar worden, is digitaal eigenaarschap. Digitaal eigenaarschap van land, maar zeker ook van digitale producten. Web3 zal een belangrijke rol gaan spelen in dit digitale eigenaarschap in de vorm van NFT’s (non fungible tokens). Deze digitale tokens geven aan dat een gebruiker daadwerkelijk de eigenaar is van een digitaal item. En waar we digitaal land al hebben genoemd, zijn nu bijvoorbeeld ook digitale kledingstukken in ontwikkeling. Bedrijven als Nike en Adidas springen nu al in op de mogelijkheden die NFT’s bieden in de metaverse. In de toekomst zullen we dus bijvoorbeeld een specifiek Adidas-traininspak digitaal kunnen kopen, zodat onze avatar deze in verschillende metaverses kan dragen.
Metaverse inzetten voor jouw bedrijf?
Wil jij ook graag de metaverse inzetten voor jouw bedrijf? Om samen te vergaderen, voor een digitale borrel of juist voor grotere digitale evenementen? Mijn collega’s en ik denken graag mee over de verschillende mogelijkheden!
Het lijkt vaak wel of er wekelijks nieuwe tools en frameworks uitkomen, en het is dan ook vaak keuzes maken als je bij wilt blijven.
Maar soms zijn er ook nieuwe ontwikkelingen die de kleinere beslissingen als kiezen tussen React of Vue overstijgen. Astro is zo’n ontwikkeling.
Wat is Astro?
Astro is een Static site builder, en dat is op zich niets bijzonders. Wat echter wél bijzonder is, is dat het Astro echt niets uitmaakt wat je in je Static site wil opnemen. Dus als je al een mooi navigatie-component hebt gebouwd in Vue, en een formulieren-component in React; het kan allemaal!
Astro is naast een builder eigenlijk ook een bundler, net zoals Webpack of Vite, maar dan heel erg slim. Zo is het mogelijk om een applicatie te bouwen met de bekende JavaScript-frameworks zonder dat er links naar de JavaScript-files nodig zijn. Je hoeft dan dus geen react.js in te laden, omdat deze al is gebundeld in het pakketje dat Astro voor je gemaakt heeft.
Inmiddels zijn er ook grote bedrijven die gebruik maken van Astro. Dit zijn onder andere Google, Trivago en Netlify.
Wat maakt Astro uniek?
Renderen
Voordat ik uit kan leggen wat Astro bijzonder maakt, moet ik iets uitleggen over Renderen. Hiermee wordt bedoeld: hoe (en waar) wordt de pagina in elkaar gezet?
Er zijn een aantal render-varianten mogelijk:
Client-side Rendering (de pagina wordt samengevoegd op het device van de gebruiker)
Server-side Rendering (de pagina wordt samengevoegd op de server en dan naar de gebruiker gestuurd)
Partial Hydration (de combinatie van de eerder genoemde varianten) de pagina wordt eerst geladen, en vervolgens wordt de inhoud ververst door nieuwere content)
Maar wat Astro nu onderscheidt, is dat het niet alleen mogelijk is om deze renderings-mogelijkheden toe passen per hele pagina, maar ook per eilandje (gedeelte van een pagina). Dit wordt dan ook wel Island Architecture genoemd. Stel je voor dat je op een homepage naast statische componenten als een header en een footer, ook informatie wilt tonen die dynamisch is en misschien langer duurt om binnen te halen. Een voorbeeld hiervan zie je in de afbeelding hieronder.
Island Architecture
Astro heeft hier een specifieke syntax voor:
client:load Als een component wordt geladen zonder client attribuut, dan worden ze toegevoegd zonder JavaScript. Mocht je een component willen laden met JavaScript, dan is ieder geval een client:load noodzakelijk.
client:idle Voor componenten met lage prio. Deze worden pas gerenderd op het moment dat het initieel laden van de pagina klaar is.
client:visible een variant op idle, maat dan met lazy loading. Component wordt pas geladen wanneer het in beeld komt.
client:media Voor componenten die alleen zichtbaar zijn als een media query van toepassing is: bijvoorbeeld alleen op schermen smaller dan 400px.
client:only Zorgt er voor dat een component niet aan de server-side wordt gerenderd, maar alleen aan de client-side.
Wie zijn de concurrenten van Astro?
Concurrenten voor Astro zijn onder te verdelen in 2 groepen: frameworks en bundlers. In de eerste categorie zijn de grootste concurrenten waarschijnlijk NextJS en NuxtJS. Dit zijn vergelijkbare frameworks (NextJS op basis van React, en NuxtJS op basis van VueJS), die beiden mogelijkheden bieden voor Static Site Generation en Server Side Rendering. Het allergrootste verschil met Astro is dat:
Astro stelt je in staat te kiezen welk framework je wil gebruiken, of zelfs wil combineren
Partial hydration is bij Astro standaard. Bij andere frameworks is dit natuurlijk wel mogelijk maar niet direct out-of-the-box
Builds van Astro zijn doorgaans kleiner dan die van de concurrenten door een rigoureuze aanpak van JavaScript files.
Astro zegt in zijn documentatie ook nog het een en ander over het verschil tussen Astro en enkele andere alternatieven zoals
Astro’s mogelijkheid om een applicatie te maken met JavaScript frameworks, die standaard wordt geleverd zónder JavaScript is verfrissend. Mocht je applicatie het wel nodig hebben dan laad je die gewoon in geef je die juiste client methode mee.
Zelf denk ik dat Astro heel interessant is. Juist omdat je verschillende frameworks kunt combineren, of via Astro als middenlaag stapsgewijs over kunt van het ene framework naar het andere. Astro groeit zowel in adaptatie door de Front-End community als in volwassenheid: Juni 2022 kom Astro uit bèta met de release van Astro 1.0.
In ieder geval; Ik houd Astro de komende tijd zeker in de gaten. Jij ook, en kan ik (of één van mijn collega’s) je helpen bij de implementatie? Laat het ons weten!