Livegang van LC.nl in tijden van quarantaine

Sinds de recente overnamegolf in kranten- en medialand is NDC mediagroep nog één van de laatst overgebleven uitgeverijen in Nederlandse handen. Je zou de vergelijking kunnen trekken met de strip Asterix. De strip start steevast dat de Romeinen (in dit geval Belgen) het hele land hebben overgenomen, afgezien van een stipje in het Noorden.

In dat stipje wonen overigens — in tegenstelling tot het dorpje in de strip — 2 miljoen Noorderlingen, die het bedrijf van nieuws voorziet met dagbladen: Leeuwarder Courant, Dagblad van het Noorden en Friesch Dagblad.

De afgelopen maanden heb ik een team heb mogen samenstellen om de nieuwe websites te lanceren van de Leeuwarder Courant en — straks — ook Dagblad van het Noorden.

Waarom nieuwe websites?

Om te kunnen slagen in het succesvol bouwen van een gezond business model rond (lokaal) online nieuws zul je snel moeten experimenteren. Je moet uitvinden waar mensen voor gaan betalen en wat de randvoorwaardelijkheden zijn om mensen over de streep te trekken een online abonnement af te sluiten.

De afgelopen jaren deden we dit met een extern bureau dat zich uitermate inspande om alle — snelle — ontwikkelingen bij te houden maar tegelijkertijd ook de zware taak had om alle redactiesystemen waar honderden redacteuren in werken in de lucht te houden.

Om sneller te kunnen experimentern met nieuwe verdienmodellen, of dat nu een betaalmuur- of online advertising is- hebben we er voor gekozen meer in-house te gaan doen. De samenkomst met het verschijnen van uitstekende API’s van de leverancier was een belangrijke randvoorwaarde om dit ook daadwerkelijk te kunnen.

In deze blogpost vertel ik iets meer over de achterliggende techniek, en hoe we tot deze keuzes zijn gekomen en ik wil even kort stil staan hoe we een flink online platform hebben gelanceerd tijdens de Corona crisis.

De voorbereiding

Al aan het einde van 2018 zijn we met een multidisciplinair team gestart met schetsen voor een aantal oplossingen voor een visie-document dat al was geschreven door Floor Schouwman en een heldere kijk gaf op een aantal peilers.

Aan de hand van deze visie en strategie zijn we gaan kijken hoe we deze zaken tot leven konden brengen met rapid prototyping in de vorm van UX design. Na een aantal maanden — en interne feedbackrondes — was deze klaar en konden we aan de gang met het vinden van een goed designbureau. Dat vonden we in de vorm van Resoluut, dat het oorspronkelijke plan heeft doorvertaald naar een stijl die vanaf de start door iedereen mooi werd gevonden en ook praktisch genoeg was om zowel LC.nl als DVHN.nl tegelijkertijd te vernieuwen.

Op dat punt in tijd zijn we gaan nadenken over het daadwerkelijk maakproces. Duidelijk was dat we deze websites helemaal zelf gingen bouwen en dat we hiervoor API’s in de vorm van microservices opgeleverd zouden krijgen. Nu hadden we dus twee lijnen (en wordt het meteen een stukje technischer).

Front-end

Na initieel overleg met Nick die als freelancer voor een ander project was ingevlogen kozen we voor Nuxt.js, een Vue framework dat ook server side rendering ondersteunt: een techniek die we tot de dag van vandaag intensief gebruiken.

Voor de frontend templates gebruiken we Bulma, de flexbox grid is simpel en eenvoudig leesbaar.

Het initiële plan was om het design van Resoluut zo nauwkeurig mogelijk om te zetten naar een UI component library. We kozen hier voor om met Storybook aan de slag te gaan, maar we hebben dit nooit helemaal doorgezet, een keuze waar ik nu wat spijt van heb, zeker nu de hoeveelheid design groeit.

Omdat ik zelf een groot fan was van testen in semi-publiek domein hebben we er tijdig voor gekozen om de nieuwe sites te tonen op vernieuwd.dvhn.nl en vernieuwd.lc.nl en hier geen ingewikkelde wachtwoorden voor te zetten.

Backend

Inmiddels was er een team van 3 developers aan de slag gegaan met de bouw van een microservice om de — door de leverancier aangeleverde CMS stack — om te bouwen tot een microservice. De naam hiervoor werd Librarian.

Het stelt de frontenters in staat om met behulp van GraphQL eenvoudige queries uit te voeren, waar we in de frontend de componenten mee voeden. De sectie ‘net-binnen’ wordt bijvoorbeeld zo opgehaald:

