Wat is een framework eigenlijk?

Als we op Wikipedia kijken dan zien we de volgende definitie:

'Framework is een begrip uit de informatica. Het framework bepaalt welke software er wordt gebruikt en op welke manier.'

Hierbij kunnen we er vanuit gaan dat bij een framework al wordt nagedacht over veel voorkomende problemen en vooral hoe deze op te lossen zijn. Het framework ondersteunt je vervolgens bij het bouwen van een applicatie. En het geeft ons tijdens het ontwikkelen van onze webapplicaties de mogelijkheid om na te denken over de uitdaging die onze opdrachtgevers op tafel leggen.

De route naar een nieuw framework

Zo'n drie jaar geleden merkten we dat ons oude framework (AngularJS) niet meer aan onze verwachting voldeed. We zagen dat er frameworks verder waren en ons meer konden ondersteunen bij de ontwikkeling van webapplicaties. We besloten om te gaan onderzoeken welk framework ons het beste zou ondersteunen tijdens de ontwikkeling van webapplicaties.

Van verwachtingen naar een eerste concept

Voorafgaand aan ons onderzoek hebben we een (korte) lijst gemaakt met items (niet op volgorde van importantie) waaraan het nieuwe framework moest voldoen. Het framework moest:

  1. ... passen bij het het concept van AngularJS, en niet leiden tot een (te) grote verandering binnen onze werkwijze
  2. ... schaalbaar zijn (lees: schaalbaar van een kleine tot grote webapplicaties)
  3. ... een actieve community hebben
  4. ... goede documentatie hebben
  5. ... ook toegepast worden in oude applicaties
  6. ... ondersteunend zijn tijdens ontwikkeling


Bij ons onderzoek hebben wij (onder andere) gekeken naar de grotere frameworks op dat moment, zoals React en Angular 2. Van een aantal frameworks hebben wij vervolgens een kleine Proof of Concept gemaakt.

'Een Proof of Concept (PoC) is een methode om te demonstreren of bijvoorbeeld een idee, technologie of functionaliteit haalbaar is en aansluit bij de belevingswereld van de beoogde gebruikers.'

We kozen voor een simpele webshop omgeving, waarin gebruikers producten aan een winkelmandje konden toevoegen. Ondanks de gebruikersomvang van React en Angular is Vue een framework dat beter bij deze verwachting aansloot. Hierbij viel het ons op hoe snel we Vue begrepen en de snelheid waarmee we het Proof of Concept neer konden zetten.

Vue: schaalbaar framework met unieke tooling

Na de keuze voor Vue was er een struikelblok waar we als bedrijf tegen aanliepen: de naam Vue. Hoe spreek je Vue uit? Gelukkig biedt zoals heel vaak de uitgebreide Vue documentatie daar een uitkomst in.

'Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.'

Tijdens het ontwikkelen van een webapplicatie biedt Vue een tool die wij nog niet eerder gebruikten: de vue-devtools. Met deze tool kunnen we volgen wat de stappen zijn die leiden tot een bepaalde uitkomst. Mocht deze uitkomst niet met onze verwachting overeenkomen, dan onderzoeken we de stappen via een 'tijdlijn van acties' om te achterhalen welke stap heeft geleid tot de onverwachte uitkomst.


Bovenstaande afbeelding illustreert elke gebruikersactie die wordt gedaan om een TODO item toe te voegen aan zijn TODO-lijst. Mocht een item bijvoorbeeld niet op deze lijst verschijnen dan kunnen wij als ontwikkelaars in deze tijdlijn alle acties zien die een gebruiker heeft gedaan, om zodoende het probleem te achterhalen.

Naast een actieve community en uitgebreide documentatie met interactieve voorbeelden sprak ons vooral de schaalbare en modulaire opbouw ons aan. Met verschillende componenten (als het ware lego blokken) is het mogelijk om de applicatie aan te passen aan de wensen van de opdrachtgever.

Een combinatie van de beste frameworks?

Sinds de introductie van Vue hebben we een aantal (grote tot kleine) applicaties ontwikkeld met Vue. Hierbij hebben we veel kennis opgedaan over het framework. Onze conclusie is dat Vue de beste kanten van React en Angular combineert, plus een (groot) aantal ideeën die ze daaraan zelf hebben toegevoegd. De introductie van Vue heeft geleid tot nieuwe inzichten en verdere verhoging van borging van kwaliteit. Dit doen we onder andere door middel van het testen van de applicatie. Hierover vertellen we in de toekomst meer. 

The Holy Grale?

Is Vue onze 'holy grale' voor iedere applicatie? Zeker niet! Wellicht krijgen we een nieuwe uitdaging, waarbij we beter kunnen kiezen voor een ander framework. Deze keuze bekijken wij altijd per opdracht. Ons uitgangspunt is echter altijd dat we snel aan onze opdrachtgevers visualiseren waaraan wij denken. Hierbij ondersteunt Vue ons. Op basis van onze eerder genoemde verwachtingen en werkwijze past Vue op dit moment bij ons, maar we houden onze ogen en oren altijd open voor nieuwe ontwikkelingen!

• • •

Mijn naam is Sybren Dotinga en ik ben als Senior Frontend Developer bij JDI smart web applications werkzaam. Met veel plezier houd ik mij bezig met de kwaliteit en verdere ontwikkelingen op het gebied van frontend development.