Page MenuHomePhabricator

Introduce webpack config/node-qunit and port ModuleLoader
Closed, ResolvedPublic8 Story Points

Description

Thus begins the technical part of MobileFrontend's webpack adventure. We need to setup the foundations of the next few quarters of work... exciting!

Precursors

  • T197639 has been completed.
  • Tech lead (or substitute) has reviewed and amended this card to reflect output.
  • Existing code coverage is documented on mediawiki.org project page -- Stephen's note: invalid; see T197637

Plan

Based on the initial exploratory work (https://gerrit.wikimedia.org/r/406782) and hopefully confirmed by T197639, we will begin by porting the module.startup JavaScript starting with modules.js and its tests to Webpack. Take the easy road wherever possible by striving for 1:1 correspondence with the Webpack build product and the ResourceLoader inputs. E.g., after this task is completed, extension.json may change from:

			"scripts": [
				"resources/mobile.startup/modules.js",

				"resources/mobile.startup/oo-extend.js",
				"resources/mobile.startup/util.js",
				"resources/mobile.startup/View.js",
				"resources/mobile.startup/browser.js",
				"resources/mobile.startup/cache.js",
				"resources/mobile.startup/time.js",
				"resources/mobile.startup/context.js",
				"resources/mobile.startup/user.js",
				"resources/mobile.startup/PageGateway.js",
				"resources/mobile.startup/Anchor.js",
				"resources/mobile.startup/Button.js",
				"resources/mobile.startup/Icon.js",
				"resources/mobile.startup/icons.js",
				"resources/mobile.startup/Panel.js",
				"resources/mobile.startup/Section.js",
				"resources/mobile.startup/Thumbnail.js",
				"resources/mobile.startup/Page.js",
				"resources/mobile.startup/Skin.js",
				"resources/mobile.startup/OverlayManager.js",
				"resources/mobile.startup/Overlay.js",
				"resources/mobile.startup/LoadingOverlay.js",
				"resources/mobile.startup/rlModuleLoader.js",
				"resources/mobile.startup/Drawer.js",
				"resources/mobile.startup/CtaDrawer.js",
				"resources/mobile.startup/PageList.js",
				"resources/mobile.startup/toast.js"
			]

To keep things simple, (since configuring webpack is hard), this task can be considered done when modules.js has been replaced by a webpack bundle.

e.g.

			"scripts": [
				"resources/mobile.startup/dist/index.js",

				"resources/mobile.startup/oo-extend.js",
				"resources/mobile.startup/util.js",
				"resources/mobile.startup/View.js",
				"resources/mobile.startup/browser.js",
				"resources/mobile.startup/cache.js",
				"resources/mobile.startup/time.js",
				"resources/mobile.startup/context.js",
				"resources/mobile.startup/user.js",
				"resources/mobile.startup/PageGateway.js",
				"resources/mobile.startup/Anchor.js",
				"resources/mobile.startup/Button.js",
				"resources/mobile.startup/Icon.js",
				"resources/mobile.startup/icons.js",
				"resources/mobile.startup/Panel.js",
				"resources/mobile.startup/Section.js",
				"resources/mobile.startup/Thumbnail.js",
				"resources/mobile.startup/Page.js",
				"resources/mobile.startup/Skin.js",
				"resources/mobile.startup/OverlayManager.js",
				"resources/mobile.startup/Overlay.js",
				"resources/mobile.startup/LoadingOverlay.js",
				"resources/mobile.startup/rlModuleLoader.js",
				"resources/mobile.startup/Drawer.js",
				"resources/mobile.startup/CtaDrawer.js",
				"resources/mobile.startup/PageList.js",
				"resources/mobile.startup/toast.js"
			]

After building this one module, we should be able to get a better estimate about whether it's feasible to tackle the whole module in one task. Long term we'll aim to get to:

e.g.

			"scripts": [
				"resources/mobile.startup/dist/index.js"
			]

Acceptance criteria

  • Does MobileFrontend have a working version of the latest version of webpack?
  • Does the resulting code get bundled into the mobile.startup module?
  • Are the tests for the ModuleLoader working in headless node-qunit?
  • Is MobileFrontend working just as it did before? Can Minerva still access an instance of the ModuleLoader?
  • Is one copy of oo-js being loaded (the one inside core?)

Developer notes

Although longterm we may not need the ModuleLoader which provides M.define and M.require functionality, we will need to keep it around during the port given many things depend on it. There's a great irony in porting a ModuleLoader to a system where one of the benefits allows module loading. Enjoy.

Note, the POC loaded oojs from npm. Don't do that as we'll be shipping 2 copies of OOjs.

Note, the POC uses webpack 3. Webpack 4 makes more sense now. Let's start of as shiny as possible.

Sign off steps

  • Revisit T155802 and rewrite/unstall it based on feedback from the developer working this task on how long it took.
  • Record the change in JS size

Related Objects

StatusAssignedTask
ResolvedJdlrobson
OpenNone
ResolvedJdlrobson
ResolvedJdlrobson
OpenNone
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedABorbaWMF
OpenJdlrobson
ResolvedJdlrobson
StalledNone
ResolvedJdlrobson
OpenNone
ResolvedJdlrobson
OpenNone
OpenNone
OpenNone
OpenNone
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdlrobson
ResolvedJdrewniak
Resolvedpmiazga

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 12 2018, 3:16 PM
Jdlrobson triaged this task as Normal priority.Jul 12 2018, 11:02 PM
ovasileva set the point value for this task to 8.Jul 17 2018, 4:44 PM
Jdlrobson updated the task description. (Show Details)Jul 27 2018, 9:43 AM
Jdlrobson updated the task description. (Show Details)Aug 3 2018, 2:45 AM
Jdlrobson updated the task description. (Show Details)

@Niedzielski made one edit. Based on the work/struggle we had with Selenium browser tests and given the 8 points was originally based on the one file, I want to scope this as tightly as possible (one file). Hopefully that 8 proves to be a bad estimate and we can fast-track T155802 but let's limit the risk here. Sound good?

ovasileva raised the priority of this task from Normal to High.Aug 9 2018, 2:16 PM
Jdlrobson updated the task description. (Show Details)Aug 9 2018, 8:55 PM
Niedzielski moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.
Niedzielski removed Niedzielski as the assignee of this task.Aug 17 2018, 4:57 PM
Niedzielski moved this task from Doing to To Do on the Readers-Web-Kanbanana-Board-Old board.

I'm out Monday and Tuesday and working on page issues right now. Will try to pick up when I get back but feel free to engage.

Niedzielski moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Change 455014 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] WIP: introduce Webpack bundling

