GraphQL is een query language voor API’s die de aangeboden data verrijkt en begrijpelijk maakt voor ontwikkelaars. Dit zorgt ervoor dat de client (eindgebruiker) op een efficiënte manier alleen de data krijgt waar op dat moment behoefte aan is.

GraphQL is in 2015 ontworpen door Facebook (tegenwoordig Meta) om de API’s snel en flexibel te verwerken voordat het door de Front-End aangesproken kan worden. 
 

Voordelen van GraphQL

Een van de grootste voordelen ten opzichte van traditionele REST calls is dan ook dat developers zelf de data in de response kunnen samenvoegen uit meerdere API calls op de Back-End waardoor er vanaf de Front-End maar één call nodig is naar een GraphQL tussenlaag.
 

Naast dit typische voordeel van data fetching heeft GraphQL nog meer voordelen. Ik zet alle voordelen op een rij:

• Data fetching
• Geen over/under fetching
• Complexe state and cache management (Apollo server)
• Hiërarchische structuur
• Gedefinieerd data model
• Strongly typed
• Schaalbaar
• Documentatie

Geen over / under fetching

Door het gebruik van GraphQL kunnen we op een gemakkelijke manier de architectuur bepalen van de data die we aanroepen vanaf de Front-End. Hierdoor ontstaat er geen over of under fetching: we vragen alleen de data op die we daadwerkelijk nodig hebben. Een voorbeeld: als we een profiel willen tonen met enkel een foto en een naam, hebben we van dat profiel niet de adresgegevens nodig. In de Front-End call naar GraphQL vragen we dan enkel de ID, naam en de foto op. Alle andere informatie van dit profiel kunnen we dan achterwege laten.
 

Per device (mobiel, tablet, desktop enz.) kunnen we een andere view hebben, welke meer of minder informatie weergeeft. De data kunnen we per view aanpassen zodat we nooit meer informatie opvragen dan nodig. Dit komt uiteraard de performance ten goede. 

Complexe state and cache management

Door GraphQL te combineren met Apollo server, hebben we ook een complexe state en cache management tot onze beschikking. We kunnen het zo instellen, dat als de data zich al in de cache van de client bevindt, we deze data niet opnieuw opvragen. 
 

Hiërarchische structuur

Doordat we meer controle krijgen en minder afhankelijk worden van een Back-End, kunnen we de data-architectuur op een hiërarchische structuur inrichten. Hierdoor is het ook mogelijk meerdere data-objecten te hergebruiken.
 

Facebook is hiervan een mooi voorbeeld: deze heeft één gebruikersobject, die kan worden hergebruikt voor de connecties van de gebruiker. Ook die heeft weer connecties waar het voor kan worden hergebruikt. Etc, etc. Mede door de herbruikbare objecten maken we efficiënt gebruik van GraphQL.

Nadelen van GraphQL

Uiteraard kleven er ook nadelen aan het gebruik van GraphQL. Dit zit hem voornamelijk in de complexiteit. Wanneer we GraphQL gaan inzetten en we gebruiken GraphQL enkel als een 1-op-1 doorgeefluik van data, dan zal het gebruik van een REST API hiervoor meer geschikt zijn en voorkomen we overbodige complexiteit in onze codebase.

Van query’s tot resolvers

In de basis bestaat GraphQL uit query’s, mutations, subscriptions en resolvers.

In de Front-End kunnen we een query, mutation of subscription uitvoeren naar GraphQL. 

• Query: ophalen van data ( GET )
• Mutation: mutatie van de data, dat kan een POST, UPDATE of een DELETE zijn.
• Subscription: hiermee kunnen we een subscription instellen om de Front-End aan te passen wanneer er op de server wat verandert zonder dat er een actie is geweest vanuit de Front-End.
   

Om deze data op te halen, moeten we voor de query’s, mutations of subscriptions een resolver inrichten. Een resolver maakt de connectie en verwerkt de data van de externe API call of een database query. Het resultaat wordt door een query weer teruggestuurd naar de Front-End.

Als de query’s, mutations en resolvers zijn ingesteld, willen we deze ook kunnen testen zonder al te veel code te schrijven. In de console kunnen we de GraphQL server starten waarna de playground/sandbox tot onze beschikking komt.

Er zijn diverse playgrounds of sandboxes beschikbaar, van een lokale playground-versie tot aan een subscription op studio.apollographql.com of een browser extention zoals GraphQL Playground for Chrome. Uiteraard kan er ook een call gemaakt worden vanuit postman om de API te testen.

GraphQL community

GraphQL bestaat nu 7 jaar en weten we dat deze door de community wordt omarmd, mede doordat het niet enkel en alleen in JavaScript beschikbaar is, maar ook bijvoorbeeld in Python, Ruby en C#.

