De Voorhoede

front-end developers

The challenge: a uniform website created by multiple teams

Funda recently gave its website a new look and feel. With almost 30 million visits and 390 million page views a month Funda is one of the most popular websites in The Netherlands. De Voorhoede was responsible for building a completely responsive front-end.

The Funda website displayed on a desktop, tablet and mobile device

Our challenge was to ensure individual product teams could work seamlessly on the same front-end.

So, what's key?

  • Transparency: when it's always clear what's being done by each team, you prevent them doing the same thing twice. Transparency also allows you to review and improve each other's work.
  • Communication: all developers use the same vocabulary for all parts of the website. Designers, back-end developers and other stakeholders understand and use this terminology as well. The same goes for coding conventions (guidelines on how to write your code).
  • Independence: all teams should be able to work and make progress independently of each other. This also applies to all disciplines within a team.
  • Reuse: each team is responsible for a different part of the website. For example, a search field is used in many places within the site. Each team should be able to find and use the code for this search field easily. Reusing components provides consistency for end users and speeds up development.

The solution: component based development with the front-end guide

Our front-end guide is a custom made component library.

Each component in the front-end guide is a small bundle of HTML, CSS and/or JavaScript code. Front-end developers build these components independently. Some examples of components are a search field, a contact form and a navigation menu. We use them to compose pages, like the home page or search results page.

We always develop and test components in isolation. This way we make sure that subsequent changes will not affect the rest of the website. When a component is delivered but not ready to use, you can implement it at a later stage without any hassle.

A component for search results with dummy data
A component for search results with dummy data

A front-end guide provides an overview of all components and pages. Everyone has access, including product owners, designers and back-end developers. Components are carefully documented and combined with an live example usages. This helps with a smooth handover between developers. Another benefit is that the client and stakeholders always have access to the latest version of the front-end. Especially useful for feedback and demos.

Automatic syntax and style validation are all integrated in the front-end guide. When a developer makes a mistake or delivers sloppy work, they will immediately be notified. The front-end guide also improves the performance by optimizing images and minifying CSS and JavaScript files.

The result

  • Quality and consistency through better communication and reusable components.
  • Each team works separately, so they can always continue their activities. At the same time it’s possible to benefit from each other’s work.
  • A documented component library as a base for further development.