Content en front-end: twee aparte werelden?

De markt vraagt naar ruimdenkende oplossingen op het gebied van user experience en site maintainability. Een extra uitdaging hierbij is dat een applicatie al tijden niet meer bestaat uit statische pagina’s, maar dat content en front-end worden gescheiden van elkaar.

Een goede oplossing hiervoor heeft nogal wat voeten in de aarde. Waar vroeger een website bestond uit een stel html pagina’s met wat scripts op de achtergrond, kan tegenwoordig een front-end gebouwd zijn middels een compleet framework zoals Vue.js. Synetic is ervaren in het bouwen van dit soort gespecialiseerde oplossingen voor klanten, naast het creëren van een mooie omgeving voor de klant om hun content te kunnen beheren via het Drupal Content Management Systeem (CMS). Hoe zorg je ervoor dat een front-end in Vue.js goed werkt met een Drupal CMS als content verstrekker?

Daarbij ontstaat door het koppelen van andere diensten aan het CMS platform en het samenvoegen van interessante content, een perfect aansluitende digital experience voor de eindgebruiker. De content beheerder kan zijn content aanmaken, en zelfs laten genereren, door gebruik te maken van een zogeheten Digital Experience Platform (DXP).

Lees meer over een DXP

Een mooi gestileerde front-end moet ook kunnen praten met alle toeters en bellen van zo’n groot platform. Het platform bestaat immers niet meer uit ‘wat simpele scripts en een backend’, maar uit een scala van tools om de content zo verfijnd mogelijk voor de eindgebruiker neer te zetten. Hoe deze communicatie binnen het platform effectief kan verlopen middels Drupal en Vue.js was het onderwerp van Marco zijn onderzoek.

Waarom ontkoppelen?

Het is een relatief nieuwe zienswijze om de content van een website in een andere applicatie te beheren, dan de plek waar het voor de gebruiker weergegeven wordt. Dat was voorheen één applicatie om de content te beheren en weer te geven aan de gebruiker. Het is goed om de weergave laag uit een CMS te halen en apart te zetten, dit geeft meer mogelijkheden en flexibiliteit. Wat vervolgens leidt tot een verhoogde user experience voor de eindgebruiker. Tegenwoordig is het met het principe van deze ‘ontkoppeling’ dus niet meer nodig om alles op één plek te hebben.

Voor het onderzoek was het van belang een aantal zaken in acht te nemen. Zo is het belangrijk dat we ons niet teveel toespitsen op één enkele techniek, maar de optie open houden om later onderdelen van het platform uit te kunnen wisselen of toe kunnen voegen. Dit principe wordt ook wel het voorkomen van ‘vendor lock-in’ genoemd. Daarnaast was het ook belangrijk om het proces dynamisch te houden. Dat wil zeggen dat de front-end ook daadwerkelijk mee verandert als de content aangepast wordt door de klant. En uiteraard is het van belang dat het allemaal vlot en snel blijft werken.

Om - met bovenstaande zaken rekening houdend - de beste oplossing te zoeken voor de koppeling tussen Vue.js en Drupal, zijn er een drietal open-source oplossingen getest. Uit deze drie kwam een project van eigen bodem, genaamd Hyral, als beste uit de test.

Hyral is de taal die elk framework spreekt

Zoals eerder benoemd is Hyral een project van eigen maak. Het project biedt de mogelijkheid om platformen aan elkaar te koppelen, zolang deze platformen een specificatie volgen. Daarbij is Hyral de broker tussen deze platformen, waarbij het een abstractielaag biedt die makkelijk in gebruik is voor beiden de applicatie en developer. Dit wordt ook wel Object Relational Mapping of ORM genoemd. Bij Hyral gaat dit verder omdat het niet data van ‘a’ naar ‘b’ omzet, maar van ‘a’ en ‘b’ naar ‘h’(yral data). Dit is de kern van de Hyral Resource wat het systeem uniek maakt en ervoor zorgt dat elke ‘a’ en ‘b’ uitgewisseld kan worden en toch met elkaar kan communiceren.

Hyral is tevens open-source, waarmee iedereen het dus kan gebruiken en uitbreiden. Om de code beter te kunnen onderhouden is besloten om het geheel te herschrijven in TypeScript voor een versie 2.0. Hiermee is nu de code voor de ontwikkelaar makkelijker in gebruik en onderhoud.

Om als developer de koppeling tussen Drupal en Vue.js sneller en makkelijker te kunnen ontwikkelen zijn implementatie tools toegevoegd aan Hyral.

Tool(s) voor de toekomst

Hyral biedt ons nu de mogelijkheid om mooi gestileerde websites te creëren die compleet dynamisch worden opgebouwd door de klant via een CMS. Wil de klant gepersonaliseerde content? Dat kan! Heeft de klant zelf tools die zij graag toe wil voegen? Geen probleem!

Om het in de toekomst nog gemakkelijker te maken voor software engineers om Hyral te gebruiken met andere platformen, zijn we van plan andere implementatie tools toe te voegen. Zo wordt er al gekeken naar een React.js toolset. Misschien wil jij ons daarbij wel helpen? Neem dan contact met ons op!

Als je nog vragen hebt voor Marco, je kan contact met hem opnemen via marco.vanharten@synetic.nl