User:Volker E. (WMF)/sandbox/History of user-interface libraries

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 came into place at around the same time as new skin Vector, with the goal to provide a new, better editing interface into the skin. 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 with some of them building on top of 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 background of yet another framework, Backbone, being chosen for PageTriage back then.

MediaWiki UI was initially created by the Design team in 2014, and mainly focused on simple form elements and the MobileFrontend, user login form, and Flow extension. 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 in gestation. 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 2013, following modern coding practices at the time with its object-oriented JavaScript paradigm. It 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 to the mobile use-case. 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. And around 2020 with new technology and architecture for modern Web requirements and abilities, the Foundation set out to build a 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 library WVUI (“Wikimedia Vue UI”) was centered around the goal of bringing this component to production.

Participants from front-end teams across the Foundation and from Wikimedia Deutschland came together at the Vue.js Developer Summit 2021, organized by the Design Systems 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 has resulted in a joint agreement for a new multi-team effort driven by DST, including findings and code from WVUI.

Currently (as of late 2022) the project – Codex – has received support by the Foundation to be built as a design-first, cross-product design system toolkit that is based on Vue 3.