Bouw razendsnelle headless platforms met Nuxt

Als je aan de Digital Natives developers vraagt welke ontwikkeling hun werk de afgelopen drie jaar aanzienlijk gemakkelijker heeft gemaakt, beginnen ze waarschijnlijk te glunderen voordat ze enthousiast iets roepen over headless CMS’en of Nuxt.

Wat is headless?

Over de (terechte) headless-hype hebben we al veel geschreven, maar voor de nieuwkomer allereerst even snel de feiten op een rij:

Altijd hetzelfde front-end-systeem, onafhankelijk van CMS

Vroeger betekende de keuze voor WordPress, CraftCMS, Drupal of een Laravel-CMS automatisch dat je qua front-end-sjablonen gebonden was aan de werkwijze die het CMS dicteerde. Bouwde je een Laravel-platform? Dan moest je aan de slag met de zogenaamde Blade-syntax. CraftCMS of Drupal? Dan kon je van je vorige Blade-project zo ongeveer niks gebruiken, want je moest aan de slag met Twig. En WordPress? Laten we het daar maar niet over hebben.

Door het CMS – de backend – los te trekken van de voorkant die je platformbezoekers te zien krijgen, kun je altijd dezelfde front-end-structuur gebruiken en ben je flexibel in welke backend je daar aan koppelt. Headless dus: je scheidt de backend van de presentatie – het lichaam van het hoofd. Luguber, maar wel handig.

Meer snelheid

Nu we niet meer volledig afhankelijk zijn van de mogelijkheden van WordPress, CraftCMS, Drupal of Laravel, zijn we ook niet meer volledig afhankelijk van de snelheid van die systemen. We maken de rol van deze CMS’en zo klein mogelijk, en pakken zoveel mogelijk op met een losstaande, gestroomlijnde front-end. Dit maakt onze nieuwste platforms ontzettend veel sneller.

Progressive Web Apps en andere innovatieve technologie

Doordat we tegenwoordig onze eigen front-end tools kiezen, kunnen we daarin verder gaan dan de mogelijkheden die CMS’en ons bieden. Zo kunnen we platforms nu als progressive web apps bouwen, die meer als vloeiende apps aanvoelen dan als websites met verschillende pagina’s.

Herbruikbare elementen

Als je de ene keer een project volledig in CraftCMS doet, en de andere keer in Laravel, kun je tussen die projecten maar weinig componenten opnieuw gebruiken. Dat mooie loginformulier waar alle features in zitten die je je maar kon bedenken? Compleet nutteloos in een ander systeem. Maar nu we altijd dezelfde front-end-architectuur gebruiken, is dat probleem er niet meer en zijn we een heel eind op weg met het creëren van een complete toolkit voor onze platforms for change. Ons favoriete JavaScript-framework hiervoor is Vue.js, een laagdrempelig systeem waarmee je je code opbreekt in verschillende componenten.

Maar wat zijn de nadelen dan?

Dit klinkt allemaal te mooi om waar te zijn. Dat was het tot voor kort ook, want het werken met innovatieve front-end-architectuur met veel JavaScript betekende vaak dat zoekmachines als Google moeilijker door je code konden ploegen. Korter gezegd: een JavaScript-site was killing voor je SEO. Daarom gebruikten we deze oplossing alleen maar voor gesloten platforms als Kijkwijzer, de Fair Wear Member Hub en LawyerlinQ, die alleen beschikbaar waren voor leden met een login-account. Op die platforms had Google toch niets te zoeken. Maar wat moesten we met al die mooie publieke platforms die we graag aan zoveel mogelijk mensen wilden laten zien?

Enter Nuxt

JavaScript is de go-to-programmeertaal voor innovatieve webapplicaties, maar helaas een taal die lange tijd alleen door webbrowsers begrepen werd en niet door servers. Dit maakte het extra moeilijk voor zoekmachines als Google om JavaScript te kunnen ‘lezen’; zij waren immers HTML gewend. Dankzij NodeJS en server side rendering is hier veel in verbeterd: tegenwoordig kunnen servers je JavaScript-applicatie omvormen tot HTML waar iedere zoekmachine zonder problemen doorheen kan. Om je applicatie zo makkelijk mogelijk converteerbaar te maken, moet je je als developer echter aan strikte regels houden. Voor ons favoriete JavaScript-framework Vue.JS helpt de nieuwe schil Nuxt daar enorm bij. Nuxt biedt ons:

• Een strikte structuur voor het opdelen van je code in componenten en pagina’s
• Duidelijk gedocumenteerde code
• Een actieve gemeenschap die bijdraagt aan het framework
• Gemakkelijke SEO meta-tags en soepele pagina-overgangen
• En natuurlijk het met NodeJS server side renderen van onze code naar leesbare HTML

Dankzij Nuxt kunnen we in elke situatie de vloeiende, razendsnelle headless applicaties opleveren die we tot voor kort alleen bij gesloten platformen konden realiseren. En dat is best een big deal. Dus nu weet je waarom we zo glunderen wanneer het over dit onderwerp gaat.

Wil je meer weten over Nuxt? Natives’ front-end developer Lars publiceerde een technische long read over onze ervaringen bij de eerste implementaties (Engels).