Frontend standards group/Roadmap

In progress

Server-side OOUI (OOUI PHP)

Some components can be generated on the server using PHP. HTML structures are compatible with Client-side OOUI (OOUI JS) allowing a single theme to be used.

Next up

OOjs Element DOM binding

Elements can be created by binding to and modifying existing DOM structures. Depends on Server-side OOUI.

ResourceLoader image support

ResourceLoader can generate stylesheets containing embedded variants and PNG fallbacks for images on disk.

Recently completed

Icon generation

SVG icons can be colored and rasterized to produce theme-specific versions. Currently used by OOUI WikimediaUI theme but needs to be integrated into MediaWiki core.

Areas of work

This is an overview of all work planned to be completed. It is not necessarily in progress, scheduled or finalized in it's current state.

Adoption of OOjs

Standardize on OOjs as the official Object inheritance and utility library for the client within MediaWiki core and projects

Specifically, moving away from dependence on Mantle for similar functionality (phab:T85890).
- MobileFrontend is still using ext.mantle.oo (and ext.mantle.views). Flow uses OO.Registry, oo.EventEmitter, and oo.initClass instead of its home-grown OO code since 2014-10.

Also improving documentation and finding other one-off solutions that may warrant conversion

Adoptability of OOUI

PHP Implementation
- Testing between implementations to keep them in sync
- Available widgets for existing use cases
- Support for progressive enhancement
  - Ability to automatically create a client-side widget object from existing DOM rendering ("resurrection")
  - Simplified static controls that become rich controls when possible on the client
- Convenient integration into MediaWiki
- Image support in ResourceLoader
  - Including support for variants, rasterized fallbacks, language-specific overrides and RTL overrides / generated flipping
Granular packaging for a-la-carte use
MediaWiki theme lives in MediaWiki

Documentation
- Useful and CI tested examples
- More tutorial documentation on wiki
- Improved reference documentation
- Integration into User Interface Guidelines
  - Useful guidelines for practical application
  - Live demos of controls with guidelines on how they should be used
  - Links to examples and references, possibly a component playground

Use of OOUI in MediaWiki Core

Show by way of example in core how extensions can take advantage of OOUI
Convert existing interfaces to use OOUI for control generation
- Login (gerrit:183390) and CreateAccount
- Preferences
- Frequent page-level commands
  - MovePage, Protect, Delete, etc.
- Major non-form pages
  - Special:Log, RecentChanges, Watchlist, etc.
Utilize progressive enhancement where appropriate
- Text inputs become TitleInputWidget objects on the client with title suggestions as you type
  - Example use: the search box in skin
- Restricted wikitext textareas become WikitextInputWidget objects with a basic formatting toolbar, restrictions
  - Example use: log message entry for Special:MovePage
- Drop-down menus with few options become ButtonSelectWidget objects
  - Example use: the render option block in Special:Preferences > Appearance > Math
- Drop-down menus with many options become InlineMenuWidget objects and conform to style guidelines
  - Example use: the "image size limit" control in Special:Preferences > Appearance > Files

Template system in MediaWiki Core

Remove dependence on Mantle extension for templating and instead use directly from core
Introduce template processing for server and client into MediaWiki core
Use ResourceLoader to transport templates
Support pluggable template languages, initially allowing plain HTML and one other template language (Architecture Team to decide which one)

Skin rewrite

Skins are are assembled using client-side and server-side widgets which are generated from and modified via a data model. Depends on Server-side OOUI and OOjs Widget binding.

Other resources

User:Jdlrobson/Quest/Frontend_UI_standardisation