https://gerrit.wikimedia.org/r/455014

@Jdlrobson, I'm updating this task based on work done to port modules.js instead of rlModuleLoader.js as the former is one of the simplest modules in MobileFrontend and the latter has a long chain of ordered dependencies.

Niedzielski updated the task description. (Show Details)Aug 23 2018, 10:08 PM

@Jdlrobson, I'm updating this task based on work done to port modules.js instead of rlModuleLoader.js as the former is one of the simplest modules in MobileFrontend and the latter has a long chain of ordered dependencies.

No problem. Looks like that was a typo anyhow since the rest of the task talks about modules.js

Change 455052 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] WIP: introduce headless QUnit tests

https://gerrit.wikimedia.org/r/455052

Change 455243 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] Hygiene: add gzipped minified bundle size tests

https://gerrit.wikimedia.org/r/455243

TheDJ added a subscriber: TheDJ.Aug 29 2018, 6:19 AM

Change 455014 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Hygiene: introduce Webpack bundling

https://gerrit.wikimedia.org/r/455014

Change 455243 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Hygiene: add gzipped minified bundle size tests

https://gerrit.wikimedia.org/r/455243

This can probably skip QA as I'd hope QA of other features would highlight any issues.
We can do a general QA if necessary.

Change 457967 had a related patch set uploaded (by Jdlrobson; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] Hygiene: introduce headless QUnit tests

https://gerrit.wikimedia.org/r/457967

Change 457967 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Hygiene: headless QUnit tests compatible with Special:JavascriptTest

https://gerrit.wikimedia.org/r/457967

Niedzielski added a subscriber: Jdrewniak.

@Jdrewniak, would you mind signing off?

Jdrewniak closed this task as Resolved.Sep 11 2018, 5:04 PM