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

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.

Performance
These search widgets, on both mobile and desktop, are loaded on every page. The idea of replacing the old SearchSuggest widget has been around for a while (see https://phabricator.wikimedia.org/T125725) and a new specialized OOUI widget was even created https://gerrit.wikimedia.org/r/#/c/mediawiki/core/+/255436/, but the major blocker for deploying the OOUI based widget was the need for loading OOUI on every single page.

On mobile, the biggest dependency outside of jQuery is the Mustache templating library. However, Mustache is only an 8kb library and is used for many other widgets on mobile, such as the main menu.

Design
Having 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.

Frameworks
The search suggestion feature is well suited for newer Javascript frameworks that rely on unidirectional data-flow and explicit state management. With a React-like framework, the component has to make a network requests when an input value changes, update the component state based on the network response, and then a search-suggestions template is updated automatically.

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

The feasibility of porting the mobile implementation to desktop
Because of the underlying framework dependencies, neither implementation can be ported from Vector to Minerva & vice versa without incurring a performance penalty. Porting the OOUI widget to mobile would mean loading the OOUI library on every page (~100kb) and porting the mobile implementation to desktop would mean loading Mustache on every page (~8kb). If the Mustache dependency could be dropped from the mobile implementation, porting it over to desktop could be feasible.

Instrumentation
There exist 2 search widget related eventLogging schemas: Schema:Search and Schema:MobileWebSearch (which is based on Schema:Search). These schemas are from 2015, but the instrumentation code for Schema:MobileWebSearch still exists in the MobileFrontend code base in MobileWebSearchLogger.js and is still functional.