Background

One of the motivators of moving MobileFrontend off webpack is to make use of ES6 classes without Webpack transpiling that code to ES5. This would also allow us to remove the dependency on OOjs and the mfExtend utility function for class inheritance.

This will reduce the code we ship to end users and make the code easier to read and maintain.

User story

• Add user story in the format: “As a [persona], I want to [X], so that [Y]”

Requirements

Replace the use of OOjs and the mfExtend utility function for class inheritance in MobileFrontend with ES6 classes. This change should reduce the code footprint shipped to end users and improve code readability and maintainability without relying on Webpack transpilation.

BDD

Feature: ES6 Class Implementation in MobileFrontend  

  Scenario: Verify MobileFrontend functionality after migration to ES6 classes  
    Given I am a user on the mobile site  
    When I perform key workflows  
    Then all workflows should function correctly without errors in the JS console

Test Steps

Test Case 1: Verify MobileFrontend Functionality with ES6 Classes

1. Navigate to the mobile version of the site (e.g., https://en.m.wikipedia.org).
2. Perform the following workflows:

• Edit a page.
• Select a language.
• Search for a term using the search bar.
• Collapse and expand sections on a page.
• Click on an image to view the Media Viewer.
• Click the watchstar (as both anonymous and logged-in users).
• View the Settings page.
• Check Notifications.

3. Open the browser’s developer console during each workflow.
4. AC1: Ensure no JavaScript errors are present in the console during any of the workflows.
5. AC2: Verify all workflows function correctly without regressions.

Design

• Add mockups and design requirements

Acceptance criteria

• Migrate mobile.editor.overlay to ES6 classes
• Migrate other modules to use ES6 classes
• Make sure mfExtend method is removed from MobileFrontend.

Communication criteria - does this need an announcement or discussion?

• Add communication criteria

Rollback plan

• What is the rollback plan in production for this task if something goes wrong?

Potential impact to Growth, Minerva and ExternalGuidance. Given the extended testing period there should be unlikely to be any serious issues in production on key products, but if those are found there are two options

1. Preferably patch the broken extension. Switching ES5 functions to ES6 classes should be relatively straightforward (VisualCodeStudio has a macro for this)
2. If needed (e.g. issues of a similar nature to T381496) you can safely cherry pick https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/1100873 to wmf.8 until the broken feature is patched.

This task was created by Version 1.2.0 of the Web team task template using phabulous