Frontend standards group/Roadmap

From mediawiki.org

In progress[edit]

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 up[edit]

OOjs Element DOM binding[edit]

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

ResourceLoader image support[edit]

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

Recently completed[edit]

Icon generation[edit]

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[edit]

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[edit]

  • 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[edit]

  • 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[edit]

  • 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[edit]

  • 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[edit]

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[edit]