Een PWA met Directus, waarom dat een slimme oplossing is

Je hebt het wellicht al gezien, de splinternieuwe website van Stapp1Solutions. Wist je echter dat onze website niet zomaar een website is, maar een PWA? De toekomst van websites ligt wat ons betreft bij de Progressive Web App. Vandaar dat wij onze eigen site ook helemaal klaar hebben gemaakt voor de toekomst. Hiervoor hebben wij gebruikgemaakt van Directus, een open-source data platform waarmee je op een slimme manier PWA’s kunt maken. We leggen je dan ook graag uit waarom een PWA gebouwd met Directus een slimme oplossing is.

Waarom een Progressive Web App?

Een Progressive Web App, of een PWA, is een nieuwe ontwikkeling op het gebied van web development en app development. Een PWA kan eigenlijk gezien worden als een soort combinatie tussen een website en een app, met de voordelen van beide. Je kunt een PWA namelijk ontwikkelen zoals een website, dus zonder code te schrijven voor een specifiek platform. Wanneer je bijvoorbeeld een iOS-app wilt maken, heb je daar normaal gesproken andere code voor nodig dan wanneer je je app uit wilt geven op Android. Met een PWA maakt dat verschil qua code niet uit. Doordat je dus geen code voor een specifiek platform hoeft te schrijven, gezien je de PWA op dezelfde manier bouwt zoals je een website bouwt, en niet meerdere varianten van je app hoeft te maken voor verschillende platformen, is een Progressive Web App dus sneller en goedkoper om te maken dan een native app.

Hiernaast kent een PWA nog meer voordelen. Doordat het een website is die ook app-functionaliteiten kent, kun je deze dus ook zodanig inzetten. Je kunt de PWA om permissies laten vragen om bijvoorbeeld de camera van het toestel te gebruiken, of om push-notificaties op het toestel te tonen. Daarnaast reageert een PWA een stuk sneller dan een gewone website, wat, als je onze blog over website performance hebt bekeken, kan leiden tot een hogere conversieratio. Ook is een PWA offline te gebruiken. Heb je als gebruiker geen toegang tot het internet, kun je alsnog de site benaderen en gebruiken.

Het grootste voordeel zit bij een PWA in het feit dat deze headless is. Dit houdt in dat de front-end, of de voorkant, van de webapplicatie los staat van de back-end, of de achterkant, ervan. Zo heb je dus meer vrijheden wat betreft design en functionaliteit van je webapplicatie, of het gebruik van verschillende frameworks om dit voor elkaar te krijgen. Stapp1Solutions heeft er zelf ook voor gekozen om haar eigen website te bouwen als een PWA. Vanwege de bovengenoemde voordelen leek ons dat de beste keuze. Zo hebben we niet alleen een snelle website die app-functionaliteiten kent, maar is onze website ook future-proof.

Waarom Directus?

De website van Stapp1Solutions is een PWA die gebouwd is met Directus als achterkant / back-end. Directus is een open-source data platform dat gebruikmaakt van een API. Dit platform is headless, wat dus inhoudt dat je vrij bent in het gebruiken van eender welke front-end oplossing die je maar kunt bedenken. Om die reden hebben wij ervoor gekozen om Directus te gebruiken. De API zorgt ervoor dat je verschillende content types vooraf kunt specificeren, die vervolgens als een soort framework ingezet kunnen worden. Dit blogbericht dat je nu aan het lezen bent, is een van die content types die we in Directus hebben aangemaakt. Doordat we vooraf hebben gespecificeerd hoe een blogbericht eruit moet komen te zien en welke content blokken er allemaal in zouden kunnen zitten, kunnen we snel nieuwe blogberichten aanmaken die allemaal in dezelfde stijl zijn opgebouwd.

Directus is dus een slimme oplossing voor een headless CMS waarmee je gemakkelijk content types kunt specificeren en aanroepen. Bijkomend voordeel is dat je hiermee dus gemakkelijk een maatwerkoplossing kunt realiseren, daar je niet gebonden bent aan een specifieke front-end. Hierdoor kan het dus ingezet worden voor verschillende soorten ervaringen. Een corporate website zoals die van ons kan met Directus worden ontwikkeld, maar bijvoorbeeld ook data-visualisaties of een CRM admin. Daarnaast heeft Directus standaard multi-language mogelijkheden in het systeem ingebouwd. Hiermee kun je dus gemakkelijk een PWA maken die in meerdere talen te bekijken is. Erg handig als je je website internationaal beschikbaar wilt maken.