Reading/Web/Desktop Improvements/Vue.js case study/Status log

2021-03-03

 * Search widget deployed to desktop improvements pilot wikis (T249297)

2020-10-05

 * Build a pre-library loading indicator for Vue.js search resolved. Thank you, Jan Drewniak and Nick Ray!
 * In progress:
 * Create a Docker configuration for building WVUI for Vue.js search resolved. Thank you, Nikki Nikkhoui!
 * Build the Vue.js search component network client in progress. Cancel request implementation in review.
 * Build the wvui-search-form component for Vue.js search iterating.
 * Other tasks in progress tracked on Web board.

2020-09-28

 * Initial Security team review provided. Thank you, Scott Bassett!
 * Audit fixes and upgrade patches submitted for WVUI and Vector.

In progress:


 * Create a Docker configuration for building WVUI for Vue.js search iterating. Node.js and Storybook containers now available. Jenkins integration in starting.
 * Build the wvui-search-form component for Vue.js search iterating.
 * Tweaks to input merged.
 * Add user journey performance tests for Vector's legacy and Vue.js search in progress with Performance team.
 * Instrument Vue.js search initial WIP patch posted.
 * Other tasks in progress tracked on Web board.

2020-09-21

 * Feed Vue.js run time errors to error intake system resolved. Thank you, Jon Robson!
 * Design spec for new Vue.js search experience resolved.
 * Pass server-rendered search form state to client on initial render of Vue.js search resolved. Thank you, Sam Smith!

In progress:
 * Build the Vue.js search component network client in progress. Transitioned to Nick Raskin.
 * Create a Docker configuration for building WVUI for Vue.js search iterating.
 * Instrument Vue.js search started.
 * Build the wvui-search-form component for Vue.js search in progress.
 * Other tasks in progress tracked on Web board.

2020-09-14

 * Move Vue.js search development over to Gerrit resolved. Thank you, Nikki Nikkhoui!
 * Security team interlock. Thank you Scott Bassett and Sam Reed!
 * Notes care of Jazmin Tanner!
 * Security Readiness Review For WVUI and Vector dependencies needed for Vue.js search
 * In progress:
 * Build a pre-library loading indicator for Vue.js search in review.
 * Build the Vue.js search component network client in progress. Action API implementation merged in case new Core API issues cannot be resolved in time. Adding request cancelation.
 * Opened Enable DWIM support for Vue.js search.
 * RTL discourse continues.
 * Create a Docker configuration for building WVUI for Vue.js search in progress.
 * Integrating the new form into Vector.
 * Other tasks in progress tracked on Web board.

2020-09-07

 * Enable client error logging for Desktop Improvements Project and Vue.js search resolved. Enabled for Hebrew Wikipedia! Thank you, Jon Robson and Jason Linehan!
 * [Spike] How should i18n work for Vue.js search? resolved. Thank you, Nick Ray and Santhosh Thottingal!
 * Add a configuration flag for swapping the client experience for Vue.js search resolved. Thank you, Jon Robson!
 * Build the wvui-typeahead-suggestion component for Vue.js search resolved. Thank you, Jon Robson!
 * Add Vue.js v2 runtime-only Core or Vector ResourceLoader module for new Vue.js search resolved. Thank you, Jon Robson!
 * Integrate WVUI into Vector for Vue.js search resolved. Thank you, Jon Robson!
 * Folder structure for assets built by Webpack should be separated from standard ResourceLoader assets opened.
 * In progress:
 * Move Vue.js search development over to Gerrit in progress. Development with the exception of the current open PRs is now occurring in Gerrit to support build step integration.
 * Create a Docker configuration for building WVUI for Vue.js search started. Thank you, Nikki Nikkhoui!
 * Build the wvui-search-form component for Vue.js search in progress.
 * Build the Vue.js search component network client iterating. Client now passes in fetch implementation.
 * Other tasks in progress tracked on Web board.

