User:JDrewniak (WMF)/notes/Search widgets at Wikimedia

There are currently (As of October 2019) 4 different search typeahead implementations at the Wikimedia Foundation.


 * 1) searchSuggest
 * 2) OOUI TitleWidget & TitleOptionWidget
 * 3) MobileFrontend SearchOverlay
 * 4) www.wikipedia.org search widget

How do they differ?
All widgets contain the same basic functionality: Producing a list of search suggestions when typing a query into a search input. SearchSuggest is the most bare-bones, as it doesn’t include thumbnails in the suggestions. The major differences are within the underlying frameworks they use. All widgets except the portal use jQuery and mw.Api. The mobile widget depends on the Mustache templating library, and the OOUI widget depends on... OOUI.

The major factor when producing a widget is performance
These search widgets, on both mobile and desktop, are loaded on every page. In the past, replacing the old SearchSuggest widget has been discussed, but a major blocker was the ability to load OOUI on every page. Similarly, the mobile widget requires loading the Mustache templating library on every page. On mobile, Mustache is used for other widgets as well, such as the main menu, so it’s presence is justified.

Replacing SearchSuggest with an OOUI widget
This idea has been around for a while. Summarized in this task: https://phabricator.wikimedia.org/T125725

A slightly modified TitleOptionWidget has even been created (predating that task by a year), called SearchOptionWidget https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/255436/ however it doesn’t seem that this widget is actually used anywhere.

Design
Have 4 different implementations of the same features inevitably leads to design inconsistency. Those concerns have been expressed in this task: https://phabricator.wikimedia.org/T153417

Creating a new widget
The search suggestion feature is well suited for newer Javascript frameworks that rely on unidirectional data-flow and explicit state management. Essentially, the component has to make network requests based on a text input value, and update a state variable based on the network response. Then a template is updated automatically whenever the state changes.

Using a codepen with existing HTML/CSS from the design task above, I was able to create a typeahead widget in a few hours using the Preact framework https://codepen.io/j4n/pen/PooqWQLq.