Als je zelf continu de performance en security van online platformen en toepassingen test, ben je natuurlijk extra kritisch als het om je eigen website gaat. In dit artikel kun je lezen waarom we voor Wagtail hebben gekozen, welke uitdagingen we tegenkwamen en hoe we deze hebben opgelost. We behandelen onder andere:
- Outsourcing vs. interne ontwikkeling
- Welke eisen we aan de techniek stellen die we willen gebruiken
- Hoe we moeten omgaan met het aanmaken van nieuwe pagina’s op de site
Eisenlijst voor de nieuwe website
Toen we besloten dat Computest een nieuwe site nodig had, gingen we dan ook niet over één nacht ijs. Na uitgebreid onderzoek kozen we niet voor het inkopen van een kant-en-klare oplossing. We willen namelijk zoveel mogelijk in eigen beheer houden. We hebben besloten om het ontwerp van de nieuwe site uit te besteden. De back-end ontwikkelen we wel zelf.
Waar begin je als je moet kiezen waarmee je een nieuwe website bouwt? Een goed begin is om een lijst te maken over welke functionaliteiten de website moet bieden maar ook waar je zelf goed in bent. Ons lijstje zag er ongeveer zo uit:
- Marketing moet de teksten van de website kunnen onderhouden en zelf een redelijke opmaak maken voor de pagina’s.
- De website moet zowel Nederlands als Engels ondersteunen.
- Er moet goede documentatie van achterliggende systeem beschikbaar zijn.
- Achterliggend systeem moet veilig zijn.
- Achterliggend systeem moet geschikt zijn om diepgaand gewijzigd te kunnen worden.
- Achterliggend systeem moet gekoppeld kunnen worden met externe administratie tooling.
- Omdat we dagelijks Python programmeren, heeft een back-end in deze taal onze voorkeur.
- Omdat we ervaring hebben met het Python framework Django, zou het fijn zijn als we die ervaring kunnen gebruiken.
Op basis van dit lijstje, hebben wij gekozen voor Wagtail als back-end. Wagtail is een open source Django framework geschreven in Python. Dit geeft veel mogelijkheden, we kwamen ook de nodige uitdagingen tegen.
Wat is Wagtail?
Wagtail is een ‘CMS’ laag bovenop Django. Out-of-the-box biedt Wagtail basiscomponenten aan voor websites zoals een gebruiksvriendelijke admin interface, standaard pagina’s, content management en user management. Daarnaast kun je ook gewoon nog alle standaard componenten van Django gebruiken.
Hier rechtsboven zie je de admin interface van Wagtail. Als je de Django admin interface hieronder bekijkt dan zie je al snel dat Wagtail gebruiksvriendelijker is.
Ik heb ‘CMS’ tussen aanhalingstekens gezet omdat Wagtail eigenlijk meer een framework is, met de functionaliteit om er een CMS van te maken. Het verschil tussen een CMS en een framework wordt hier mooi uitgelegd.
Eis 1: Ondersteuning voor meerdere talen
Met Wagtail is er de mogelijkheid om de website in meerdere talen aan te bieden; in ons geval een Nederlandse en een Engelse. Je kunt in de back-end twee verschillende boomstructuren opzetten waarbij elke pagina zijn eigen url heeft gebaseerd op de taal (boomstructuur) van de website. Daarnaast heeft Wagtail een hele grote en actieve community. Voor een open source project draagt dit ook bij aan een veiliger product. Een grote community betekent dat er meer bug fixes beschikbaar zijn en het product actief wordt doorontwikkeld. Dit draagt bij aan de betrouwbaarheid en stabiliteit van de software.
Eis 2: Security
Omdat we zelf een security bedrijf zijn hebben we ons focus gelegd op het secure software development proces van de website. We vinden het erg belangrijk dat onze eigen producten en software veilig en betrouwbaar zijn. Zodoende hebben we Django intern laten auditen door een van onze code auditors. Daarnaast hebben we de website laten testen op kwetsbaarheden door een van onze hackers. Indien je zelf opzoek bent naar een training voor secure software development dan kun je je hier aanmelden.
Eis 3: Code in eigen beheer
Out-of-the-box biedt Wagtail zaken aan voor websites zoals bijvoorbeeld een gebruiksvriendelijke admin interface, standaard pagina’s, content management en user management. Aangezien we de code in eigen beheer hebben kunnen we heel wat werk automatiseren voor onze marketingafdeling. Aangezien zij heel veel content toevoegen in de website moet het net zo makkelijk zijn om een event of training pagina aan te maken alsook een nieuwsitem of blog.
Custom blokken in Wagtail
Om een nieuwe pagina te bouwen heeft Wagtail een aantal standaard componenten. Die componenten noemen we blokken. Het is ook mogelijk om zelf custom blokken te programmeren. Hierbij geef je zelf op uit welke velden een blok moet bestaan. Deze velden kun je vervolgens aanpassen als je het blok toevoegt aan een pagina.
Zo hebben we op onze website o.a. een blok gemaakt waarmee we contactgegevens kunnen toevoegen aan een pagina door simpelweg een contactpersoon te kiezen en een blok waardoor je gemakkelijk een gekleurde balk met slogan (een header-blok) kan toevoegen aan een pagina. Hieronder kun je een voorbeeld zien van een header-blok.
Om de tekst aan te passen kunnen we in het admin menu van Wagtail de volgende velden aanpassen:
Marketing kan met behulp van onze custom blokken nu zelf een pagina ‘in elkaar klikken’ en bepalen wat er in de blokken komt te staan.
Custom logic in dynamische pagina’s
Een ander voorbeeld van code in eigen beheer is te vinden op onze smoelenboek. Op de oude website van Computest was het smoelenboek statisch. Elke nieuwe collega kwam daar automatisch onderaan de pagina. Een eis was dat onze nieuwe smoelenboek elke week willekeurig gesorteerd moet zijn, maar er wel afbeeldingen gegroepeerd kunnen worden. De gegroepeerde foto’s moeten dan naast elkaar getoond worden.
Dit is nu het geval en daarbij wordt onze smoelenboek per week weer random geordend. Hieronder kun je een aantal gegroepeerde foto’s zien in onze smoelenboek:
Het belang van testen van je nieuwe website
Wagtail heeft ook een aantal (functionele) bugs. Zo kwamen we er bij het testen de dag voor release van de site achter dat dat het verwijderen van een pagina tot problemen kon leiden. We konden geen Nederlandstalige pagina’s meer zien en het leek alsof al ons werk voor niets was geweest. Geen fijne ontdekking de dag voordat je nieuwe website live gaat. Dit toont nog maar eens aan hoe belangrijk testen is.
Het probleem was dat Wagtail niet alleen alle onderliggende pagina’s van de te verwijderen pagina wiste, maar ook alle bovenliggende pagina’s onzichtbaar maakte. De bovenliggende pagina’s waren dus niet verwijderd, ze waren alleen niet zichtbaar. Omdat we geen tijd hadden om dit op te lossen, hebben we uiteindelijk een database backup van de dag ervoor teruggezet.
Bug in Wagtail - wat nu?
Na onderzoek ontdekten we dat een bug in Wagtail verantwoordelijk was voor het probleem.
De afbeelding hieronder laat zien dat we /software-tester/ willen verwijderen uit de boomstructuur van de website:
De bug in Wagtail zorgt ervoor dat niet alleen de verwijderde pagina’s maar ook de bovenliggende pagina’s worden verwijderd uit de database tabel die zorgt voor de boekhouding in Wagtail. Ze bestaan dus nog wel alleen Wagtail weet niet meer hoe ze aangeroepen moeten worden:
Hier worden alle pagina’s die uit de database tabel voor boekhouding verwijderd zijn getoond met een lichtgrijze tekstkleur. Dit hoort niet te gebeuren als er een pagina wordt verwijderd. Tenslotte wil je alleen maar die pagina verwijderen en niet alle pagina’s.
Maar wat doe je als je een bug bent tegen gekomen in een open source project? Die ga je uiteraard melden. We hebben op de Github Issues pagina van Wagtail eerst gezocht of deze bug al gemeld was, en dit bleek het geval. Op het moment van schrijven is de bug nog niet opgelost. Er bestaat echter wel een workaround.
Conclusie: waarom zou je voor Wagtail kiezen?
Websites worden vaak gebouwd op basis van bestaande funderingen of bouwstenen. De keuze voor fundering is per project verschillend. Wij raden Wagtail aan als:
- Je website meerdere talen moet ondersteunen
- Je website er niet uit moet zien als 1 uit een dozijn
- Je zelf in staat bent custom blokken te programmeren (Python, HTML, CSS)
- Je veel verschillende type pagina’s hebt (artikel, product, training, events)
- Je componenten op meerdere type pagina’s wilt kunnen hergebruiken.
Zoals je leest hebben we redelijk veel zaken zelf moeten ontdekken en oplossen. We zijn trots op het resultaat en werken uiteraard continu verder aan het optimaliseren van de site. Wil jij meer weten over het bouwen van een site met Django en Wagtail? Neem dan gerust contact met me op!
Geschreven door: Igor van Spengen