2020-08-31

 * Pass server-rendered search form state to client on initial render of Vue.js search merged. Thank you, Sam Smith!
 * Stephen Niedzielski OOO Wednesday - Friday.
 * Enable cross-origin resource sharing (CORS) for requests in Core REST API is available. Thank you, Holger Knust!
 * Design spec for new Vue.js search experience done!
 * [Spike] What should we instrument in the new Vue.js search experience? resolved.
 * Split icon pack from WVUI entry.
 * In progress:
 * Move Vue.js search development over to Gerrit started. Thank you, Nikki Nikkhoui!
 * Other tasks in progress tracked on Web board.

2020-08-24

 * Core REST API search results are different from Action API results resolved. Thank you, Holger Knust!
 * Web Vue.js sprint retro.
 * Documentation now available on temporary server. Thank you, Jan Drewniak!
 * Storybook
 * Test coverage
 * Bundle analysis
 * Bundlesize
 * [Spike] How should i18n work for Vue.js search? moved to sign off.
 * Build the wvui-input component for Vue.js search moved to sign off.
 * Nikki Nikkhoui onboarding. Welcome!
 * In progress:
 * Pass server-rendered search form state to client on initial render of Vue.js search in review.
 * Build the wvui-icon component merged! Thank you, Anne Tomasevich! Icons bundle pack will be split.
 * Other tasks in progress tracked on Web board.

2020-08-17

 * Split Pass server-rendered search form state to client on initial render of Vue.js search from Integrate WVUI into Vector for Vue.js search.
 * Miscellaneous out-of-office this week.
 * Web Vue.js sprint.
 * Add Vue.js v2 runtime-only Core or Vector ResourceLoader module for new Vue.js search moved to signoff.
 * [Spike] How should we load Vue.js and dependencies for Vue.js search? resolved. Thank you, Jon Robson!
 * Discussing instrumentation using searchSatistfaction.js. See minutes.
 * In progress:
 * Build a pre-library loading indicator for Vue.js search in progress. WIP patch is iterating.
 * Add user journey performance tests for Vector's Legacy and Vue.js search started. Thank you, Nick Ray!
 * Integrate WVUI into Vector for Vue.js search in sign off.
 * Drafted wiki pages on build step and Webpack.
 * Pass server-rendered search form state to client on initial render of Vue.js search in progress. Exploring rendering list results only to avoid complexities uncovered in hydration and integration.
 * Build the Vue.js search component network client in progress. Initial patch merged. XHR / polyfill next.
 * Add skin version and search version fields to search satisfaction schema started. Thank you, Sam Smith!
 * Core REST API search results are different from Action API results started. Result order confirmed. Thank you, Holger Knust!
 * Other tasks in progress tracked on Web board.

2020-08-10

 * Build the wvui-button component for Vue.js search resolved.
 * Instrumentation and A/B tests requirements.
 * Vue.js sprint planning.
 * Working on client hydration.
 * Work with RelEng to add PipelineBot to Vector engaged with RelEng.
 * It's now possible to load Vue.js and WVUI in Vector. NPM-based workflows are functional as well.
 * [Spike] Identify the component baseline for Vue.js search resolved. Thank you, Volker Eckl!

In progress:


 * Build the Vue.js search component network client in progress. Initial REST implementation is in place but working on IE11 support.
 * Integrate WVUI into Vector for Vue.js search / Add Vue.js v2 runtime-only Core or Vector ResourceLoader module for new Vue.js search patch merged.
 * Add a configuration flag for swapping the client experience for Vue.js search merged. Thank you, Jon Robson!
 * Build a pre-library loading indicator for Vue.js search in progress. WIP patch is up. Designs iterating.
 * Other tasks in progress tracked on Web board.

