A robust front-end approach for eLife's new publishing platform

eLife was founded in 2011 by the Howard Hughes Medical Institute, the Max Planck Society and the Wellcome Trust as a non-profit organisation whose mission is to help scientists accelerate discovery. This is achieved by operating a platform for research communication that encourages and recognises ‘the most responsible behaviours in science’ including, of course, Open Access publishing.

eLife publishes important research in all areas of the life and biomedical sciences while, at the same time, also investing in innovation through open-source tool development to accelerate research communication and discovery. As strong proponents of Open Source software ourselves with a background in research and publishing we were a good fit to work with eLife and have enjoyed a productive collaboration on a number of projects over the last few years. Most recently we assisted with the development of eLife 2.0, the second version of their publishing platform.

A key objective in this platform refresh was to focus on the reading experience of eLife’s online articles. eLife aims to transform how important scientific findings are communicated and shared. We wanted to avoid the common trend of many content-oriented websites whereby their users interact with busy interfaces with various, usually conflicting aims. For more information on the UX approach see the blog post Welcome to eLife.

In order to tackle this objective we formed an interdisciplinary team with eLife stretching from product and UX practitioners to expert front-end technologists. Our role for this objective was to produce the necessary front-end assets and set the technical foundations for this user-centred approach.

The front-end solution

We used the design system technique pioneered by Brad Frost called Atomic Design, which is an approach that builds up the UI from the most basic building blocks or 'atoms', combines atoms into molecules, molecules into organisms, and those organisms into templates and pages.

The mustache templating library was the foundation of the patterns produced for the project. It’s highly compatible with an Atomic Design approach as components can be composed of smaller sub-components. A great feature of mustache templates is that structured JSON data can be passed into them, providing a simple means to display and test patterns with real content.

In addition to the templates, there was an accompanying YAML file (a human-readable, structured configuration file) that acted as the ‘source of truth’ for the components, defining the possible configurations that can be passed to each component, a form of ‘contract’ between the front end and back end.  This approach created a very empowering front end workflow, ensuring that the data, structure, logic and markup were central considerations.

On the back end, PHP view models were created for each corresponding front end component, ensuring that the back end code was as composable as the front end.

Unit tests were written to test the view models against the YAML definitions, ensuring that the view models would always be compatible with the front end patterns.

In addition to robust automated testing and code quality checks as part of the front and back end build processes, additional cross-browser testing and quality assurance tests were carried out to ensure a great experience for the end user.

Better collaboration and communication within teams

The pattern library approach provided a successful way of working with the eLife team. It became a common language for stakeholders, designers and developers (both front end and back end) and allowed for better code ownership and team communication.

In addition, members of our front-end development team regularly travelled to Cambridge to work alongside eLife’s product team. The benefits of such close collaboration included improved development decision making, as well as more easily validating assumptions and testing and signing off the work.

To sum up, the pattern library has helped eLife to organise all of its new UI essential elements into one central repository where teams can pull information that is crucial to their work. This more accessible design information results in less miscommunication and misinterpretation, and we envisage this to be the case for the eLife team as the site evolves in the future as well. Atomic Design and pattern libraries have enabled eLife to achieve a user interface production method that allows for evolution, consistency, efficiency and a common vocabulary for the organisation’s internal teams and partners.