Vocabulary
- Entity: Wikibase entity, as defined in https://www.mediawiki.org/wiki/Wikibase/DataModel, e.g. Item, Property
- Termbox: part of the entity page showing and allowing editing of labels, descriptions and aliases of an item or a property
Current situation
- HTML representation of the entity page is generated by the PHP code in Wikibase extension.
- JS code manipulates the DOM content based on user interaction in the entity page. It is implemented using the jQuery-UI-based “framework” created specifically for Wikibase use.
- “Framework” in the sentence above refers to a set of generic functions, and base classes that are shared across user interface elements, and are also reused in other MediaWiki extensions depending on Wikibase (e.g. WikibaseLexeme).
- Logic generating the HTML of the entity page is implemented both in server side PHP code, and also in JS front end code. Both parts must be kept in sync to avoid changes to one causing the other to break and vice versa.
- Custom front-end “framework” is difficult to make changes in, and is also making onboarding of new developers hard, as it is both custom, and based on the dated jQuery UI. In 2017 Vue.js has been picked by Wikibase developers as the framework to use for the development of the front end code, to migrate towards from the home-brew “framework”.
Problem statement
- Content rendering logic is split into two code bases (PHP and JS), and making changes is cumbersome, time-consuming and error-prone
- With the chosen JavaScript framework (Vue.js), HTML and JavaScript are tied together. JavaScript-based server-side rendering is necessary in order to avoid redundant implementations.
Solution proposal
- Move towards implementing Wikibase/Wikidata UI as a Single Page Application (SPA) - written in TypeScript to mitigate the downsides of using an otherwise untyped language
- SPA is the central place where logic on what is rendered and what data is needed to render particular parts resides - no duplication/need of keeping in sync between server-only (formerly PHP) implementation and browser-only JS implementation
- SPA is given the request parameters (e.g. user language “en”, item to display “Q123”), and it requests any needed data from the relevant APIs, e.g. MediaWiki API (e.g. Wikibase entity data, i18n messages)
- TypeScript of the UI SPA is “compiled” to node service run on the server side to send HTML back to the component responsible for assembly of the content send to the client, as well as to the JavaScript code send to the user’s browser and run there
- As a temporary step, MediaWiki PHP code will be calling SPA and integrating result HTML into the MediaWiki output sent to the browser. With the possible future changes to MediaWiki infrastructure, Wikibase SPA could be called from a component other than MediaWiki PHP code itself, and with this the circle dependency (MW calling SPA in turn calling MW) would no longer be an issue.
- Transition towards the SPA will start by implementing the termbox part of the Wikibase UI as the SPA, and gradually move towards implementing the whole of Wikibase entity page UI as the Single Page Application.