2020-08-03

 * Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos resolved.
 * Create a bundler configuration for Vue.js search resolved.
 * Published "All code is built: build what you can before you ship". Thank you, Jan Drewniak, Santhosh Thottingal, Daniel Cipoletti, Joe Walsh, Bernd Sitzmann, and Mónica Pinedo Bajo!
 * Cross-posting to Wikimedia Technical Blog is now available. Thank you, Sarah R. Rodlund!
 * Vue.js sprint planning. Waiting for feedback.
 * Core API CORS support and result order now tracked. Thank you, Evan Prodromou!
 * Security team is keeping engaged with review plans. We're trying to keep all dependencies pinned to maximize review time available.
 * Still discussing next steps, most likely PipelineLib, with RelEng.

In progress:
 * Build the Vue.js search component network client in progress. Initial patch in review.
 * Build the wvui-typeahead-suggestion component for Vue.js search in progress. Initial patch is up.
 * Build a pre-library loading indicator for Vue.js search started.
 * Early discussion about constraints and requirements pre- and post-library load. See minutes.
 * Integrate WVUI into Vector for Vue.js search in progress. WIP patches are up for this and the related following task. Waiting on the Vector configuration flag which is waiting on A/B test requirement definition. Working on non-Vector client hydration in the meantime.
 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search in progress.
 * Build the wvui-icon component is looking great. Thank you, Anne Tomasevich, Santhosh Thottingal, and Volker Eckl!
 * Build the wvui-input component for Vue.js search is iterating on compositions.
 * Build the wvui-search-form component for Vue.js search started.
 * Other tasks in progress tracked on Web board.

2020-07-27

 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search discussed in weekly Web meeting. The runtime will be added directly to Vector see task for details.
 * Client error tracking and instrumentation conversations with Jason Linehan, Michael Holloway, and the team formerly known as Product Infrastructure, Mikhail Popov, Megan Neisler, Maya Kampurath, and Product Analytics, and Web.
 * No strong opinions. Try to keep the initial approach simple.
 * [Spike] How should we monitor and debug client errors for Vue.js search? revised.
 * [Spike] What should we instrument in the new Vue.js search experience? revised.
 * Add skin version field to search satisfaction schema tagged.
 * Meeting minutes.
 * Preparing short blog post and other communications. Reached out to the Diff team last week but response is pending.
 * Vue.js development quick start with Jan Drewniak, Bernd Sitzmann, and Nick Ray. See minutes.
 * Build the wvui-button component for Vue.js search in sign off.
 * Core API is targeting next week for CORS support.
 * v0.0.1 published on NPM.
 * Planning for Vue.js sprint.
 * In progress:
 * Integrate WVUI into Vector for Vue.js search started. One patch is in review, three work-in-progress patches are available.
 * Build the wvui-typeahead-suggestion component for Vue.js search started. Patch is in review.
 * Build the wvui-input component for Vue.js search. Anri Bolon is iterating on icon and button compositions. Patches merging soon.
 * Build the Vue.js search component network client in progress.
 * wvui-icon has iconography set revisions. Thanks, Anne Tomasevich! Thank you Santhosh Thottingal and Volker Eckl for continued feedback!
 * Other tasks in progress tracked on Web board.

2020-07-20
Scott Bassett!
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? discussed in Web's weekly developer meeting.
 * Merge feat/search to master for Vue.js search deployment opened.
 * Security review of WVUI and Vector dependencies for Vue.js search is under discussion with Security team. Thank you,
 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search blocked. Exploring ways to unblock the search project. Now awaiting feedback from Roan Kattouw and Timo Tijhof.
 * Security review of Vue 3 opened.
 * Vue 3 release candidate is published.
 * Initial WVUI rolling development releases available on NPM!
 * Typing information is now emitted with the bundles.
 * Numerous fixes and improvements for Vector integration merged. See commit log for details.
 * Planning with Daniel Cipoletti.
 * Client error tracking conversations with Jason Linehan Tuesday. DIP test wikis requested.
 * Enable client error logging for Desktop Improvements Project and Vue.js search opened.
 * Core API will follow up on CORS and result order inquiries.
 * RelEng feedback received. Discussing next steps.
 * PipelineLib is proposed.
 * Preparing a short blog post on our evolving pipeline.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? resolved. Thank you, Jon Robson!
 * Bernd Sitzmann joins. Welcome! Project overview scheduled with Jan Drewniak and Nick Ray.

