Cross-platform applicaties ontwikkelen met Ionic

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.

Meer informatie over bUnit vind je hier.

Stryker Mutator

Stryker Mutator

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:

1. Client-side Rendering (de pagina wordt samengevoegd op het device van de gebruiker)
2. Server-side Rendering (de pagina wordt samengevoegd op de server en dan naar de gebruiker gestuurd)
3. 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:

1. 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.
2. client:idle Voor componenten met lage prio. Deze worden pas gerenderd op het moment dat het initieel laden van de pagina klaar is.
3. client:visible een variant op idle, maat dan met lazy loading. Component wordt pas geladen wanneer het in beeld komt.
4. client:media Voor componenten die alleen zichtbaar zijn als een media query van toepassing is: bijvoorbeeld alleen op schermen smaller dan 400px.
5. 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:

1. Astro stelt je in staat te kiezen welk framework je wil gebruiken, of zelfs wil combineren
2. Partial hydration is bij Astro standaard. Bij andere frameworks is dit natuurlijk wel mogelijk maar niet direct out-of-the-box
3. 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 vs. NextJS of
• Astro vs. NuxtJS

Conclusie 🥁

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!