User:Volker E. (WMF)/sandbox/Vue.js Migration Project Charter

As part of the Wikimedia Foundation&rsquo;s platform evolution program, the Technology and Product departments assembled a cross-departmental Frontend Architecture Working Group (FAWG). This group was tasked with carrying out the Foundation&rsquo;s platform evolution recommendations – in particular exploring how to modernize the tools used for front-end development at the Foundation.

Goal
Foundation projects still rely on the same approach to front-end development that they did almost a decade ago: most user interface elements are built in PHP (often without relying on templating languages), and enhanced in the browser using jQuery and our own in-house frameworks (OOjs and MobileFrontend) and UI component library (OOUI). There are several pain points associated with this way of working in 2019.

As part of its work, the FAWG recommended that the Foundation should adopt a modern, widely-used JavaScript framework for the purpose of developing user interfaces within its projects. The working group selected the open-source Vue.js framework as the best match for the Foundation&rsquo;s requirements right now, as well as for the foreseeable future. The adoption of a modern front end JS framework will help to pave the way for further architectural improvements in the future. Further understanding of the Vue.js selection rationale can be found in the corresponding RFC.

The goal is to strategize, implement and oversee the thoughtful adoption of the Vue.js framework across the Foundation, while ensuring architectural questions are continually evaluated.

Objectives
 Improve and modernize experience for developers  Improve experience for current and potentially future users of our projects Provide standardization for front-end developers Address and try to avoid current pain points of monolithic component anti-patterns as defined in T225453 exemplified on MobileFrontend

In Scope
 Develop and communicate strategy for Vue.js adoption across Foundation  Track and escalate risks of adoption  Serve as central communication point for Vue.js adoption related activity  Identify key stakeholders and provide them with updates on adoption</li> Develop and disperse necessary documentation for standardization purposes</li> Partner with key stakeholders to make select architectural decisions as it relates specifically to Vue.js migration</li> Evaluate and monitor adoption success</li> Track milestones and develop rough timeline for milestone completion</li> Serve as the owner of the component library and responsible for Design Style Guide&rsquo;s &ldquo;Components&rdquo; and &ldquo;Patterns&rdquo; section in agreed collaboration with Product Design team.</li> </ul>

Business Case
Support the Foundation&rsquo;s Medium Term Plan Platform Evolution Pillar. The business case is further laid out in Phabricator task T241180.

Constraints

 * Limited resourcing due to COVID-19
 * Potential projects that are unable to migrate
 * General resource limitations, due to non-profit organisation nature

Assumptions

 * Teams will be provided the time to migrate as determined by Vue.js migration team
 * Resourcing budgeted to handle Tech Debt created during initiation/prototyping phase of project
 * Support provided by the Core Platform Team
 * Vue.js implementation and migration remains a priority within the Foundation
 * Team collaboration on shared components library is precondition
 * The Framework continues to be an available option
 * Vue.js v3 will be our target and if things are built in v2 now they will be converted as soon as it&#39;s available

Deliverables

 * Components Library
 * Documentation
 * Developer Training
 * Communications Strategy and Oversight
 * Adoption Strategy
 * Design Style Guide compatible inventory of components and patterns
 * OOUI Deprecation and Migration path

Stakeholders

 * Product Department Hiring Manager / Engineering Director
 * Technology Department Hiring Manager / Architecture VP
 * Chief Product Officer
 * Chief Technology Officer
 * Foundation Teams
 * Editing
 * Web
 * Growth
 * Structured Data
 * Language
 * Inuka
 * Core Platform
 * Fundraising Tech
 * Scoring Platform
 * Users of our Projects
 * Developers in the Foundation &amp; Community
 * Wikimedia Deutschland
 * Wikimedia Design Team

Summary Project Status
Project start date: September 2019

Estimated project end date: 30 June 2022

Referencess
 Search Widget Case Study Phabricator Epic</li> Explore porting MachineVision front-end to Vue.js [Spike]</li> Wikibase Vue.js components Storybook</li> Wikimedia Design Style Guide</li> Vue.js Phabricator Workboard</li> Vue.js on MediaWiki.org</li> Vue Roadmap at Github</li> </ul>