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

History of user-interface libraries 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, and featured a first technical design document.

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

jQuery has been introduced earlier than 2011 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 has not been announced as standard user-interface library, it became part of several extensions. Various among them building on top of wikitext editor like CodeMirror, CodeEditor. It's simplicity also became popular with gadget authors. 2010 wikitext editor, but also PageTriage are still widely-used extensions. jQuery.ui got deprecated in 1.29 for OOUI.

Development until this time was foremost technically and feature-specific driven. Design standards were not fortified Foundation-wide.

MediaWiki UI was initialized by Design team, mainly caring only about simple form elements with a focus on MobileFrontend in 2014. 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 (f.e. 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”) has originally been designed around a specific product, VisualEditor in 2013, following modern coding practices at 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 has been assigned to generalize it further and adapt it to mobile use case. From 2016 on, development was focussed 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 late 2016.

Through all of this the Web evolved. And around 2020 with new technology and architecture for modern Web requirements and abilities, Foundation set out to build a new user-interface library based on Vue.js. As project and scope the Desktop Improvements project work got selected. With it 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 like which version of Vue to build upon, how to deal with IE 11 support or 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.

This time the project – Codex – has received support by the Foundation to be built as design-first, cross-product design system toolkit based on Vue 3.