In progress:
 * wvui-icon has feedback from Santhosh Thottingal, Volker Eckl, and Eric Gardner. Thanks, Anne Tomasevich!
 * Build the wvui-input component for Vue.js search. Anri Bolon is iterating, and adding support for icons and slotting. Initial patch merged. Second patch posted.
 * Design spec for new Vue.js search experience iterating. The current thinking is that component primitives will approximate the current OOUI styles. For example, the search input might be a combination of "TextInputWidget (icon, indicator, label)", "SearchInputWidget (type=search)", and "SelectFileInputWidget (custom button)" OOUI demo examples.
 * Build the wvui-button component for Vue.js search in review. Initial patch merged. Second patch awaiting review.
 * Build the Vue.js search component network client transitioned to Bernd Sitzmann.
 * Other tasks in progress tracked on Web board.

2020-07-13

 * Add TypeScript configuration for Vue.js search resolved.
 * Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos in sign off.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? moved to sign off.
 * Work with RelEng to add PipelineBot to Vector opened.
 * Security review of WVUI and Vector dependencies for Vue.js search opened.
 * Integrate WVUI into Vector for Vue.js search opened.
 * Design spec for new Vue.js search experience has sketches.
 * Add Storybook to Vue.js search moved resolved. Thanks, Jon!
 * Error monitoring / debugging and instrumentation discussion scheduled with Product Infrastructure (Jason Linehan).
 * Create a bundler configuration for Vue.js search moved to sign off.

In progress:


 * Build the wvui-button component for Vue.js search. Iterating with Volker to work out the kinks.
 * Build the wvui-input component for Vue.js search. Initial patch is up.
 * wvui-icon initial patch is up. This will be essential for the broader migration and likely needed for the latest Vue.js search sketches. Thank you, Anne!
 * Other tasks in progress tracked on Web board.

2020-07-06

 * Add bandwidth tests for JavaScript and CSS to Vector and component repo resolved.
 * Anri and Stephen in Vue.js training Tuesday and Friday was a holiday.
 * Create a bundler configuration for Vue.js search. Initial configuration merged.
 * Continued build step discussion.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? will be revised to use a feature branch for search development.
 * Start conversations with RelEng.
 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search still blocked.
 * Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos in review.
 * Miscellaneous scaffolding patches merged.
 * In progress:
 * Build the wvui-button component for Vue.js search. Initial patches are available as drafts.
 * Build the wvui-input component for Vue.js search
 * Other tasks in progress tracked on Web board.

2020-06-29

 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search moved to blocked on others.
 * [Spike] Identify the component baseline for Vue.js search in sign off.
 * Baseline components tasked out.
 * [Spike] Identify the component styling baseline for Vue.js search resolved. Thank you, Volker!
 * Add bandwidth tests for JavaScript and CSS to Vector and component repo in sign off.
 * Parallel collaborations discussed in 2020-06-24 Front-End Standards Group.
 * Miscellaneous scaffolding patches merged.
 * In progress:
 * Configure ESLint and stylelint for Vue.js search development ahead of it being done for all repos
 * Create a bundler configuration for Vue.js search
 * Build the wvui-button component for Vue.js search
 * Other tasks in progress tracked on Web board.

