Frontend standards group/Roadmap

In progressEdit

Server-side OOUI (OOUI PHP)Edit

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 upEdit

OOjs Element DOM bindingEdit

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

ResourceLoader image supportEdit

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

Recently completedEdit

Icon generationEdit

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 workEdit

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 OOjsEdit

  • 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 OOUIEdit

  • 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 CoreEdit

  • 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 CoreEdit

  • 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 rewriteEdit

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 resourcesEdit