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.
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.
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.