Als we kijken in GitHub naar de stars (likes) en downloads zien we voor de belangrijkste JavaScript varianten:

• GraphQL: 19K stars / 9.5k downloads p/w
• Apollo server: 13k stars / 1.6k downloads p/w
• Express GraphQL: 6k stars / 0.7 downloads p/w

Dit geeft uiteraard een beeld hoe het ontvangen wordt door de community, maar om een beter beeld te krijgen hebben ze in 2022 een survey gehouden: State of GraphQL 2022.
 

Wat zijn de highlights van de state of GraphQL 2022

Er hebben meer dan 3.000 developers meegedaan aan deze survey. Gemiddeld hadden de deelnemers 6 tot 10 jaar development-ervaring en bijna de helft werkt bij middelgrote tot grote bedrijven. Hieronder licht ik enkele vragen uit de survey uit, om een goed beeld te schetsen.

In welke combinatie met webframeworks wordt GraphQL het meeste gebruikt?

1. Next.js: 32,2%
2. React: 27,8%
3. Gatsby: 12,1%

Voor welke clients wordt een GraphQL het meeste ingezet?

1. Browsers: 62,3%
2. Native Mobile Apps: 24,2%
3. Other Servers: 16,3%

Welke taal wordt gebruikt om GraphQL-backends te schrijven?

1. TypeScript: 49,7%
2. Javascript: 34,7%
3. Go: 7,5%

Welke GraphQL server wordt het meest gebruikt?

1. Apollo server: 67,3%
2. GraphQL.js: 32,4%
3. Express-GraphQL: 27,7%

Welke GrapQL IDE’s worden het meeste gebruikt?

1. GraphQL: 39,4%
2. GraphQL Playground: 34,8%
3. Postman: 18%

Conclusie van de state of GraphQL

Quote: Als gevolg hiervan verandert het tij in de manier waarop we GraphQL op de client gebruiken, waarbij bibliotheken zoals urql en React Query tegenwoordig populaire keuzes zijn, naast getrouwen zoals Apollo Client en Relay. Het is ook geweldig om te zien dat GraphQL blijft groeien en bloeien in andere talen dan JavaScript – er zijn nu stabiele en volwassen GraphQL-servers en -clients in bijna alle populaire programmeertalen!

Wil je meer weten? Bekijk dan de hele survey op https://2022.stateofgraphql.com/

Uiteraard zou GraphQL, GraphQL niet zijn als ze de data van state of GraphQL niet openbaar beschikbaar stellen op https://graphiql.devographics.com/.

De toekomst van GraphQL

Naar verwachting neemt GraphQL steeds meer zijn eigen plek in het API landschap in. GraphQL heeft niet de intentie om ander servers zoals REST API te vervangen, maar het wordt ingezet vanuit de behoefte. In het geval van GraphQL is dat meer vanuit de gedachte ‘client first’ omdat we GraphQL vanuit onze Front-End gemakkelijker kunnen beheren. GraphQL heeft zijn oorsprong bij Meta (Facebook) en daarom zien we ook dat de aanhang onder Reactgebruikers hoog is. Ik verwacht wel dat GraphQL in de toekomst breder ingezet gaat worden in combinatie met Angular of Vue.

Wil je nou ook aan de slag met GraphQL en kan je daar hulp bij gebruiken? Laat het ons weten: mijn collega’s en ik helpen je graag!
 

De afgelopen paar weken is ChatGPT, het chat programma van OpenAI een belangrijk onderwerp van gesprek in de wereld. Veel mensen lezen erover en denken na over het gebruik van dit platform. In deze blog leg ik uit wat het is en wat het kan betekenen voor jouw vakgebied en of organisatie.

Wat is ChatGPT?

ChatGPT is een chatbot met een getraind taalmodel ontwikkeld door OpenAI. Dit taalmodel is getraind met kunstmatige intelligentie (ML). Het systeem kan tekst begrijpen en schrijven en is in staat om te communiceren met mensen in begrijpelijke taal. Er zijn enorm veel toepassingen te bedenken om ChatGPT te gebruiken. Het kan o.a. automatisch samenvattingen schrijven, ondersteunen bij het ontwikkelen van software, gekoppeld worden aan chatbots en zo zijn er nog vele andere toepassingen.

Wat is AI?

Kunstmatige intelligentie (AI) is een brede term die verwijst naar systemen die in staat zijn tot intelligent gedrag. Dit kan variëren van het herkennen van afbeeldingen tot het spelen van een potje schaken. Tegenwoordig vind je deze techniek ook in je smartphone, computer en smarthome apparaten. Kunstmatige intelligentie wordt steeds belangrijker in onze samenleving.

Hoe werkt ChatGPT?

Het is eigenlijk een zeer slimme chatbot die je alles kan vragen. Op het moment van schrijven is het taalmodel gebaseerd op de content van het ontstaan van het internet t/m 2021.