2020-06-22

 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search back in review.
 * BEM will be used for interim CSS naming in [Spike] Identify the component styling baseline for Vue.js search.
 * Add TypeScript configuration for Vue.js search moved to sign off.
 * Add Storybook to Vue.js search moved to sign off.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? stalled.
 * [Spike] Identify the component baseline for Vue.js search in review.
 * OOUI migration guide started.
 * Baseline component task out started.
 * Design spec for new Vue.js search experience started.
 * In progress:
 * [Spike] Identify the component styling baseline for Vue.js search
 * Add bandwidth tests for JavaScript and CSS to Vector and component repo
 * Other tasks in progress tracked on Web board.

2020-06-15

 * [Spike] Should shared components be compiled for Vue.js search? resolved. Furthermore, a build step for the shared library is not controversial among attendees of the 2020-06-10 engineering leaders meeting.
 * [Spike] Build and deploy a Vue.js search prototype to labs resolved. Thanks, Volker!
 * The Core API dependencies for Build the Vue.js search component network client are available. Thanks, Evan and CPT! Holger is working to validate the result order is as expected.
 * Install Jest for unit tests for Vue.js search merged and moved to sign off.
 * Continued build step discourse.
 * A few miscellaneous documentation and development patches for discussions that arose in code review merged.
 * In progress:
 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search
 * [Spike] Identify the component baseline for Vue.js search
 * Add Storybook to Vue.js search
 * Add bandwidth tests for JavaScript and CSS to Vector and component repo
 * Other tasks in progress tracked on Web board.

2020-06-08

 * Name the Vue.js component library
 * Discussed, revised, signed off, and resolved.
 * The new name is "Wikimedia Vue UI" or WVUI.
 * Couple process documentation patches merged.
 * Stephen in performance training this week. Highly recommended.
 * Build a pre-library loading indicator for Vue.js search created.
 * Anri joined and is now onboarding 🎉
 * Bandwidth tests are in progress. Vector patch is in review.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? is in progress.
 * Add Vue.js v2 runtime-only Core ResourceLoader module for new Vue.js search started.
 * Install Jest for unit tests for Vue.js search started.
 * Add Storybook to Vue.js search started.

Up next

 * Drive a decision towards component and style baselines:
 * [Spike] Identify the component baseline for Vue.js search
 * [Spike] Identify the component styling baseline for Vue.js search
 * Other follow-ups:
 * [Spike] How should we load Vue.js and dependencies for Vue.js search?
 * [Spike] How should i18n work for Vue.js search?
 * Other tasks in progress tracked on Web board.

2020-06-01

 * What should we call the library?
 * Pushed out another week by request. Votes due Tuesday.
 * WMDE prototyping resolved.
 * See Holger's conclusions and component prototype.
 * Vue.js discussed at length in 2020-05-27 Front-End Standards Group.
 * Strong interest was shown by attendees in collaborating on common components like Button as soon as possible.
 * Strategies discussed for managing the time sensitive needs of the search deliverable without interfering with the long term objectives of the library.
 * No objections raised for Webpack or TypeScript usage in library itself.
 * Surfaced needs to identify baseline for components and styles.
 * [Spike] Identify the component baseline for Vue.js search
 * [Spike] Identify the component styling baseline for Vue.js search
 * A few PRs merged for NPM and NVM infrastructure in the new library.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search? is in progress.
 * [Spike] Should shared components be compiled for Vue.js search? is in sign off.
 * [Spike] How should we load Vue.js and dependencies for Vue.js search? is being explored.

Up next

 * What should we call the library?
 * Conclude votes and revise naming.
 * Drive a decision towards component and style baselines:
 * [Spike] Identify the component baseline for Vue.js search
 * [Spike] Identify the component styling baseline for Vue.js search
 * Other follow-ups:
 * [Spike] How should we load Vue.js and dependencies for Vue.js search?
 * [Spike] How should i18n work for Vue.js search?
 * Continue [Spike] Build step, ResourceLoader, or both for Vue.js search?
 * Continue adding straightforward scaffolding where possible
 * Sign off:
 * [Spike] Build and deploy a Vue.js search prototype to labs
 * [Spike] Should shared components be compiled for Vue.js search?

