Description
(Please provide the context of the performance review, and describe how the feature or service works at a high level technically and from a user point of view, or link to documentation describing that.)
Query builder is basically a WYSIWYG for Wikidata Query Service and SPARQL querying. It's a frontend-only application being served as static files from miscweb.
- It is using Vuejs 2 and TypeScript + WMDE's design system (wikit). It uses Vite and Rollup for bundling.
- It lives fully outside of MediaWiki and appservers and will be accessible in https://query.wikidata.org/querybuilder
- It doesn't have a language selector yet (blocked on WMF building of a language selector in Vue) but you can access other languages through uselang parameter. e.g. https://query-builder-test.toolforge.org/?uselang=es
- More info on user-side of things: https://www.wikidata.org/wiki/Wikidata:Query_Builder
- It is based on ES6 and not being compiled down to ES5 (i.e. we don't support IE11).
Preview environment
(Insert one or more links to where the feature can be tested, e.g. on Beta Cluster.)
It's in https://query-builder-test.toolforge.org/ If you need ssh access to that toolforge tool, let me know but it's just static files.
Which code to review
(Provide links to all proposed changes and/or repositories. It should also describe changes which have not yet been merged or deployed but are planned prior to deployment. E.g. production Puppet, wmf config, or in-flight features expected to complete prior to launch date, etc.).
- Main code: https://gerrit.wikimedia.org/r/plugins/gitiles/wikidata/query-builder/
- Deploy repository holding the final static assets: https://gerrit.wikimedia.org/r/plugins/gitiles/wikidata/query-builder/deploy
- Puppet patch deploying it to miscweb: https://gerrit.wikimedia.org/r/c/operations/puppet/+/700317/3
- The CI job that builds the deploy repo patches: https://gerrit.wikimedia.org/r/c/integration/config/+/708398
Performance assessment
Please initiate the performance assessment by answering the below:
- What work has been done to ensure the best possible performance of the feature?
- We made sure to use lowest possible number of dependencies to avoid bloating the final payload and supply chain attacks. Both production and dev dependencies. The current package lock file is 14K lines, compared to for example MobileFrontend extension with package lock file of 22K lines
- We investigated to find performance issues and fixed those. For example https://gerrit.wikimedia.org/r/c/wikidata/query-builder/+/708762 reducing size of css by factor of ten.
- The current payload is extremely small considering its functionalities and features (date selection, complex relations between conditions, different data types, selectors of items, etc.)
- Since it's fully outside of MediaWiki, it can't cause disruptions or become a DDoS vector.
- API queries being made on behalf of this app to Wikidata (to search for example) are debounced and throttled.
- We built several monitoring tools to make sure it's working properly https://grafana.wikimedia.org/d/RA1j2T0Mk/wikidata-query-builder?orgId=1
- What are likely to be the weak areas (e.g. bottlenecks) of the code in terms of performance?
- We don't have ongoing measurement of javascript performance so it might get worse without us noticing.
- It depends on wikit (wmde's design system) and if it starts to get bloated, query builder will follow but wikit is in our control so we can work on it if any issue arises.
- Are there potential optimisations that haven't been performed yet?
- Not that I know of, we could maybe squeeze a bit more out of its dependencies and make sure we compile to ES6 to avoid extra code but that would be it.
- Please list which performance measurements are in place for the feature and/or what you've measured ad-hoc so far. If you are unsure what to measure, ask the Performance Team for advice: performance-team@wikimedia.org.
Payload:
JS flame chart of loading the page (partial):