Dus als je wilt weten wat de hoofdstad is van Spanje, dan vertelt deze je zonder moeite dat dit Madrid is. Maar als je vragen stelt die recentelijk zijn gebeurd, dan kan ChatGPT daar geen antwoord op geven. Ontwikkelaars kunnen wel aparte toepassingen maken die data combineert van recentelijke gebeurtenissen. Hierdoor is er nog veel meer mogelijk.

Als je wilt dat ChatGPT je vraag beantwoordt, of iets anders doet, dan kan je dat gewoon vragen op dezelfde manier als dat je dat een collega vraagt. Des te meer context jouw vraag (ook wel prompt genoemd) bevat, des te beter en uitgebreider het antwoord van ChatGPT is.

Mocht je willen leren goede prompts te schrijven, kijk dan op het blog van Zapier. Daar hebben ze een hele lijst met tips die je kunt gebruiken.

Hoe kan je ChatGPT inzetten in jouw organisatie?

Omdat er zoveel toepassingen zijn om ChatGPT te gebruiken, willen we je graag wat ideeën geven zodat je deze kunt gaan inzetten in jouw organisatie.

Als tip willen we ook meegeven dat je niet alles over wilt laten aan ChatGPT. Het moet vooral jou of je collega’s ondersteunen, zodat er meer tijd over is voor andere belangrijke werkzaamheden.

Hopelijk heb je wat aan de tips!

Developers

Als we denken aan onze developers dan zijn er ook genoeg mogelijkheden om ChatGPT te benutten. Met deze toepassingen kunnen de developers weer stukken productiever worden in hun werk om goede software te bouwen.

Codegeneratie

Een van de meest krachtige toepassingen van ChatGPT voor developers is het genereren van code. Zowel in de ChatGPT applicatie kan dit worden gedaan, maar ook door Github Copilot te gebruiken. Github Copilot gebruikt de OpenAI Codex om code te genereren. De tool stelt code voor aan de developer tijdens het schrijven.

Unit tests automatiseren

ChatGPT kan ook worden gebruikt om automatisch unit tests te genereren voor bestaande code. Dit kan helpen om de kwaliteit van de code te verhogen en tegelijkertijd de tijd die nodig is om handmatig testen te schrijven te verminderen. Het is natuurlijk wel altijd nodig dat de developer de code controleert op correctheid en eventuele bugs.

Generatie van testdata

Omdat ChatGPT zo sterk is in het genereren van code, is deze ook goed in te zetten voor het genereren van testdata. Dit helpt bij de ontwikkeling en het testen van software. Dit kan helpen bij het sneller ontdekken van fouten in de code en kan ook bijdragen aan het verhogen van de kwaliteit van de software.

Begrijpen en uitleggen van code

Onze developers zijn zeer vakkundig in hun vak. Maar soms komen zij complexe code tegen bij onze klanten, waarvan niet meteen duidelijk is wat het doet of hoe het werkt.

Dan kan ChatGPT gevraagd worden om uitleg te geven over de code. De developer hoeft alleen te vragen “Leg uit hoe deze code werkt” en daarachter het stukje code te plakken. Dit is vooral handig wanneer een developer net start op een nieuw project. Dit brengt hem of haar sneller op hoogte. Uiteraard weten onze developers dat ze daar geen bedrijfsgevoelige informatie moeten delen 😉

Consultants

Onze consultants zorgen bij onze klanten dat alles omtrent Microsoft 365 is ingeregeld, maar zij geven ook adviezen en trainingen zodat de organisatie optimaal gebruik kan maken van bijvoorbeeld Teams, SharePoint en nog veel meer. Voor deze werkzaamheden zijn genoeg toepassingen te bedenken om ChatGPT te gebruiken. Of juist de API van OpenAI te integreren met één van de PowerApps van uw organisatie.

Het is goed om te vermelden dat Microsoft een zeer groot voorstander is van AI. Daarom hebben ze ook een grote investering gedaan in OpenAI en wordt hun OpenAI Service ook in steeds meer producten van Microsoft gebruikt (de geruchten gaan rond dat het word geïmplementeerd in Word, Excel, PowerPoint maar ook Bing).

Chatbot in Teams

Misschien heeft jouw organisatie wel een chatbot die via Teams beschikbaar is voor alle medewerkers om gegevens en informatie op te vragen. Of wil je er één laten ontwikkelen via het Microsoft Power Platform, laat het ons gerust weten.

De consultants kunnen zorgen dat deze chatbots gekoppeld zijn met OpenAI API. Hierdoor heeft de AI ook de context van jouw organisatie en kan deze veel betere antwoorden geven. Microsoft heeft in 2021 aangekondigd dat het Power Platform wordt voorzien van de kracht van GPT-3 (het taalmodel achter ChatGPT).

