Change Details

The new Vue.js search experience also marks the beginning of a Wikimedia Vue.js component library. Components therein have great aspirations including that they be: - Efficient to develop, meeting the expectations of modern developers, and encouraging of a welcoming culture. - Sharable and reusable in any context within and without Wikimedia in development and production. - Easily composable in any combination. - Responsive. - Performant both in terms of bandwidth and computationally. - Accessible (including screen readers and keyboards). - Localizable. - Tested. - Renderable in any context within and without a browser. - Documented. - With accurately typed, well-defined, and semantically versioned APIs. - Nicely styled. - Intelligently divided with explicit dependencies to serve different use cases. - Strongly patterned, idiomatic, and intentional; components are designed consistently and cohesively. - Favoring composition over inheritance. Many of these goals were identified as shortcomings of T225453 or requirements in T225572, both of which were inputs to and a supporting rationale for [[ https://phabricator.wikimedia.org/T241180 | Vue.js RFC itself ]]. These guidelines are not impossible and, in the long-term, are not merely aspirational but necessary. The initial components for the new Vue.js search experience will probably fall short but nevertheless, we do not wish to repeat past mistakes and hold these objectives dear. An initial decision that greatly impacts our ability to meet these goals is language. This (currently thoroughly incomplete) task explores the tradeoffs of uncompiled and compiled options within the remits of [[ https://www.mediawiki.org/wiki/Wikimedia_Engineering_Architecture_Principles | responsible and deliberate experimentation ]] that [[ https://phabricator.wikimedia.org/T244392 | the broader case study objectives ]] this project is expected to meet to be considered successful. This decisioning is partly dependent on the outcome of T249350 and it's implementation is informed by T249051. == Uncompiled ES5 - Components built in ES5 may appear dated but are universally usable in any context. - JSDocs provide a more verbose and limited form of type checking but are more prevalent in Wikimedia currently. == Compiled language - As is the case for T249350, Web can build on past experience to help establish improved patterns for the broader organization (e.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/a63a1cf/webpack.config.js | Popups ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/+/01d3f48/webpack.config.js | MobileFrontend ]], and [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/ea2bcd4/.storybook/webpack.config.js | Vector Storybook ]]). The tradeoffs are similar too, and Web would be in a position to share expertise outwards. - ES6 and TypeScript better meet the expectations of modern developers that would like to participate. - As noted for ES5, JSDocs can also be used for ES6. TypeScript provides a significantly richer and more accurate typing experience that is also less verbose. - An improved TypeScript experience via [[ https://vue-composition-api-rfc.netlify.com/#better-type-inference | the composition API ]] is one of the prominent major new features in Vue 3 and may be expected by third-party or incoming Vue.js developers. - As informed by T249350, the output consumed in MediaWiki is an NPM package or compiled output. Since the output is ES5, it works everywhere. - WMDE is using TypeScript extensively for their components and Vue.js work. Using TypeScript may allow many existing components to be reused and avoid significant technical debt ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/client/data-bridge/ | ref 0 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/view/lib/wikibase-tainted-ref/ | ref 1 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/wikibase/termbox%2B/master | ref 2 ]]) == Acceptance criteria - [] A decision is made for the Vue.js search project. - [] Feedback on this decision is solicited in the [[ https://phabricator.wikimedia.org/T249426 | developer survey]]. (This means adding some nicely formed question(s) to the survey task.) - [] Any new task(s) needed to support the decision are made. - [] [[ https://www.mediawiki.org/wiki/Vue.js | Documentation on wiki ]] is revised with any learnings.

The new Vue.js search experience also marks the beginning of a Wikimedia Vue.js component library. Components therein have great aspirations including that they be: - Efficient to develop, meeting the expectations of modern developers, and encouraging of a welcoming culture. - Sharable and reusable in any context within and without Wikimedia in development and production. - Easily composable in any combination. - Responsive. - Performant both in terms of bandwidth and computationally. - Accessible (including screen readers and keyboards). - Localizable. - Tested. - Renderable in any context within and without a browser. - Documented. - With accurately typed, well-defined, and semantically versioned APIs. - Nicely styled. - Intelligently divided with explicit dependencies to serve different use cases. - Strongly patterned, idiomatic, and intentional; components are designed consistently and cohesively. - Favoring composition over inheritance. Many of these goals were identified as shortcomings of T225453 or requirements in T225572, both of which were inputs to and a supporting rationale for [[ https://phabricator.wikimedia.org/T241180 | Vue.js RFC itself ]]. These guidelines are not impossible and, in the long-term, are not merely aspirational but necessary. The initial components for the new Vue.js search experience will probably fall short but nevertheless, we do not wish to repeat past mistakes and hold these objectives dear. An initial decision that greatly impacts our ability to meet these goals is language. This (currently thoroughly incomplete) task explores the tradeoffs of uncompiled and compiled options within the remits of [[ https://www.mediawiki.org/wiki/Wikimedia_Engineering_Architecture_Principles | responsible, deliberate, and isolated experimentation ]] that [[ https://phabricator.wikimedia.org/T244392 | the broader case study objectives ]] this project is expected to meet to be considered successful. This decisioning is partly dependent on the outcome of T249350 and it's implementation is informed by T249051. == Uncompiled ES5 - Components built in ES5 may appear dated but are universally usable in any context. - JSDocs provide a more verbose and limited form of type checking but are more prevalent in Wikimedia currently. == Compiled language - As is the case for T249350, Web can build on past experience to help establish improved patterns for the broader organization (e.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/a63a1cf/webpack.config.js | Popups ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/+/01d3f48/webpack.config.js | MobileFrontend ]], and [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/ea2bcd4/.storybook/webpack.config.js | Vector Storybook ]]). The tradeoffs are similar too, and Web would be in a position to share expertise outwards. Popups most of all has some of Web's best code and this is due in part to its modern language choice and intentionally progressive design. We should continue to build on that work. - ES6 and TypeScript better meet the expectations of modern developers that would like to participate. - As noted for ES5, JSDocs can also be used for ES6. TypeScript provides a significantly richer and more accurate typing experience that is also less verbose. - An improved TypeScript experience via [[ https://vue-composition-api-rfc.netlify.com/#better-type-inference | the composition API ]] is one of the prominent major new features in Vue 3 and may be expected by third-party or incoming Vue.js developers. - As informed by T249350, the output consumed in MediaWiki is an NPM package or compiled output. Since the output is ES5, it works everywhere. - WMDE is using TypeScript extensively for their components and Vue.js work. Using TypeScript may allow many existing components to be reused and avoid significant technical debt ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/client/data-bridge/ | ref 0 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/view/lib/wikibase-tainted-ref/ | ref 1 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/wikibase/termbox%2B/master | ref 2 ]]) - Vector already has the functionality for adding TypeScript as wanted. If a new repo is used, this configuration could easily be replicated. == Acceptance criteria - [] A decision is made for the Vue.js search project. - [] Feedback on this decision is solicited in the [[ https://phabricator.wikimedia.org/T249426 | developer survey]]. (This means adding some nicely formed question(s) to the survey task.) - [] Any new task(s) needed to support the decision are made. - [] [[ https://www.mediawiki.org/wiki/Vue.js | Documentation on wiki ]] is revised with any learnings.

The new Vue.js search experience also marks the beginning of a Wikimedia Vue.js component library. Components therein have great aspirations including that they be: - Efficient to develop, meeting the expectations of modern developers, and encouraging of a welcoming culture. - Sharable and reusable in any context within and without Wikimedia in development and production. - Easily composable in any combination. - Responsive. - Performant both in terms of bandwidth and computationally. - Accessible (including screen readers and keyboards). - Localizable. - Tested. - Renderable in any context within and without a browser. - Documented. - With accurately typed, well-defined, and semantically versioned APIs. - Nicely styled. - Intelligently divided with explicit dependencies to serve different use cases. - Strongly patterned, idiomatic, and intentional; components are designed consistently and cohesively. - Favoring composition over inheritance. Many of these goals were identified as shortcomings of T225453 or requirements in T225572, both of which were inputs to and a supporting rationale for [[ https://phabricator.wikimedia.org/T241180 | Vue.js RFC itself ]]. These guidelines are not impossible and, in the long-term, are not merely aspirational but necessary. The initial components for the new Vue.js search experience will probably fall short but nevertheless, we do not wish to repeat past mistakes and hold these objectives dear. An initial decision that greatly impacts our ability to meet these goals is language. This (currently thoroughly incomplete) task explores the tradeoffs of uncompiled and compiled options within the remits of [[ https://www.mediawiki.org/wiki/Wikimedia_Engineering_Architecture_Principles | responsible and, deliberateate, and isolated experimentation ]] that [[ https://phabricator.wikimedia.org/T244392 | the broader case study objectives ]] this project is expected to meet to be considered successful. This decisioning is partly dependent on the outcome of T249350 and it's implementation is informed by T249051. == Uncompiled ES5 - Components built in ES5 may appear dated but are universally usable in any context. - JSDocs provide a more verbose and limited form of type checking but are more prevalent in Wikimedia currently. == Compiled language - As is the case for T249350, Web can build on past experience to help establish improved patterns for the broader organization (e.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/a63a1cf/webpack.config.js | Popups ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/+/01d3f48/webpack.config.js | MobileFrontend ]], and [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/ea2bcd4/.storybook/webpack.config.js | Vector Storybook ]]). The tradeoffs are similar too, and Web would be in a position to share expertise outwards. Popups most of all has some of Web's best code and this is due in part to its modern language choice and intentionally progressive design. We should continue to build on that work. - ES6 and TypeScript better meet the expectations of modern developers that would like to participate. - As noted for ES5, JSDocs can also be used for ES6. TypeScript provides a significantly richer and more accurate typing experience that is also less verbose. - An improved TypeScript experience via [[ https://vue-composition-api-rfc.netlify.com/#better-type-inference | the composition API ]] is one of the prominent major new features in Vue 3 and may be expected by third-party or incoming Vue.js developers. - As informed by T249350, the output consumed in MediaWiki is an NPM package or compiled output. Since the output is ES5, it works everywhere. - WMDE is using TypeScript extensively for their components and Vue.js work. Using TypeScript may allow many existing components to be reused and avoid significant technical debt ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/client/data-bridge/ | ref 0 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Wikibase/%2B/master/view/lib/wikibase-tainted-ref/ | ref 1 ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/wikibase/termbox%2B/master | ref 2 ]]) - Vector already has the functionality for adding TypeScript as wanted. If a new repo is used, this configuration could easily be replicated. == Acceptance criteria - [] A decision is made for the Vue.js search project. - [] Feedback on this decision is solicited in the [[ https://phabricator.wikimedia.org/T249426 | developer survey]]. (This means adding some nicely formed question(s) to the survey task.) - [] Any new task(s) needed to support the decision are made. - [] [[ https://www.mediawiki.org/wiki/Vue.js | Documentation on wiki ]] is revised with any learnings.