Headless CMS, Vue, Nuxt, Azure... technische uitdagingen!

13 september 2018leestijd 5 minutendoor Ruben

De kop is eraf! Want onze nieuwe website is online en zit boordevol nieuwe technieken om op door te ontwikkelen. Dat de kop eraf is, geldt ook voor het content management systeem achter deze website: Kentico Cloud, een zogenaamd ‘Headless CMS’. Het betekende een andere werkwijze in website ontwikkelen én content ontwikkelen. Hoe dan? In dit artikel deel 1 van deze andere werkwijze: ik deel mijn ervaringen over het ontwikkelen van de website met een combinatie van nieuwe technieken. Binnenkort deelt Monique deel 2 over content!

Wat is Headless CMS?

De content die je plaatst via een Headless CMS, in dit geval Kentico Cloud, kan in verschillende toepassingen worden geïntegreerd, ongeacht welke technologie er wordt gebruikt. Zo kan de content van dit blog niet alleen via deze website gepubliceerd worden, maar bijvoorbeeld ook in een mobiele app. 

Bij klassieke CMS’en zoals Kentico CMS, Frontis CMS of WordPress zijn content, interface en interaction design allemaal vertegenwoordigd. Een Headless CMS bevat alleen de content en maakt deze via een API beschikbaar voor andere toepassingen. Het maakt geen gebruik van een presentatielaag zoals templates of webpagina’s. Je beheert er eigenlijk alleen de content en de presentatie wordt op een andere manier geregeld (in dit geval via Vue templates die ons designteam heeft gemaakt), maar ziet er altijd goed uit. 

Wanneer kies je voor een Headless CMS?

Tijdens de ontwikkeling van de Frontis website ontdekten we de verschillende voordelen van een Headless CMS:

  • Je kunt content centraal beheren en op verschillende kanalen publiceren (omnichannel). Het CMS is als het ware een content magazijn.
  • Developers en contentbeheerders zijn flexibeler omdat ze niet ‘vastzitten’ aan een presentatielaag.
  • Ontwikkelaars hoeven bij de komst van innovatie veel minder aanpassingen te doen aan de back-end dan nu vaak het geval is.
  • Headless CMS kijkt niet naar hoe content wordt gebruikt, maar zorgt ervoor dat het op al die plekken is waar het nodig is wordt geplaatst (ook wel ‘Content as a Service’ genoemd)
  • Je kunt zelf ‘microservices’ kiezen die goed zijn in specifieke functionaliteiten, denk aan formulieren en marketing automation. 
  • Eenvoudig op te bouwen
  • Een site in Kentico Cloud betekende ook dat we cloudhosting via Microsoft Azure direct konden testen. Werkt mooi!

En uiteindelijk zijn we straks minder tijd kwijt aan het bijhouden en updaten van het CMS zelf. 

Kentico Cloud is zelf ook nog in ontwikkeling, ik had dan ook nauw contact met Kentico developers die goede ondersteuning boden bij zaken die nog misten of waar wij niet direct uitkwamen. Inmiddels zijn we zelf goed vertegenwoordigd in de Kentico Cloud community en denken we actief mee om het platform naar een hoger level te brengen. Doordat we nu met onze eigen website het Headless CMS gebruiken, kunnen we de ontwikkelingen nog beter volgen.

Nog meer technieken: Vue & Nuxt

Het is niet alleen bij een Headless CMS gebleven, we hebben flink uitgepakt met de nieuwe site qua techniek! Maak kennis met Vue.js en Nuxt.js. 

Vue.js

Vue (je spreekt het uit als vju/view), is een JavaScript framework dat ervoor zorgt dat je website inhoud eenvoudig op een dynamische manier kunt tonen. Vue.js is dan ook superhandig als je een Single Page Application (SPA) ontwikkelt, zoals de Frontis site. Hierbij worden bepaalde componenten of functionaliteiten van een pagina herladen en weergegeven in plaats van de volledige pagina. Bovendien is dit JavaScript framework ontzettend klein en kunnen pagina’s vrijwel meteen geladen worden. Hierdoor reageert de site razendsnel!

Wat ik als developer echt top vind aan Vue.js is dat JavaScript, HTML en CSS in één component verpakt zitten. Ook wordt de code in een bepaalde volgorde geschreven, waardoor je minder kans hebt op ‘vervuilde code’. Zo kun je ook eventuele fouten sneller opsporen en kun je makkelijker samenwerken in dezelfde code. 

Ook handig, dit JavaScript framework heeft componenten voor alles en je kunt ze gemakkelijk opnieuw gebruiken voor andere projecten (klein en groot, nieuw en bestaand). Via packages biedt Vue.js ook geavanceerde features die nodig kunnen zijn voor grotere, complexe applicaties.

Je leest het, ik ben te spreken over Vue en heb er bij de ontwikkeling van de Frontis website snel mee leren werken. Top dus! Maar dat is nog niet alles...

Nuxt.js

Nuxt.js is een framework dat bovenop Vue.js gebouwd is. Nuxt.js neemt de client/server distributie weg en zorgt voor de gehele UI-rendering van het project. Dat wil zeggen dat Nuxt.js bij het laden van de pagina ook daadwerkelijk de HTML opbouwt. Hierdoor kunnen zoekmachines op correcte wijze pagina’s indexeren. Normaal gesproken is JavaScript-code niet ‘zoekmachinevriendelijk’, Nuxt.js is dat dus juist wel. 

Omdat het grootste deel van wat Nuxt doet, tijdens de ontwikkelfase gebeurt, krijg je veel functies met slechts een paar extra kilobytes toegevoegd aan je JavaScript-bestanden. Dat betekent opnieuw: snel! 

Net zoals bij Kentico Cloud had ik bij Nuxt ook contact met iemand die met mij meekeek en handige tips gaf.

Livegang!

De website was zo goed als af en de streefdatum voor livegang stond gepland: donderdag 6 september. In de week voorafgaand aan livegang is de website nog een keer uitgebreid getest door het team en andere collega’s. Hier en daar werd er nog wat gefinetuned qua techniek en op de dag van livegang hadden we nog wat problemen met de microservice die we voor formulieren hebben gekozen. Deze werkte niet optimaal op de productieomgeving… Aan het eind van de middag was dit gefixt en stond de website (stiekem) goed en wel live. 

Laag op de Backlog stond nog het puntje ‘Internet Explorer 11’. Onze website functioneert niet goed in IE11 omdat de nieuwste technieken gebruikt worden en deze browser niet helemaal bij is (en zelfs uitgefaseerd wordt). Gaan we live, of kijken we nog naar een oplossing? Voor de beeldvorming: de afgelopen maanden gebruikte 6,7% van alle bezoekers deze browser om onze website te bezoeken. Dus werd het een compromis: we proberen het nog te fixen en zo niet, dan publiceren we het bericht op social media. 

Op dit moment staat er een ‘gehavende’ versie van de website in Internet Explorer, die een handjevol mensen heeft gezien. Daar wordt nog aan gewerkt!

Conclusie

Het was al met al een leerzaam traject waarin we tegen van alles aan zijn gelopen, maar het mooie is: voor alles is een oplossing! Fantastisch om deze nieuwe technieken te kunnen ‘testen’ in een echt project en dat specialisten van Kentico Cloud en Nuxt bereikbaar zijn om tips te geven. Ondertussen staan er op de backlog alweer nieuwe wensen voor de website, die we de komende periode gaan realiseren.

RubenDeveloper
Dit soort updates, nieuws, kennis & innovaties automatisch in je mailbox?

Hoi, ik ben
en ik ontvang jullie nieuwsbrief met updates graag op