Ontwikkelen van trainingen

Om te zorgen dat een organisatie alles benut wat Microsoft 365 heeft, maken onze consultants regelmatig trainingen of schrijven ze adviezen. Hierbij kan ChatGPT perfect worden gebruikt om te ondersteunen omdat deze zoveel meer data beschikbaar heeft dan het menselijke brein. Er kan bijvoorbeeld aan ChatGPT gevraagd worden om een opsomming te geven van belangrijke onderwerpen voor een training over het gebruik van Teams bots.

Engineers

Waar zouden we zijn tegenwoordig zonder de Azure engineers? Want onze developers kunnen wel goede software bouwen, maar het moet uiteraard worden gehost in Azure om het schaalbaar te maken. ChatGPT kan hierin een zeer goede rol vervullen om de engineer te ondersteunen.

Beheer van Azure servers

ChatGPT kan worden gebruikt voor het automatiseren van het beheer van Azure servers. Zoals het uitvoeren van scripts en voor het instellen, configureren en bijwerken van servers.

Dit kan bijvoorbeeld gebruikt worden voor het automatiseren van de deployment van toepassingen, het schalen van resources op basis van belasting of het proactief waarschuwen en herstellen van fouten. Dit kan de efficiëntie en betrouwbaarheid van het serverbeheer verhogen. Hierin is ChatGPT niet leidend, maar juist als ondersteuner zeer handig. Daarbij kan het dus gebeuren dat ChatGPT nieuwe mogelijkheden biedt die daarvoor niet mogelijk waren.

Security

ChatGPT kan ook worden gebruikt voor het automatiseren van taken in Azure op het gebied van beveiliging en compliance. Bijvoorbeeld door het genereren van beveiligingsrapporten, het monitoren van activiteiten op servers, het detecteren van potentiële dreigingen en het uitvoeren van incidentrespons werkzaamheden.

Ook kan het gebruikt worden voor het automatiseren van controles voor compliance met industrie- of overheidsnormen, zoals HIPAA of PCI-DSS. Dit kan helpen om de beveiliging en compliance van de Azure-omgeving te verhogen.

Automatisering van testprocedures

Het automatiseren van testprocedures voor Azure toepassingen en services is ook een taak waarbij ChatGPT kan helpen.

Bijvoorbeeld door het genereren van testscripts, het uitvoeren van tests en het rapporteren van testresultaten. Dit kan helpen om de kwaliteit van de toepassingen te verhogen en problemen sneller op te sporen en op te lossen.

Ook kan het gebruikt worden om automatisch regression testing te doen, waardoor de impact van veranderingen op de toepassingen en services in kaart wordt gebracht.

Marketing

Ook marketeers kunnen rekenen op de ondersteuning van ChatGPT op vele vlakken. Of je nou als marketeer werkt in een grote of kleine organisatie, het maakt voor ChatGPT niet uit.

Helpen bij het schrijven van content

Marketeers kunnen ChatGPT gebruiken om automatisch productbeschrijvingen te genereren voor hun webshop of catalogus. Door het geven van specifieke informatie over het product, zoals kenmerken en voordelen, kan ChatGPT een overtuigende en unieke beschrijving genereren die de verkoop kan verhogen. Of om automatisch unieke en relevante inhoud te genereren voor hun website, sociale media of e-mails. Door specifieke onderwerpen of keywords te geven, kan ChatGPT bijvoorbeeld een blog, een nieuwsbrief of een social media post genereren die aansluit op de interesses van de doelgroep.

Generatie van script en/of ideeën voor marketingcampagnes

Vaak kost het heel veel tijd voor marketeers om scripts en/of ideeën te schrijven voor marketingcampagnes. Marketeers kunnen ChatGPT gebruiken om automatisch script of ideeën te genereren voor hun marketingcampagnes, zoals video’s, reclamecampagnes of commercials.

Door bijvoorbeeld specifieke doelgroepen, doelstellingen en merkwaarden te geven, kan ChatGPT een gepersonaliseerd script genereren voor een televisiecommercial. Of een idee voor een social media campagne die aansluit op deze doelstellingen.

Recruitment

Het vinden van nieuwe medewerkers is tegenwoordig voor iedere organisatie een lastige opgave. ChatGPT kan zelfs daarin ondersteunen.

Gepersonaliseerde berichten sturen naar kandidaten

Het maken van gepersonaliseerde berichten die terecht komen bij de juiste persoon is maatwerk voor elke recruiter. Dit kost enorm veel tijd en tijd is kostbaar in iedere organisatie. ChatGPT kan heel goed helpen in het genereren van gepersonaliseerde berichten voor kandidaten die recruiters tegenkomen op bijvoorbeeld LinkedIn. Hoe meer informatie je ChatGPT geeft over de kandidaat, des te beter kan deze een bericht maken die aansluit op de persoon.

