Design System Team/History of user-interface libraries and frameworks in MediaWiki

There have been several attempts for providing consistent user-interface features over the 20 years of MediaWiki (MW).

The first “skin”, Monobook was added in MW 1.3 (2004), and featured a first technical design document.

All of the following “libraries” were either part of MediaWiki core itself or deployed together.

jQuery was introduced in 2009 and with MW 1.16, jquery.ui was added around the same time as the Vector skin in order to provide a new and improved editing interface. It started with dialog component for the 2010 wikitext editor. While it was not announced as a standard user-interface library, it became part of several extensions in connection to the 2010 wikitext editor, such as CodeMirror and CodeEditor. Wikidata was intentionally built with jquery.ui due to a lack of standardization. Its simplicity also became popular with gadget authors. The 2010 wikitext editor, but also PageTriage are still widely-used extensions. jQuery.ui was deprecated in MW 1.29 for OOUI.

Development until this time was mainly driven by technical and feature-specific needs. Design standards were not enforced Foundation-wide. That is the background of yet another framework, Backbone, being chosen for PageTriage back then.

MediaWiki UI was initially created by the Design team in 2013 (project title “Agora”), and mainly focused on simple form elements and the MobileFrontend, user login form, and Flow extension. It aimed for being a Bootstrap equivalent, but for MediaWiki. At that time, OOUI was seen as too complex to adapt from its desktop-first origin, and too large in size to be usable for the new mobile Wikipedia architecture. Its CSS class-based approach quickly hit limitations with higher complex components (e.g. date picker, but also editing interfaces) and also faced critique for providing abilities for misuse in gadgets/user scripts which would provide more user experience and consistency problems in the long run.

OOUI (“object-oriented user-interface”) had originally been designed around a specific product, VisualEditor, in 2011, following modern coding practices at the time with its object-oriented JavaScript paradigm. It became a separate library in 2013 and was decided to become the default library at the Foundation in 2014. Later, the Product Design team had been assigned to generalize it further and adapt it for mobile use. From 2016 on, development was focused to be fully in sync with the principles of the the Design Style Guide (formerly “WikimediaUI Style Guide”) in its default theme “WikimediaUI”. The Design Style Guide also came into place in late 2016.

Through all of this the Web evolved. In 2020 with new technology and architecture requirements and abilities for modern Web, the Foundation began working on new user-interface library based on Vue.js. Read more about the motivations and requirements that lead to Vue.js in the underlying RFC. The initial project and scope was for the Desktop Improvements project. Part of this work was an important user-experience improvement in an high-visibility area, the new TypeaheadSearch component. The first prototypical Vue-based library, WVUI (“Wikimedia Vue UI”), was centered around the goal of bringing this component to production. In parallel, Wikimedia Deutschland (WMDE) was building their own design system for Wikidata / Wikibase called Wikit.

Participants from front-end teams across the Foundation and WMDE came together at the Vue.js Developer Summit 2021, organized by the Design System Team (DST). The summit aimed to decide on a number of architectural considerations, such as which version of Vue to build upon, and how to deal with IE 11 support or the use of Typescript and design tokens. It resulted in a joint agreement for a new multi-team effort driven by DST, including findings and code from WVUI.

This new effort, named Codex, is the canonical Design System for Wikimedia. Codex aims to be the single source of truth for Wikimedia design style, guidelines, best practices, as well as provide implementations of design tokens, components, and assets in JavaScript (Vue), CSS, and eventually mobile app frameworks (iOS and Android). The intention is for Codex to replace all existing user-interfaces libraries and frameworks, including OOUI and Wikit.