Page MenuHomePhabricator

[Spike] Prototype a single component for new Vue.js search project
Closed, ResolvedPublicSpike


T249051 is wrapping up but signs point to starting Vue.js search component development in a new, shareable NPM repo. This task builds on that work by evaluating the different technologies chosen by the WMDE Vue.js experts for their library and in what ways that can be leveraged to help build fine components fast for the Vue.js search project.

Specifically, this task is to explore building a single component in a copy of the WMDE component library. There is no expectation that the component will be committed afterwards but it could be a head start on future work regardless of the baseline used. For example, what does a Button look done WMDE fashion and what made development in/efficient?

Leveraging the choices WMDE has already pioneered has a number of possible benefits that are worth exploring:

  • WMDE's approaches are proven. WMDE is on their third year with Vue.js and is using it in production in a number of places including: Wikidata mobile termbox, Wikidata bridge (beta), Wikidata Tainted References.
  • The scaffolding phase of the Vue.js search work can be diminished.
  • There is interest by WMDE in providing component review as able. Writing components like they do may improve the ability of their engineering talent to contribute their expertise to the project.

Like the rest of the Vue.js search project, this task is not a replacement for a proper long term, WMF or WMDE-wide decision which has many stakeholders across orgs, departments, and roles but it may help inform that discussion. The scope is for Vue.js search development only which should be efficient and informative.

Acceptance criteria

  • A decision is made as to what parts are wanted to be copied or forked and tasks are created or updated.
  • WMDE is consulted as needed and informed (primary contacts are @WMDE-leszek, @darthmon_wmde).

Event Timeline

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptMay 6 2020, 2:32 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I created a copy of the Wikibase Vue components repo in Github and added a simple typeahead component for testing.

The Wikibase repo contains three Vue components:

  • Resizing text field
  • Radio button
  • Indeterminate Progress indicator

The Wikibase repo has a few noteworthy characteristics:

  • Tied into the Gerrit CI pipeline
  • Extended use of Storybook for component design and testing
  • Uses SCSS
  • Uses Typescript
  • Integrates with Docker for builds and testing
  • Uses standard Vue CLI tooling for development
  • Uses folders to separate concerns: (component) source code, stories, and tests
  • Uses Jest for testing

The current discussions about what to technologies to use for the search component and a generalized component library show overlap in some of these areas:

  • Use of Storybook
  • Jest for snapshots/testing
  • Potential use of Typescript

It is envisioned to use LESS instead of SCSS so migration/translation of the SCSS portions would be necessary to integrate the existing components into the new library. Also, the current preferred approach to concern separation is leaning towards creating a folder per component structure which would also house tests and stories associated with each component.

The final home of the new component repo, Github or Gerrit, is going to determine what CI integration is needed.

By looking at the existing overlap, it is probably better to start fresh for the new library and build up the tooling along the way. It is desirable to share a library across projects and be able to leverage work done across the organization instead of maintaining siloed project-specific libraries. After the initial set up of the new library, we should circle back and see if we can integrate these components in cooperation with WMDE.

Thank you, @holger.knust. Popping you off as assignee. Ready for sign off but someone other than Holger.

Niedzielski claimed this task.

The Wikibase repo contains three Vue components:

Components from this repo (and related WMDE repos) are being considered in T253933.

Integrates with Docker for builds and testing

I'm not sure what we'll need for a build step but maybe this can inform. For local development, I hope we can keep Docker optional or use Fresh.

Use of Storybook


Jest for snapshots/testing


Potential use of Typescript
Uses standard Vue CLI tooling for development

This might inform T249658 but I think we should also consider plain Webpack.

Thank you, @holger.knust!