intergalactisch

Intergalactisch: van idee naar werkende website in minder dan 8 uur

De eerste versie van deze website lanceerde op zondag 21 februari, en zag er hoogstwaarschijnlijk behoorlijk anders uit dan de versie die je nu voor je ziet. Het platform is namelijk opgezet als MVP, of Minimum Viable Product. Waarom? Omdat een idee pas écht vorm krijgt als ermee gestart wordt, en de focus op het minimale benodigde product ervoor zorgt dat er snel resultaat is. Eric Ries, bekend van zijn Lean Startup methodologie, beschrijft dit ook wel als: "the version of a new product that allows [a team] to collect the maximum amount of validated learning about customers with the least amount of effort".

De basis van Intergalactisch.nl is uiteindelijk binnen 8 uur uitgedacht, ontwikkeld en gelanceerd. In dit geval is gekozen om niet te werken met een bestaand CMS als Wordpress of Drupal, maar betreft het een maatwerk applicatie gebouwd in Laravel (PHP, back-end) en Vue (JS, front-end). Dit brengt voor en nadelen met zich mee, waarvan het grootste nadeel de extra ontwikkeltijd is, en het grootste voordelen de flexibiliteit en veiligheid.

Hieronder vind je een overzicht van hoe de tijd ongeveer is besteed. Let wel op, sommige onderdelen kunnen technisch zijn, maar daarom niet persé minder interessant.

Uitdenken van het concept: 1 a 2 uur

Normaal kost dit veel meer tijd, maar in dit geval was er al een goed idee wat het platform zou moeten gaan zijn, en wat er moest gebeuren om dit te bewerkstelligen. Het zou in dit geval gaan om een online magazine/blog, met een hoofdfocus op snelle, behapbare content. Het belangrijkste is dus om een mogelijkheid te hebben om artikelen aan te maken en te tonen. Een beheer-gedeelte is hierbij in feite optioneel, omdat er altijd nog gewerkt kan worden met 'statische bestanden' in plaats van een database, maar het zorgt er wel voor dat content eenvoudiger en sneller geplaatst en aangepast kan worden. Belangrijk is wel om jezelf continu de vraag te stellen of er bij aanpassingen/toevoegingen waarde gecreëerd wordt. Zo zou het bijvoorbeeld zonde zijn om gelijk al een uitgebreide reactie-module te ontwikkelen, of een mogelijkheid tot polls. In een later stadium kan dit interessant zijn, dus schrijf het wel ergens op, maar het is niet nodig voor de meest minimale versie.

Vragen die je kunt stellen bij een eerste opzet van een dergelijke website zijn:

  • Hoe zit de structuur van de website in elkaar? Denk hierbij aan een url-structuur, maar ook de relaties van verschillende content-types en taxonomieën.

  • Welke technieken gaan gebruikt worden bij de ontwikkeling en ontwerp van de website? Bij een MVP zullen dit frameworks of CMS'en zijn die ervoor zorgen dat er snel ontwikkeld kan worden, zoals Wordpress, Laravel of NextJS. Het voordeel hiervan is dat er veel documentatie en/of bestaande onderdelen voor beschikbaar is.

  • Welke UX, of User Experience, is belangrijk voor de eerste versie? Wat zijn onderdelen die gebruikers-interactie vragen, en in welke mate zijn deze complex?

Al deze onderdelen zorgen uiteindelijk voor het fundament van de website, en ondanks dat deze later aangepast kan worden, is het handig hier zo vroeg mogelijk keuzes in te maken. De eerste uren van de ontwikkeling van Intergalactisch zijn dan ook besteed aan het beantwoorden van deze vragen. De structuur zou bestaan uit posts met categorieën, waarbij de categorienaam in de URL te zien is.

Design: 1 a 2 uur

In het creëren van het perfecte passende design kan veel tijd zitten, en het is ook niet gek dat dit een volledig eigen vakgebied is. Hoe zorg je er namelijk voor dat je website of app een eigen karakter krijgt, en zorgt dat gebruikers niet in de knel raken? In dit geval is voor de MPV gekozen om zo min mogelijk met design te doen. Het is simpelweg nog te vroeg om een passend ontwerp te maken, aangezien het concept nog flink in de kinderschoenen staat. In dit geval is gekozen om gebruik te maken van een CSS framework genaamd Tailwind CSS. Het framework heeft in dit geval meerdere voordelen: 1) er hoeven geen ingewikkelde css compilers ingesteld te worden en 2) het bevat een flinke hoeveelheid logische defaults, die er nog eens goed uitzien ook. Dit zorgde ervoor dat bij de ontwikkeling nog weinig naar écht design gekeken hoefde te worden.

Ontwikkeling: 4 uur

Zoals aangegeven is het platform voor nu gebouwd in Laravel, in combinatie met VueJS en InertiaJS. Laravel biedt hier een boilerplate voor aan genaamd Laravel Jetstream, wat een mooie basis-implementatie is voor een Laravel back-end een een Vue front-end. Bij het ontwikkelen van het platform is gewerkt met een TDD-mentaliteit, oftewel Test Driven Development. Dit betekent dat alle onderdelen van de website gebouwd worden aan de hand van tests (unit en feature), zodat je altijd weet dat het technische stuk werkt. Voor het Vue gedeelte is gekozen om zelf een basis-set van componenten te maken, bijv. voor knoppen, titels en links. Dit dan in combinatie met Tailwind CSS, zodat alles lekker herbruikbaar is. Voor de MVP hoeven niet veel "schermen" ontwikkeld te worden, en volstaan enkel de homepage, archiefpagina's en posts. Dit zorgde ervoor dat de volledige ontwikkeling van de website niet lang hoefde te duren.

Lancering: 30 minuten

De website staat nu lokaal klaar, en hoeft "alleen" nog op het internet gezet te worden. In dit geval wordt gebruikt gemaakt van de mooie tool Ploi, die het super eenvoudig maakt om je website vanuit een Github-repository op een volledig ingerichte server te krijgen. Klik, installeer, deploy en klaar! Integalactisch staat op Intergalactisch.nl.

En zo is iets dat maandenlang enkel een idee is, binnen 8 uur gelanceerd. Hartstikke leuk!