Houston, *static* we have a problem.

How we created the command centre for Vend’s UI.


It wasn’t long ago when Vend was one product living in one repository, meaning there was one source of truth dictating how it looked and felt. In those days when we wanted to change the UI, we would change it. Job done. However growth started accelerating, we blinked, and we no longer had just one product and one repository, we had five!

Our initial reaction to this growth spurt was to pull out our Vend UI Style Guide, and implement them in each product respectively. This meant it was up to the designers to ensure that designs for each product were consistent with the style guide.

While this was fine in the initial stages, it wasn’t long before we realised that not only were we duplicating code in each product, but due to the ever-evolving nature of our style guide, the look and feel of our products were starting to drift apart. It was then that we decided to pull out the implementation layer into its own repository, and publish it using bower. We named this framework vend.ui.

We now had one source of truth which all our products could consume. This was a huge win for us! Not only did this mean we only had to write the UI component once, it made it easier for us to keep all our products in-sync with the latest style guide, by just updating the version of vend.ui in each product, and voilà! You had all the latest UI components at your disposal.

Once we had vend.ui up and running, we wanted a place in which everyone in the dev team could check out what the latest look and feel of Vend, and how they could use it. So we created Houston. Houston is an application that is built directly off our latest version of vend.ui. It is our command centre for all things UI in which anyone can view, comment, and critique how Vend is now, and where we are heading.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.