BCS SPA2017

Integrate Pattern Libraries for Fast UX Feedback - An Open-Source Workshop

Learn about using a pattern library directly in your web apps to reduce feedback loops with designers while also helping to build an open-source integration in your language of choice

Workshop/Tutorial (150 minutes

Abstract

During development of eLife's open-source journal web application platform, the team have integrated a pattern library (Pattern Lab), a tool that enables creation of modular, user centric designs directly into the web app. This is significant as direct integrations are extremely rare, and certainly haven’t been seen in scientific publishing. Pattern libraries such as Pattern Lab are often used by web designers and front-end developers to collaborate over the look and feel of a website's various page parts. It is rare to see it used directly in a website, as the patterns are more usually copied and pasted into a website's backend codebase for production use, and operate independently of the patterns in the pattern library - this results in large feedback loops and drift between the two, aka “pattern rot”. In this workshop we hope to illustrate the benefits of integrating a pattern library then, using our experience and existing, open-source PHP code, we’ll help teams build Pattern Lab integrations into simple web applications in their favourite languages and web frameworks.

The objective is to share how useful this technological innovation can be for reacting quickly and gathering feedback earlier - maximising work not done. The nice side objective is to have the groundwork in place for many other open-source integrations in languages other than PHP so that we can further expand the usage of directly integrated Pattern Labs. Any language will do, so we hope people will attempt it in their usual language of choice or use this as a good time to try out a new language they’ve been working with.

Laptop or pairing required.

Audience background

software engineers, testers, designers, product people and anyone who can give input on the process of requesting, seeing and reacting to changes in the web development process.

Benefits of participating

learning about the benefits of pattern libraries and hopefully the benefits of a full integration. The ability to contribute to a supported and popular open-source initiative. A chance to consider the feedback loops between designers, developers and those we make this software for.

Materials provided

a working version of a basic Pattern Lab in a virtual machine, instructions on how to use it and an existing, working prototype in PHP. Presentation and instructions.

Process

Starting with a presentation from our Head of Technology, our Senior Front-end Developer and our Systems Developer to give you insight into the benefits of using an integrated Pattern Lab from 3 differing perspectives. Then into the workshop, first attempting to set up a working Pattern Lab as that is a valuable thing to have learned to do in itself. Followed by creating an integration in 3 stages, getting more complex elements at each stage. We’ll come together for feedback after each stage and also rearrange teams as needed so that people can pair/mob on the solutions that show most promise.

Detailed timetable

00:00 - 00:15 Presentation of benefits
00:15 - 00:20 Introduction of technology concepts
00:20 - 00:40 Get a Pattern Lab working locally and choose a web framework
00:40 - 01:10 Get the first basic pattern working
01:10 - 01:15 Wrap up of the first half before the coffee break
Break
01:15 - 01:45 Get multiple, nested patterns working in one page
01:45 - 02:15 Get a change from Pattern Lab automatically through to the web app
02:15 - 02:25 Show and Tell, discuss solutions
02:25 - 02:30 Wrap up and encouragement/instructions on how to continue the solutions in the future

Outputs

Session instructions and code: https://github.com/elifesciences/spa-patterns-workshop

An attempt in Elixir: https://github.com/elifesciences/patterns-elixir

eLife's production pattern library: https://ui-patterns.elifesciences.org/
and code: https://github.com/elifesciences/pattern-library

History

This session has never been presented before.

Presenters

  1. Paul Shannon
    eLife Sciences Publications Ltd
  2. David Moulton
  3. Chris Wilkinson