2020-05-26
In contrast to the week prior, last week was mostly communications and planning. Some super important and needed conversations are happening. Here are some of the bigger ones.


 * Gerrit v GitHub
 * This will matter less for internal developers if we have a build step. If we don’t have a build step, GitHub may be needed to support our workflows.
 * What should we call the library?
 * No banana-themed names mentioned so far. Is this thing on? Where are my bananologists at?
 * [Spike] Should shared components be compiled for Vue.js search?
 * Positive feedback so far from Web and Roan
 * [Spike] Build step, ResourceLoader, or both for Vue.js search?
 * Holger is digging in.
 * Prototype presentations and shareouts in super-happy-dev-time and Web, #front-end and #readers-web-team Slack channels.
 * Phabricator tickets revised as needed.
 * What does internationalization look like for typeahead search?
 * This is being discussed for the scope of the search project with Santosh on ticket.
 * If you signed up for the training, you should have received notice to save the dates. Paperwork is in the signing process ℅ Adam.
 * Less grid discussion is ongoing.

Up next

 * Patches for NPM, NVM, and readme will be merging soon.
 * [Spike] Build step, ResourceLoader, or both for Vue.js search?
 * [Spike] Should shared components be compiled for Vue.js search?
 * What should be the components baseline? ContentTranslation lib?
 * What should the styling strategy be? wikimedia.ui, mediawiki.ui, something else?

2020-05-18

 * We’ll be closing out the WMDE and labs prototype tasks soon and revising the task tree this week as needed. The prototype is up (of note, see min+gz splits for different chunks). It’s mostly a copy of Santhosh’s base components with an amalgamation of past Web experiences and a lot of experimentation in library form.
 * Santhosh’s base library + grid (called “primitives”) with mediawiki.ui.button compatibility (likely compatible with other mediawiki.ui modules but they haven’t been extracted yet). The chunks are mix and match as needed.
 * Development workflow is promising and it’s nice to work with components in isolation.
 * An Action API client is provided initially. It can be swapped out later.
 * All scripts are TypeScript but compiled to ES5, all styles are Less but compile to CSS.
 * The library is very component-centric. All pieces relevant to a given component are colocated except when shared. The bundler splits the pieces as needed according to the entries and common chunks wanted.
 * Most useful reports are automated as part of the docs NPM script.


 * We set up a provisional repo to collaborate better on experimentation and start scaffolding. Please watch this repo if you wish to participate.
 * Vector testbed integration will be coming. We need to work out how to consume a library in Vector.


 * Even more build step discussions coming. Please participate.

2020-05-11
I’ve aggregated some notes here from Holger, Web, and prototyping as it relates to the search Vue.js project. Share this document with whomever you wish. Comments are welcome but the document itself is a one-off and will not be maintained by Holger or myself. There’s a lot in flight.