Het is nog steeds aan te bevelen om niet alles 1 op 1 over te nemen wat ChatGPT voorstelt, maar met wat aanpassingen kan je het veranderen naar een bericht dat je persoonlijk kan sturen naar de kandidaat.

Automatisch genereren van vacatureteksten

Met ChatGPT kunnen recruitment professionals automatisch vacatureteksten genereren. Door de specifieke eisen en verwachtingen van de vacature in te voeren, kan ChatGPT een gedetailleerde en aantrekkelijke vacaturetekst genereren die geschikt is voor diverse platforms.

Hierbij moet wel opgelet worden dat de tekst gecontroleerd wordt op onwaarheden. Iedere organisatie doet dingen net weer even anders. Sommige teksten die ChatGPT genereert zijn wel van toepassing op de ene organisatie, maar niet op de andere.

Sales

In elke organisatie is het salesproces anders ingericht. Maar in het geval waar verkopers of accountmanagers een rol spelen voor het aanbieden van diensten en producten kan ook ChatGPT een rol vervullen.

Proactief aanbieden van oplossingen en diensten

ChatGPT kan goed worden ingezet om berichten te genereren met gepersonaliseerde aanbiedingen voor potentiële klanten. Bij de prompt dient dan zoveel mogelijk aandacht besteed te worden aan het geven van context over de interesses of bedrijfsbehoeften. Het is natuurlijk niet een garantie tot succes, maar het kan wel bijdragen aan het vinden van creatieve en gepersonaliseerde berichten waar mensen niet zo snel aan hebben gedacht.

Conclusie

Het is belangrijk om te onthouden dat dit voorbeelden zijn om te illustreren hoe ChatGPT kan worden gebruikt, en dat er vele andere manieren zijn waarop medewerkers binnen jouw organisatie ChatGPT kunnen inzetten. Het belangrijkste is dat men de technologie inzet voor specifieke doelstellingen en dat men er voor zorgt dat het gebruik van de technologie een toegevoegde waarde is voor de organisatie.

Wij zijn natuurlijk benieuwd op welke manier jouw organisatie ChatGPT wilt gaan toepassen. Wij geloven erin dat AI steeds vaker ingezet wordt binnen organisaties en horen het graag als wij daarbij kunnen ondersteunen.

p.s. deze blog is, uiteraard, in eerste instantie door ChatGPT gegenereerd. Maar ook hier was enig redigeerwerk noodzakelijk. Ook voor ons bleek dat wij mensen gelukkig nog steeds nodig zijn 😉

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.

Figuur 1 - Web-interface voor het opzetten van een Ionic-applicatie.

​

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.

Figuur 2 - Standaard Ionic-applicatie zonder menu of tabbladen.

​

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.

$ npm install cordova-plugin-geolocation

$ npm install @awesome-cordova-plugins/geolocation

$ ionic cap sync

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.

 

import { Component, OnInit } from '@angular/core';
import { Geolocation, Geoposition } from '@awesome-cordova-plugins/geolocation/ngx';

@Component({
  selector: 'app-home',
  template: `
    <ion-content [fullscreen]="true">
      <div id="container">
        <strong>Uw huidige locatie:</strong>
        <p *ngIf="currentPosition">{{currentPosition.coords.latitude}}, {{currentPosition.coords.longitude}}</p>
        <p *ngIf="!currentPosition">Onbekend</p>
      </div>
    </ion-content>
  `
})
export class HomePage implements OnInit {
  currentPosition: Geoposition;

  constructor(private geolocation: Geolocation) {}

