Birth of an App

Here’s a visualisation of the evolution of the TotallyMoney.com loans comparison platform.

 

The video shows the creation of files and changes made to them over time as the application was developed. These changes are recorded via Git, a software version control system, and was visualised using gource.

Folders and files are shown as lines and dots respectively; additions and modifications are animated in with rays from contributors beaming down the changes. Besides being pretty, it gives insight into the project lifecycle and alludes to a few bits of useful information.

Rapid genesis

At the very beginning, there is a burst of growth as the application skeleton is put into place. It indicates re-use of established code such as build and deploy scripts, base styling rules to match up with our style guidelines, for example.

Files of the same type share a colour; three colour-coded branches dominate from the get go: dark blue on the left is all about styling, lime green to the right for all images, and a slightly more colourful branch shooting straight up to house application logic and front-end templates.

In the first five seconds, the application is fleshed out further: more folders and files pop up quickly. After the ten second mark, focus shifts to styling and templates as initial functionality reaches par with the old service we were replacing.

Incremental improvement

Around the 15 second mark there is a short lull as the new service is tested against the old. The subsequent switch over prompts renewed development and we can see a steady stream of small changes from then on – incremental improvements to the service, both in design and functionality, through AB testing.

Towards the end, a lack of big bursts in change shows nicely that stability has been reached.

Balanced and elegant

The resulting pattern serves as an indicator of strengths and weaknesses in the organisation of a project. For example, the branch for styling (dark blue, top right) closely resembles the branch for the front-end templates (purple end bit on the right)… this is good. If ever any of the branches grew to an obnoxious size, we would probably consider a bit of refactoring.

   

« Return to Blog Index