---
title: Het nieuwe Funda | Webdevelopment door De Voorhoede
description: >-
  Onze front-end guide zorgt voor een uniforme workflow voor de grootste,
  responsive'ste en modulairste huizenaanbod site van Nederland. Bekijk de case.
language: Dutch
url: 'https://voorhoe.de/nl/cases/het-nieuwe-funda/'
---

Case study

# Het nieuwe Funda

## Case summary

### Expertise

Development

### Platforms

Nunjucks and Unit testing

### Deliverables

Website and Front-end guide

### Bekijk resultaat

[www.funda.nl »](https://www.funda.nl/)

## Een uniforme website gemaakt door verschillende teams

### De uitdaging: een uniforme website gemaakt door verschillende teams

Funda stak recent haar website in een nieuw jasje. Met bijna 30 miljoen bezoeken en 390 miljoen bekeken pagina's per maand is Funda een van de meest bezochte websites in Nederland. De Voorhoede bouwde een volledig responsive front-end.

![Show case of funda.nl on different devices](https://www.datocms-assets.com/2651/1501076787-funda-devices.jpg)

Show case of funda.nl on different devices

### Wat is dan belangrijk?

#### Transparantie

Als op elk moment helder is welk team waaraan werkt, hoef je nooit dubbel werk te doen. Je krijgt de kans om elkaar te helpen en kan elkaars werk evalueren en verbeteren.

#### Communicatie

Alle developers gebruiken dezelfde woorden voor de verschillende website-onderdelen. Designers, back-end developers en andere disciplines in het team begrijpen en gebruiken deze terminologie ook. Code-conventies — lees: afspraken over hoe je je code schrijft — horen hier ook bij.

#### Zelfstandigheid

Teams moeten zelfstandig werken en onafhankelijk van elkaar voortgang kunnen boeken. Dat geldt ook voor de disciplines binnen een team.

#### Hergebruik

Elk team is verantwoordelijk voor een ander deel van de website. Als voorbeeld: een zoekveld wordt op veel plekken in de website gebruikt. Elk team kan de code hiervoor vinden en implementeren. Dat levert consistentie op voor de eindgebruiker en versnelt het ontwikkelen.

### De oplossing: werken met componenten in de front-end guide

De *front-end guide* is een componentenbibliotheek die op maat wordt gemaakt.

Elk component in de front-end guide is een pakketje HTML, CSS en/of JavaScript. Front-end developers ontwikkelen deze componenten los van elkaar. Voorbeelden van componenten zijn een zoekveld, een contactformulier en een navigatiemenu. We gebruiken ze vervolgens om pagina's samen te stellen, zoals de homepage of de zoekresultatenpagina.

Door een component geïsoleerd te ontwikkelen en te testen zijn we er zeker van dat latere aanpassingen geen invloed hebben op de rest van de website. Ook als een component is opgeleverd maar nog niet in de website kan worden gebruikt, kan het vrijwel pijnloos in een later stadium worden geïmplementeerd.

![Search-result-component met dummy data](https://www.datocms-assets.com/2651/1501076804-funda_search_result_component_dummydata.jpg)

Search-result-component met dummy data

Een front-end guide biedt een centraal overzicht van alle componenten en pagina's. Iedereen heeft toegang, ook product owners, designers en back-end developers. Componenten worden zorgvuldig gedocumenteerd en voorzien van een voorbeeldimplementatie. Dit maakt de overdracht tussen developers makkelijk. Een ander voordeel is dat een stakeholder (de opdrachtgever) altijd toegang heeft tot de meest recente versie van de front-end. Praktisch voor feedback en demo’s.

Ingebakken in de front-end guide is automatische syntax- en stijlvalidatie van onze code. Als een developer een fout maakt of slordig werkt, krijgt hij daar meteen melding van. Ten slotte helpt de front-end guide met het verbeteren van performance, bijvoorbeeld door het optimaliseren van afbeeldingen en verkleinen van CSS- en JavaScriptbestanden.

* [← How we helped others](/nl/cases.md)
* [Bouwen is Macht →](/nl/cases/bouwen-is-macht.md)

## Laten we bespreken wat we kunnen doen

Flip van Eijndhoven

Business Director

<post@voorhoede.nl>

Don't fill this out if you're human:My name isMy business isYou can email me atYou can call me atMy question or project isGet in touch

[Return to top](#top)