  ngOnInit(): void {
    this.geolocation.getCurrentPosition().then((resp) => {
      this.currentPosition = resp;
    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }

}

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.

Figuur 3 - Locatie-toestemming wordt door de telefoon zelf afgehandeld.

​

Als de locatie succesvol kan worden opgehaald, zien we dat de coördinaten van de locatie in de app worden weergegeven.

Figuur 4 - Locatie-coördinaten worden succesvol opgehaald en 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!

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!

Om te beginnen: wat is end-to-end testen? We hebben twee zogeheten ‘ends’ in een webapplicatie: de Front-End en de Back-End. Met unit-testing testen we de code voor ofwel de Front-End ofwel de Back-End. We testen niet hoe de applicatie zich gedraagt in de browser of hoe beide ends samenwerken.

Begrijp me niet verkeerd: ik ben voorstander van unit tests! Maar het is net zo belangrijk om te testen hoe de Front-End en de Back-End samenwerken.

Met end-to-end testen kijk je of de Front-End goed samenwerkt met de Back-End. Zo moet bijvoorbeeld het automatisch invullen van formulieren worden getest met een end-to-end test, maar ook het klikken op knoppen en het navigeren door de pagina’s.

Deze end-to-end tests controleren dus of de Front-End de gegevens vanuit de Back-End correct verwerkt.

Wat is Cypress?

Er zijn veel end-to-end testtoolkits, maar een van de meest populaire en snelste toolkits is Cypress.

Cypress biedt een manier om end-to-end tests te schrijven met JavaScript en de testrunner. Daarnaast biedt het de mogelijkheid om screenshots en video’s op te slaan wanneer een test mislukt. En, waar de meeste organisaties blij van worden: het is open-source. En dat is geweldig.

End-to-end testen met Cypress

In de Cypress-documentatie staat een geweldige tutorial waarin je op weg wordt geholpen bij het schrijven van end-to-end-tests.

Stap 1: configureren

Stap 1: configureren

Aan de basis van het project bevindt zich een cypress.json, waar je enkele standaardconfiguraties kunt wijzigen. In ons project ziet het er als volgt uit:

 

{
    "testFiles": "**/*.e2e.test.js",
    "chromeWebSecurity": false
}

In de property testFiles vertellen we Cypress om te zoeken naar bestanden die e2e.test.js in de naam bevatten. Je kunt Cypress configureren met TypeScript, maar in dit geval denk ik dat dat geen toegevoegde waarde heeft. Het vereist een extra transpilatie-stap die langer duurt.

Stap 2: testbestanden opslaan

Stap 2: testbestanden opslaan

Bij unit-testing is het heel gebruikelijk om de tests op te slaan in de componentmappen. In dit geval neemt Cypress de map cypress/integration als root om naar de bestanden te zoeken. We hebben dus een structuur die gebaseerd is op de applicatie zelf, waarin we de end-to-end testbestanden opslaan.

Stap 3: de test voorzien van minimale eisen

Stap 3: de test voorzien van minimale eisen

Elke test heeft ten minste een function describe() met daarin ten minste één it() function. Dit werkt op dezelfde manier als het schrijven van unit-tests:

 

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Dit voorbeeld lijkt op een unit-test. We moeten dus gebruik maken van de Cypress Library. Je kunt dat gebruiken door cy te gebruiken zoals in het onderstaande voorbeeld, waarin we https://example.cypress.io bezoeken.

 

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
  })
})

Je kunt zien dat de echte browser deze actie uitvoert door npm run e2e:open uit te voeren.

Onze scripts in de package.json zien er als volgt uit:

 

{
//...
"e2e:run": "npx cypress run --config-file cypress.json",
"e2e:open": "npx cypress open --config-file cypress.json",
"e2e:open:edge": "npx cypress open --browser edge --config-file cypress.json",
"e2e:open:firefox": "npx cypress open --browser firefox --config-file cypress.json"
//...
}

Cypress start de toepassing en daar kan je de end-to-end-test selecteren die je wilt uitvoeren. Standaard wordt de Chrome-browser geopend, maar er is ook een optie om het in Firefox of Edge uit te voeren.

Cypress biedt een complete bibliotheek en je kunt de documentatie raadplegen voor meer informatie hierover.

Stap 4: testen!

Stap 4: testen!

We zullen vooral zaken die in de browser verschijnen of veranderen testen met end-to-end tests. Een eenvoudig scenario: we bezoeken pagina x en controleren of de h1 de tekst “Dit is een geweldige titel” bevat.

 


describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.get('h1').should('contain.text', ' Dit is een geweldige titel');
  })
})

In dit voorbeeld maakt elke methode die je aanroept vanuit de cy-bibliotheek deel uit van het testen. Zo zal cy.visit() de actie uitvoeren, maar als er geen geldige pagina op die URL staat, zal de test niet slagen. Dus met elke actie die je uitvoert, begin je een ‘assertion’.

In Cypress zijn er twee verschillende soorten ‘assertions’. should() of and() zijn “Implicit Subjects”. .expect is een “Explicit Subject”. Lees hier meer over in de Cypress-documentatie.

Bij het aanroepen van cy.get(‘h1’) zal het zoeken naar de H1-tag. Wanneer het dat element vindt, gaat de test verder. De test zal falen indien het element niet binnen een paar milliseconden wordt gevonden. Na de get-method kun je een heleboel andere methoden koppelen, zoals:

• .contains() verwacht dat het element met inhoud uiteindelijk in de DOM zal bestaan.
• .find() verwacht ook dat het element uiteindelijk in de DOM zal bestaan.
• .type() verwacht dat het element uiteindelijk in een typbare staat zal zijn.
• .click() verwacht dat het element zich uiteindelijk in een bruikbare staat bevindt.
• .its() verwacht uiteindelijk een property over het huidige onderwerp te vinden.

Dus wat testen we met end-to-end-tests?