query {
   getSection(source: DVHN, url: "/net-binnen/") {
      articles{
       title
       url
      } 
   }
}

Deze geeft een keurig geparsde json met alle artikelen in deze sectie, inclusief de titel en URL. Hierdoor blijft alles behoorlijk overzichtelijk.

Het idee hierachter is om een eenvoudigere interface te hebben waar ook externe developers eenvoudig nieuwe toepassingen kunnen bouwen voor de ongeveer 51 titels die NDC nu in huis heeft: we halen complexiteit weg uit onze achterliggende systemen zodat er ruimte is voor het eenvoudig koppelen van vorm (frontend) aan achterkant (API’s).

De microservice is gebouwd in Golang en heeft uiteraard unit-tests om maximale test coverage te hebben en aan te sluiten op de diverse producten die nu gebruik maken van deze services.

Hosting

Voor zowel de front- als backend hebben we gekozen voor Google Cloud. Dit is een oplossing die fysiek bij ons in de buurt is (Eemshaven).

Statistieken & data

We hebben gekozen voor een Kubernetes cluster en Google’s Istio als service-mesh. We gebruiken Prometheus als logging tool: deze lezen we uit via Grafana. Dat ziet er in de praktijk ongeveer zo uit:

Kortom: lekker veel grafieken om vrij fijnmazig de staat van alle applicaties in de gaten te houden.

Al deze software komt natuurlijk op één plek samen: het redactie CMS waar alle redacteuren in werken om zowel krant- als website mee te vullen. Hier bleek in november nog een essentieel koppeling te missen, en deze hebben we uiteindelijk in goed overleg ook op productie weten te krijgen.

Half februari leek alles gereed voor livegang en zijn we stapsgewijs met eerst 5% en later 20% van het totale verkeer gaan testen. Via Convert hebben we een gebruikersgroep samengesteld van mensen die vanaf dat moment de nieuwe website kregen te zien. Hierop zijn we nauwkeurig gaan monitoren aan de hand van ons dataplatform hoe deze gebruikers zich over de nieuwe site gedroegen.

De nieuwe site heeft een flink aantal learnings meegenomen die we door middel van CRO experimenten op de oude al hadden getest, zoals een goede recommender die artikelen aanraadt op basis van je eigen gedrag, en op basis van gedrag van anderen die op jou lijken. Er zijn inmiddels ook twee data-scientists bezig om deze zaken nog verder te fine-tunen: best heel cool en helemaal 2020 ;-)

Na wat gebruikelijke koudwatervrees was het op 6 april de tijd voor de Leeuwarder Courant om een geheel nieuw jasje te krijgen. Je kunt deze bewonderen op LC.nl.

Een extra speciale livegang waar ik me op had voorbereid door maanden geleden — iets te optimistisch — bij de IKEA om de hoek champagneglazen en gebaksbordjes te kopen. Die bleven helaas in de keuken op kantoor staan: tevreden keken wij als development team naar statistiekjes, en patchen nog snel wat code. Vanuit onze studeer- slaap- en woonkamers keken we hoe de eerste bezoekers live het platform op kwamen. Geen oooohhhss en aaaahhhs. Geen rode knop: gewoon een kort middagmomentje op Google Hangouts om te vieren dat het allemaal zonder al te veel stress gelukt was.

Met deze livegang heb ik het idee dat NDC een stuk beter gepositioneerd is richting de toekomst: minder afhankelijk van externe bureaus: met een eigen ontwikkelteam en eigen-gemaakte techniek in huis kunnen we nu steeds sneller experimenten doen om te overleven. Want — zoals ik hierboven al zei — online nieuws is nog steeds een ingewikkelde business. Daarbij hebben we nu een uitstekende technologie staan om ook te gebruiken voor alle andere 40 titels (kranten- en niet kranten) die we in het portfolio hebben.

Daarbij denk ik ook dat we NDC nu nadrukkelijker gepositioneerd hebben als digitale club, waar je met hele toffe nieuwe technologie aan de slag kunt.

Dan nog even over de Corona crisis. Deze hield ons dus thuis tijdens de livegang, maar zorgde ook meteen voor een extra dimensie op stategisch vlak. Het vertrekpunt van NDC is dat journalistiek niet gratis is maar dat speciale omstandigheden ook speciale maatregelen nodig hebben. Daarom kun je minimaal tot begin juni een gratis digitaal abonnement afsluiten op LC.nl waarmee je alle premium content gratis kunt lezen. Meer dan 30.000 mensen hebben dit inmiddels gedaan.

Voor de nieuwe sites hebben we nog genoeg te doen, maar ik ben trots op wat we tot nu toe bereikt hebben met het hele digitale team.