Page MenuHomePhabricator

Request for recommendations on UI technologies (oojs/ooui, mustache, vue.js)
Open, Needs TriagePublic

Description

I have read through a bunch of mw.org docs and phab tasks now to gain a better understanding on how MediaWiki will develop when it comes to UI. But unfortunately I was a little bit overwhelmed by all the things that are currently going on.

Therefore I'd really appreciate a short answer to the following questions:

  • What is the future of OOJS and OOUI? Do you recommend using it in new extensions/skins?
  • What is the future of Mustache templates? Do you recommend using it in new extensions/skins?
  • Will serverside rendering of Vue.js templates in PHP be supported by MediaWiki Core (e.g. by wmde/php-vuejs-templating)? So could it be used for a regular skin?
  • Will there be an official Vue.js component library, similarly rich as OOUI in the near future (probably wikimedia/wvui or T235834)?

Event Timeline

Aklapper renamed this task from Request for recommendations on UI technologies to Request for recommendations on UI technologies (oojs/ooui, mustache, vue.js).Dec 23 2020, 2:37 PM

@Osnard maybe this helps a bit:

From https://www.mediawiki.org/wiki/Vue.js#Vue_UI_component_library

As part of the Vue.js Search Widget Case Study, and in course of interest by a number of teams in prototyping Vue-based projects with the goal of later in-production use, we've set up a shared components library called Wikimedia Vue UI (WVUI). This library is now managed by the Design Systems Team. Soon, we will decide on and build a canonical, shared library for use across MediaWiki—check back here for more information soon.

See also https://www.mediawiki.org/wiki/Design_Systems_Team/Vue.js_Developer_Summit_2021/Vue.js_Developer_Summit_2021_Documentation, and T288980: [EPIC] Set up a new shared Vue component library

What is the future of Mustache templates? Do you recommend using it in new extensions/skins?

Extensions: if it makes sense.
Skins: yes.

For skin development, I'd recommend following the guide on https://www.mediawiki.org/wiki/Manual:How_to_make_a_MediaWiki_skin
Templating (currently Mustache) is going to be an important part of skins going forward. In the future, it's possible we may switch from Mustache templates to Vue templates, but there's no plan to do that yet, and if we do there will be migration guides/tools/support.

What is the future of OOJS and OOUI? Do you recommend using it in new extensions/skins?

I wouldn't recommend using this for new extensions/skins unless you are willing to port that to Vue.js in future. As @kostajh has shared above Vue.js is where we are heading on the longer term.

Let me know if I can help with anything here and sorry this task went without feedback for so long (the office is usually closed in December so I suspect that's why it got missed).

Thanks for the feedback!

Just for your information: The BlueSpice team is about to release version 4 of its MediaWiki distribution, based on MediaWiki 1.35 LTS. We have decided to build the new skin mainly on mustache (probably a good choice) and to have the extensions use OOJS dialogs a lot (probably not that much of a good choice).
As we only build on LTS version, I assume we can rely on OOJSUI being available to us for some time.

Maybe you could take the time to answer me a couple of other questions:

  • Are there any plans to remove OOJSUI entirely from MediaWiki in the next LTS (1.39)?
    • Or will work on OOJSUI just be discontinued?
  • Will there be a replacement for all the OOJSUI widgets/components in the WVUI?
    • Are there plans to have a sophisticated "dialog" framework like ProcessDialog in WVUI?

I'd really appreciate a migration guide from OOJSUI to WVUI. It would also be awesome if you could make sure MediaWiki skins can easily theme those new components (I now that it can be done with OOJSUI, but it is rather complicated to create a theme).

I'd really appreciate a migration guide from OOJSUI to WVUI.

I don't think such a guide exists right now, but as soon as some things are ported to OOUI that should exist. I don't think OOUI is going away any time soon. Perhaps @Volker_E can talk a bit more about the timeline and approach that is being taken.

I've moved this task to the "blocked" column in the Design Systems Team's Phabricator board. There are a few other tasks there with similar themes.

Here is a quick status update:

  • WVUI is deprecated, and is going to be replaced by the new Codex component library (written from the ground up in Vue 3 and Typescript, based on last year's designer/developer summit). Codex is currently in alpha (T299138) (suitable for testing, but not production use); when the library reaches the beta stage we will look at de-commissioning WVUI fully; porting the TypeaheadSearch component from WVUI to Codex is the key task here (T300081); this work is currently underway.
  • Eventually we would like to recommend Codex for wider use (T291445), as a successor to OOUI (although I don't know if/when OOUI will be deprecated – some projects may need it for a long time). There are still some open questions around when/how Vue should be used across the various Wikis (T289208), and the Design Systems Team hopes to explore solutions to things like Server-side rendering, front end build tools, etc in the coming months.
  • In the meantime we will continue introducing new components to Codex (see the team's Kanban board for what is currently on our radar); we definitely intend to introduce dialogs (T284838) at some point in the not-too-distant future.
  • On the topic of Mustache templates specifically, this is an area I am interested in exploring as an alternative to server-rendering of Vue.js components in Node.js; see T291666 for details. One approach or the other may prove to be more feasible, or there may be a place for both – TBD.

Sorry that this task has languished for a while, there has been a lot of reorganization and turnover but this work is actively in development now.

Thank you very much for the feedback!