1. Of een element een bepaalde klasse heeft (cy.get(‘element.selector’).should(‘have.class’, ‘ng-valid’); ) of juist niet (cy.get(‘element.selector’).should(‘not.have.class’, ‘ng-valid’);).
2. Of een lijst 3 onderliggende elementen heeft ( cy.get(‘ul > li’).should(‘have.length’, 3); ).
3. Controleren of een invoerveld of tekstgebied een bepaalde waarde heeft ( cy.get(‘input[name=“firstName”]’).type(‘Santa Claus’).should(‘have.value’, ‘Santa Claus’); ).

Bekijk deze lijst met voorbeelden van wat je kunt gebruiken in de should-method.

Extra voorbeeld:

Je kunt de context van een bovenliggend element toevoegen om assertions uit te voeren, wat handig is bij formulieren.

 

<form>
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Login</button>
</form>

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.get('form').within(($form) => {
        // you have access to the found form via
        // the jQuery object $form if you need it

        // cy.get() will only search for elements within form,
        // not within the entire document
        cy.get('input[name="email"]').type('john.doe@email.com')
        cy.get('input[name="password"]').type('password')
        cy.root().submit()
    })
  })
})

Kijk voor meer voorbeelden van de within()-method in de Cypress-documentatie.

Herbruikbare functionaliteit

In het geval van herbruikbare acties die je keer op keer uitvoert, kan je eenvoudige functies schrijven die je in een lib-map kunt plaatsen. Maar Cypress biedt een gebruiksvriendelijkere manier om dit te doen. Dit wordt “custom commands” genoemd; hiervan kan je veel voorbeelden vinden in de documentatie.

Maar een van de beste voorbeelden is het schrijven van de command voor de login. Je moet die code toevoegen aan het bestand cypress/support/commands.js.

 

Cypress.Commands.add('login', (userType, options = {}) => {
  // this is an example of skipping your UI and logging in programmatically

  // setup some basic types
  // and user properties
  const types = {
    admin: {
      name: 'Jane Lane',
      admin: true,
    },
    user: {
      name: 'Jim Bob',
      admin: false,
    },
  }

  // grab the user
  const user = types[userType]

  // create the user first in the DB
  cy.request({
    url: '/seed/users', // assuming you've exposed a seeds route
    method: 'POST',
    body: user,
  })
    .its('body')
    .then((body) => {
      // assuming the server sends back the user details
      // including a randomly generated password
      //
      // we can now login as this newly created user
      cy.request({
        url: '/login',
        method: 'POST',
        body: {
          email: body.email,
          password: body.password,
        },
      })
    })
})

Conclusie

Nu is het aan jou om geweldige end-to-end tests te schrijven met Cypress! Perfecte tests bestaan niet, maar als je ze elke keer een beetje optimaliseert, wordt het je ‘source of truth’. De end-to-end-tests zijn geweldig voor developers om uit te voeren na het bouwen van een nieuwe functie of het wijzigen van een bestaande, omdat het onmogelijk is om alle testscenario’s te onthouden.

Veel succes en plezier met het schrijven van waardevolle end-to-end tests! Als we je hierbij kunnen helpen, doen mijn collega’s en ik dat natuurlijk graag.

Front-End developers weten dat de ontwikkeling van Front-End technieken nooit stil staat. De ontwikkeling van frameworks als React, Vue, Angular en Svelte is de laatste jaren flink gegroeid. Daarnaast komen er steeds vaker handige tools beschikbaar die het leven van een frontender net iets makkelijker kunnen maken. Deze keer kijken we naar Storybook en wat de meerwaarde hiervan kan zijn zowel voor een developer als voor andere disciplines. In eerste plaats moeten we weten wat Storybook is, en waar het voor gebruikt kan worden.

​

Wat is Storybook?

Het maken en onderhouden van een style guide is over het algemeen een uitdaging. Storybook is een open source framework dat het eenvoudiger maakt om de user interface van projecten te bouwen, documenteren, testen en demonstreren.

Storybook kan gebruikt worden als playground voor UI componenten. Doordat Storybook zelf buiten de applicatie draait, kunnen we het gedrag van de componenten in Storybook aanpassen naar een gewenste situatie, zonder dat dit invloed heeft op de componenten in de applicatie.

De huidige versies van Storybook ondersteunen functionaliteiten die een groot aantal onduidelijkheden in de moderne workflow voor webontwikkeling opvult.

Storybook ondersteunt de meest gangbare Front-End frameworks van het moment zoals React, Vue en Angular, maar is ook vanuit native JavaScript te gebruiken.

​

Wat is de story van Storybook?

Uit de behoefte om componenten in een geïsoleerde omgeving te kunnen definiëren, developen en de UI te kunnen testen, begon Storybook in april 2016 met een eerste release van versie 1.0 vanuit de Kadira startup (de originele developer van Storybook), waarna in september van het zelfde jaar versie 2.0 vrijgegeven werd.

