https://commons.wikimedia.org/wiki/File:Lissajous-Figur_--_2020_--_7768.jpg

Summit on present & future Vue.js user-interface library and the design system at the Wikimedia Foundation

The Wikimedia Foundation Design Systems Team provides updates and outcomes from the recent Vue.js Designer Workshop and Developer Summit, which aimed to help us converge on a single design system and UI component library moving forward as we officially adopt Vue.js.

By Roan Kattouw, Volker Eckl, and Anne Tomasevich

The Wikimedia Foundation has decided to adopt Vue.js as its future JavaScript framework for use in MediaWiki and across the Wikimedia movement. The Design Systems Team provides an overview of recent decisions and recommendations and an outlook of the next steps towards a shared user-interface component library and the larger design system.

Background

In 2019, the Front-end Architecture Working Group (FAWG) was formed to explore how to address challenges in front-end development at Wikimedia. The FAWG recommended that the Wikimedia Foundation evaluate Vue.js as the potential JavaScript framework for use in MediaWiki and across the Wikimedia Movement. This has been part of the ongoing Platform Evolution program to evolve our platform and empower developers. After a pilot project, the Wikimedia Foundation decided to officially adopt Vue.js and to invest in migrating its systems and code to Vue. 

In response to this, the Design Systems Team was created and is charged with building out infrastructure and tools for using Vue, creating and maintaining a Vue-based unified design system and component library, building processes for working with this library across Wikimedia, and migrating front-end products to Vue. By the time the team was created in January 2021, multiple teams at the Wikimedia Foundation (WMF) were developing code in Vue, using three different sets of reusable components. In addition, Wikimedia Deutschland (WMDE) had been developing in Vue for years and had built its own design system called WiKit. Initially, the Design Systems Team focused on unifying the shared components on the WMF side into one library, but we knew we wanted to find a way to build a consolidated library for WMF, WMDE, volunteer developers, and anyone else who might want to use it.

At the same time, the Design Systems Team ran into several other issues that required making decisions across teams and across the organizational boundary between WMF and WMDE. For example, we needed to decide whether, when, and how to migrate from Vue 2 to Vue 3, which is a decision that affects everyone using Vue across the Wikimedia movement. We identified several other major decisions to be made and decided to convene a summit with everyone working on Vue at WMF and WMDE so we could resolve these questions together and learn from each other. The teams that had experimented with Vue had all produced great work in an environment with a lot of uncertainty and had given the Design Systems Team excellent feedback and suggestions. We wanted to work collaboratively with them to build and maintain this new design system, starting with these important decisions.

Converge and unify

The future design system user-interface library—providing the building blocks for interfaces of highly complex projects like Abstract Wikipedia or with exposure to hundreds of millions of users like the Desktop Improvements project—will follow a design-first approach. Therefore, we started with a designer workshop preceding the engineering-centered summit to identify design blockers and hurdles.

The Designer Workshop

Over 20 designers and user-experience-centered engineers from different product and platform teams at the Wikimedia Foundation collaborated on a two day workshop. The goal of the workshop was to explore how we might create a streamlined design process for common user-interface components – from ideation to quality assurance. Additionally, the workshop was a chance to deepen the collaboration between various stakeholders in this wide-reaching project.


Topics covered included:

  • Governance Model: Workshop participants reviewed a decision workflow, known as the Governance Model. The workflow outlines the decisions, steps, and processes involved in the creation, re-usage, modification, and deprecation of system components. It also sets clear collaboration guidelines that will enable teams to actively contribute to the system.
  • Component Design Process: Leveraging the design system principles and quality assurance checklists already in use, participants discussed opportunities form proving the design process for component additions. A key element was clarifying the role of design tokens as systematic design decisions in predefined, centralized, limited, and traceable values in this process.
  • Resource Identification & Ecosystem: Participants shared and specified resources to support a production design workflow, including the Design Style Guide.

While the Governance Model and recommendations for CSS architecture and icon handling were carried over to the developer summit, other topics have been settled on or placed in Phabricator tasks for interested parties and volunteers to provide additional feedback.

The Developer Summit

The developer summit took place over three days with more than 60 people attending. The first day was about gathering feedback and experiences. The Design Systems Team introduced itself and its plans, developers from several teams presented short demos of projects they had built in Vue, and there was a retrospective where developers discussed their experiences and concerns with Vue development in the context of the MediaWiki ecosystem. The second and third days were focused on making decisions. In each session, the Design Systems Team presented a problem and possible solutions, which the group then discussed until consensus was reached on how to move forward.

The first decision we had to make was when to upgrade to Vue 3. All of the existing Vue code at Wikimedia uses Vue 2, but we would like to take advantage of the added features and better performance of the new major version. The longer we wait to upgrade, the more code will be written for Vue 2 in the meantime that will have to be migrated later. However, Vue 3 does not support Internet Explorer 11 and certain other older browsers, so once we upgrade we will no longer be able to support these browsers in our Vue-based projects. Users of those browsers will get a more limited experience without JavaScript. 

The group decided that this trade-off was worth it: we’re going to upgrade to Vue 3 as soon as we can, even though that means dropping IE11 support for Vue-based projects. We also decided to review our policies for what no-JavaScript experiences should look like in our products, to ensure that we provide an adequate experience for users of IE11 and other older browsers.

The other major decisions centered around the shared component library. The group had various opinions on which existing library should become the unified one and on whether we should even choose an existing library or start a new one. We ended up deciding to start a new library, to build it up quickly by transferring the good parts of the existing libraries, and to build it out collaboratively from the start so that it belongs to all of us.

In line with our decision to upgrade to Vue 3 quickly, we will build this library in Vue 3 from the start. A task force with representatives from the Design Systems Team, other WMF teams, and WMDE will be formed to spearhead the creation of this new library and to handle the details of configuring tools, settling on library guiding principles, and designing and documenting a contribution process. Although these groups will be doing the work to initialize the library, we will do so while remaining open to feedback from anyone in Phabricator and Gerrit, and will welcome contributions to the library from anyone who has an interest.

We also decided that the unified library will use Vite as its build system (as opposed to Webpack, which most of the existing libraries use), and will be written in TypeScript. We weren’t able to come to a decision on whether the new library should use LESS, Sass, or something else as its CSS processor; that decision will be left to the task force. 

For a detailed overview of all the decisions we made at the summit, see this summary.

Outlook

The post-summit task force will soon meet to address the remaining decisions, to finalize our processes around contribution, and to start up the new component library. Keep an eye on the wikitech-l and design mailing lists and the Design System Team’s workboard for updates about the new library.

The Design Systems Team is grateful to everyone who participated in the Designer Workshop and Developer Summits for sharing their experiences, suggestions, opinions, and offers to help with these efforts. We are hopeful that kicking off this work with dedicated time for collaborative brainstorming and problem-solving will lead to a powerful and excellent design system in the end.

About this post

Featured image credit: File:Lissajous-Figur — 2020 — 7768.jpg, Dietmar Rabich, CC BY-SA 4.0

1 thought on “Summit on present & future Vue.js user-interface library and the design system at the Wikimedia Foundation

Leave a Reply

Your email address will not be published. Required fields are marked *