Design System Team/Vue.js Migration Project Charter

The goal of the Vue.js Migration Project Charter and the people responsible for is to strategize, implement and guide the adoption of the Vue.js framework across the Foundation, while ensuring architectural questions are continually evaluated.

Background

As part of the Wikimedia Foundation’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’s platform evolution recommendations – in particular exploring how to modernize the tools used for front-end development at the Foundation.

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’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.

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
Develop and disperse necessary documentation for standardization purposes
Partner with key stakeholders to make select architectural decisions as it relates specifically to Vue.js migration
Evaluate and monitor adoption success
Track milestones and develop rough timeline for milestone completion
Serve as the owner of the component library and responsible for Design Style Guide’s “Components” and “Patterns” section in agreed collaboration with Product Design team.

Business Case

Support the Foundation’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'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 & Community
Wikimedia Deutschland
Wikimedia Design Team

Summary Project Status

Project start date: September 2019

Estimated project end date: 30 June 2022

Milestone	Status
Vue.js Training or Wikimedia Employees Phase I	Accomplished
Vue Search Widget Case Study	Accomplished
Communications Strategy	In Progress
Teams creating new OOUI widgets using the imperative approach are encouraged to create corresponding Vue.js components having parity, in concert with a UX engineer steeped in the design system	In Progress
An inventory of OOUI widgets and the distribution of the use by widget type is produced	Accomplished
Transition strategy including deprecation of OOUI in sequence to positive evaluation of Search Case Study	In Progress
Develop and capture OKRs	In Progress
Editing team experimentation with Vue.js event handling to determine whether it would be better to replace OOUI’s EventEmitter or move it into VE (or something else).	In Progress
Develop and share long term vision for project amongst stakeholders	In Progress
Vue.js component development as part of the design system	In Progress
Port OOUI Widgets to Vue.js or create a Vue.js compatibility layer for OOUI	In Progress
Integrate Vue.js into MediaWiki and Wikimedia Foundation build and rendering systems	In Progress
Vue.js Training Round II
Technical Writer builds out Vue.js documentation and documentation guidelines for developers and UX Designers in alignment with Design System responsible	Postponed
Develop and share migration paths for products with UI components based on OOUI	In progress
Visual Editor integration with Vue.js	In progress