Scaffolding

 * A number of projects are using the Vue CLI, notably WMDE and ContentTranslation. This is the Vue equivalent of Create React App which is billed as "Set up a modern web app by running one command." In other words, a zero-config tool. Zero-configs are excellent for prototypes but terrible for scaling. That is, they’re leaky abstractions that are wonderfully free of implementation complexity until the moment they need a non-zero configuration. For example, ejecting the underlying Webpack configuration for the Vue CLI is ~1600 lines for the WMDE’s components and ~1500 lines for ContentTranslation. How do you manage that complexity once you’ve already scaled the functional part of the project? Most of those configurations are unused boilerplate for a diversity of use cases. It is simpler to invest in the underlying tool from the beginning.  For Vue.js search, I recommend we avoid Vue CLI and use the constituent pieces wanted directly. This is the approach I’m taking in my current prototype.  More related Slack discourse on zero-config tools here.
 * Holger has concluded that Vue.js v2 is the best choice for the scope of the search project. Check out his v2 vs v3 mindmap! I’m going to sign this task off soon if no one raises objections. That means add a Vue.js v2 runtime-only Core ResourceLoader module will be ready to work on.
 * Jon and Nick worked with Roan to provide some nice task definitions for swapping out the JavaScript search implementations so we only have to ship one implementation’s payload. This improves our limited byte budget $$$
 * Alex has completed some very nice mocks for the new search header (that’s the location, not the form) and revised the implementation task.
 * Core Platform Team’s new REST API (not RESTBase) is mostly up on the beta cluster. |description&uselang=content&smaxage=300&maxage=300&generator=prefixsearch&pilicense=any&piprop=thumbnail&pithumbsize=160&gpssearch=red&origin=* Compare to the Action API:
 * Only one query parameter needed. Less flexible but designed for search.
 * Semantic API version is in the path.
 * JSON format is assumed.
 * Results are already ordered by relevance (no index property).
 * No pagination. Up to 50 results.
 * Documentation isn’t quite complete. I saw some useful typing information here.
 * The “search pages containing” API looks similar. Just change the title path to page. I’ve got an Action client locally in my prototype that we can swap out if we hit any blockers but the REST API looks like it’s nearly ready for prod. I’m thinking the search component will allow for the client to be passed in but default to the REST API if none is specified. Our work will be covered in “build the Vue.js search component network client.”
 * The WMDE Vue.js component library has been a great reference. Some notes and highlights so far:
 * All Vue v2.
 * All scripts and modules are TypeScript. In my prototype, I’m using the TypeScript compiler for transpiling both TypeScript and general non-ES5 JavaScript. The Popups ES5 linter (now powered by eslint-config-wikimedia) has been an invaluable reference that caught some flaws in my initial config and is now included in the prototype. As I understand it, Core briefly offered ES6 because this linter was missing.
 * Components are class based. In my own experiments, this adds a few kibibytes minified to the overall bundle so I’m currently using `Vue.component` instead to see how that goes.
 * The library depends on a small part of lodash for debouncing. I’d like to avoid that if possible. I think we will need some implementation for throttling the network queries but I don’t know what that will be yet.
 * I couldn't get the source maps to line up correctly in the time I had but it's clocking in at about 13Ki minified JavaScript for four simple components (~600 lines) using the terser minifier on the final build product and 3Ki minified CSS.
 * SCSS is used for styling. I’ll talk about why LESS seems more appealing in the ContentTranslation bullet.
 * Comes with a Docker config. I’m hoping we can defer and use NVM and/or Timo's Fresh if it is essential. Maybe this can be mostly docs.
 * Dumps components out at the entry point which seems nice to me for a shared library.
 * In general, a lot of scaffolding to inform. Holger will be digging into the WMDE prototype task to help identify lessons learned and what we should build upon.
 * More related notes.
 * The ContentTranslation repo is very impressive. Some notes:
 * Wow, what a button! I’ve copied this and part of the icon into my current prototype.
 * There's a lot of LESS needed to make a dazzling button. In my understanding, the approach Santosh used is to make the buttons mediawiki.ui ResourceLoader module compatible (read: almost a file copy). Meaning, I think we may be able to swap the existing LESS RL module instead of shipping the mediawiki.ui module effectively twice. There are also component specific styles so I’m not sure how this works yet but I think we could concatenate uncompiled LESS for the components only (no mediawiki.ui). If possible, I like this approach because we desperately want to minimize bytes shipped for the pilot project which has high interactivity needs and I can't shrink the Vue framework more than the runtime which is ~63 Ki minified by itself(!). As I understand it, the downside is that we can't practically use the wikimedia-ui-base repo which I had been planning to use. I’ll be continuing to explore this.
 * The ContentTranslation JavaScript needed for just the mediawiki.ui is a modest 8.9 Ki minified but the vendor dependencies are 180 Ki (of which I expect a third is Vue itself--I didn't see any source maps). In one of my own Vue CLI-based prototypes, I see a large footprint by Core JS and polyfills but I’d need to look deeper.
 * Jan’s Portals search implementation is one of our best and uses plain JavaScript. It has a lot of legacy browser support that is no longer necessary and, of course, isn’t Vue-based. My previous prototype was largely based on this work. The next will mostly be a mix of Portals and ContentTranslation designed for integration with the dependencies already present in the main namespace.
 * Storybook is about to make a breaking migration (currently beta) that has extensive changes. I’ve started with the beta since it’s all docs anyway, not needed to ship, and I want to avoid acquiring experience in soon-to-be irrelevant tech. There are some nice stories in ContentTranslation already.
 * In general, lots of exploration into how the assets will be divided. Current thinking in the prototype:
 * mediawiki.ui is provided by the library but the Core ResourceLoader module is used in production.
 * Components are completely bundled together as a single entry for search. In the future, different entries may provide different splits.
 * No dependencies except Vue itself at the moment which will be provided by Core.
 * The components are going to be in a separate repo per Nick’s good work and Holger’s sign off. Because the components are in a separate repo, we need to include them in Vector somehow. That means an NPM package, a Git submodule, file copying, or something else. An NPM package seems the most sensible to me as it’s the standard but it implies Webpack in Vector. This question will be answered in build step, ResourceLoader, or both for Vue.js search?
 * Build step discussion is ongoing. Participation is welcome but the effort is championed by Joe Walsh.

Coming soon

 * Sign off of Vue 2 / 3 task.
 * Vue.js training request. Last call to sign up here.
 * Hosted prototype targeting some time next week to help guide some of the work. It will be an amalgamation of the Portals implementation, ContentTranslation, and many other references.
 * Task prioritization today.

Button references
There are many ways to build a button it seems!

Within Wikimedia
https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/ContentTranslation/+/master/app/src/lib/mediawiki.ui/components/MWButton.vue (Santhosh’s button)

https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/+/master/client/data-bridge/src/presentation/components/EventEmittingButton.vue (WMDE’s button?)

https://github.com/egardner/mediawiki-extensions-MachineVision/blob/vue-js/resources/components/base/Button.vue (Anne / Roan’s button?)

https://github.com/wikimedia/mediawiki-extensions-NearbyPages/blob/master/resources/ext.nearby.scripts/Button.vue (NearbyPages)

Outside Wikimedia
https://github.com/ElemeFE/element/blob/dev/packages/button/src/button.vue

https://github.com/myliang/fish-ui/blob/master/src/components/Button.vue

https://github.com/buefy/buefy/blob/dev/src/components/button/Button.vue

https://github.com/museui/muse-ui/blob/master/src/Button/Button.js

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VBtn/VBtn.ts

https://github.com/vuematerial/vue-material/blob/dev/src/components/MdButton/MdButton.vue

https://github.com/view-design/ViewUI/blob/master/src/components/button/button.vue

https://github.com/JosephusPaye/Keen-UI/blob/next/src/UiButton.vue

Within Wikimedia
We love reimplementing search!

https://www.mediawiki.org/wiki/User:JDrewniak_(WMF)/notes/Search_widgets_at_Wikimedia (Jan’s notes--there are so many implementations at Wikimedia!)


 * https://gerrit.wikimedia.org/r/plugins/gitiles/wikimedia/portals/+/master/dev/wikipedia.org/assets/js/ (Jan’s portal implementation)
 * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.searchSuggest/searchSuggest.js
 * https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js

https://phabricator.wikimedia.org/T244392#6041060 (Timo’s notes)

I think Roan did one in Vue I need to find.

Outside Wikimedia
https://github.com/MadimetjaShika/vuetify-google-autocomplete/blob/dev/src/vga/VuetifyGoogleAutocomplete.js

https://vuetifyjs.com/en/components/autocompletes/

https://haltersweb.github.io/Accessibility/autocomplete.html