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. Our challenge was to ensure individual product teams could work seamlessly on the same front-end.
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 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.