Na dat de startup werd stopgezet en het project dood werd verklaard, volgde er een korte break en werd het project in 2017 door de open source verder omarmd. Inmiddels is versie 6.3 gereleased (juni 2021). De hele storybook story is te vinden op https://storybook.js.org/blog/the-storybook-story/

Storybook stopgezet door Kadira

​

Ondertussen hebben ze meer dan 10.000 github stars en 290k maandelijkse downloads.

Wie kunnen Storybook gebruiken en hoe?

Developers binnen het team zullen Storybook gebruiken als werkruimte om componenten op dezelfde manier neer te zetten. Een voordeel is dan ook dat de opgedane kennis van Storybook te gebruiken is bij elk framework dat momenteel door Storybook ondersteunt wordt.

Storybook kan opengesteld worden voor externe developers, wat interessant kan zijn voor open source ontwikkeling. Hiervoor kan Storybook vooral ingezet worden als documentatie waarbij de API van de componenten wordt uitgelegd.

Voor UX/UI designers kan Storybook als onderdeel dienen van hun design system met koppelingen naar o.a. Frontify waardoor het als gemeenschappelijk bron kan dienen. Als er aanpassingen gedaan moeten worden of er een nieuw component ontwikkeld is, hebben ze gelijk alle (nieuwe) componenten tot hun beschikking

Naast dat het documentatie oplevert, heeft het nog een voordeel dat de stakeholders sneller een nieuwe component kunnen beoordelen op het design en functionaliteit en niet afhankelijk zijn van een nieuwe release. Ook kan Storybook gebruikt worden voor verdere communicatie binnen of buiten het bedrijf.

​

Om Storybook te gebruiken binnen een project, moet er wel rekening gehouden worden met het gekozen framework van het project. Zo zal de installatie en de structuur/syntax voor React net iets even anders zijn dan voor bijvoorbeeld Vue of Angular.

Storybook is gebaseerd op componenten: maak daarom componenten zo compact mogelijk. Terwijl een project groeit met steeds meer componenten, is het verstandig om de volgende richtlijnen te hanteren:

• Je codeert de stories in Storybook om een component weer te geven, maar het kan ook op zichzelf documentatie worden over hoe het component te implementeren is.
• Heldere en duidelijke code. Het doel is om te begrijpen hoe je het component kunt gebruiken zonder te veel na te denken.
• Om dit te doen, probeer zo statisch mogelijk te zijn: vermijd abstracties, herhaal indien nodig, vermijd elk soort algoritme.
• Een juiste benaming en locatie van je story, zodat deze overeenkomt met je codebase

Op het eerste gezicht lijkt Storybook alleen te zijn bedoeld voor zo gezegd ‘domme componenten’ die alleen gebruikt worden voor de user interface. Door de complexere componenten te isoleren en business logica te verminderen, kunnen deze echter prima binnen Storybook gebruikt worden waarbij de focus verlegd wordt van de functionaliteit naar het component zelf.

​Storybook addons

In de basis is Storybook vrij compleet, maar dat wil niet zeggen dat we er niet meer mee kunnen doen. Daarom zijn er tal van addon’s voor te vinden die net even dat stukje extra functionaliteit kunnen geven.

Populaire addons

​

Een aantal veel gebruikte addons zijn:

• Links - dit kan gebruikt worden om componenten onderling te verbinden om demo’s of prototypes mee te maken.
• Viewport - met Storybook Viewport Addon kunnen jouw verhalen in Storybook in verschillende formaten en lay-outs worden weergegeven. Dit helpt bij het bouwen van responsieve componenten in Storybook.
• Actions – geeft data weer in de UI na het uitvoeren van een event handler
• Accessibillty - test je componenten tegen de huidige webstandaard
• Docs – standaard heeft elke story al een DocsPage. Mocht deze niet voldoende zijn kan er gebruik gemaakt worden van deze addon waarna er meer mogelijkheden zijn voor documentatie

Conclusie

Storybook kan optimaal functioneren als het gebruikt wordt door developers, UX/UI developers en de stakeholders. Door combinatie van deze verschillende disciplines levert Storybook een grote meerwaarde voor het ontwikkelen en het onderhouden van webapplicaties.

Zelf aan de slag?

Wil je zelf aan de slag met Storybook, maar kan jouw team wel iemand gebruiken die hier ervaring mee heeft? Mijn mede-frontenders bij ShareValue en ikzelf hebben hier ervaring mee, werken graag met Storybook en komen dan ook graag jouw team helpen bij het opzetten hiervan.

Bronnen

Storybook: https://storybook.js.org/

Addons: https://storybook.js.org/addons

Storybook Story: https://storybook.js.org/blog/the-storybook-story/