Extract MobileFrontend UI components to an external well documented library
Closed, DeclinedPublic
Actions

Assigned To

None

Authored By

	• Jhernandez
	Aug 31 2016, 3:55 PM

Description

Blocked on: T155802

Why

MobileFrontend has 1700 lines of asset configuration and an extensive library of UI components that is mixed with the business logic of the frontend application.

By extracting a library we can focus on clear interfaces and abstract away most of the FE configuration to make MobileFrontend more maintainable.

Original request

In T140352#2483264, @phuedx wrote:

Extract core/foundational UI components, document the hell out of them, providing examples of how to use them to build new features, and place them way, way, WAY outside of the standard MobileFrontend hierarchy

Since Joaquin introduced me to it, I always think of Redux when I think of the outstanding documentation

POC

Create npm library (https://www.npmjs.com/package/mfui)
Set up testing and bundling
Extract Cards (http://jsbin.com/fovudo/edit?html,js,output)
Set up examples
Cleanup Cards (unnecessary dependencies and model)
Make list of components to migrate

Component migration list

Component	Source url(s)	Asignee	Status
Cards	extension/Cards	@phuedx	In progress
View	mobile.view/View
Overlay	mobile.overlays/Overlay
...	...	...	...

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		• Jdlrobson	T195473 [GOAL] Invest in the MobileFrontend & MinervaNeue frontend architecture
Resolved		• Jdlrobson	T171000 [EPIC] Minerva works independently of MobileFrontend
Resolved		• Jdlrobson	T166905 [EPIC] Talk about and improve our frontend code architecture
Declined		None	T144402 Extract MobileFrontend UI components to an external well documented library
Resolved		• Jdlrobson	T144936 [Spike 2hrs]: Thoughts around librarizing MobileFrontend UI components?
Resolved		phuedx	T155799 mobile.pagelist JS code should be part of mobile.startup
Resolved		• Jdlrobson	T155801 Merge mobile.toast into mobile.startup
Resolved		• Jdlrobson	T155802 [EPIC] Build entire mobile.startup module using webpack bundler
Duplicate	Spike	None	T156188 [Spike] Evaluate whether JavaScript RL modules without side effects loaded on startup should be bundled into a single resource
Resolved		Jdrewniak	T153473 [Spike, 8hrs] How do we organize and manage our ResourceLoader modules?
Declined		None	T167713 [EPIC] MinervaNeue's starter modules should be grouped by page not feature
Resolved		• Jdlrobson	T173454 Lazy loading code should be skin agnostic
Declined		None	T190699 Repackage Minerva's JavaScript code with webpack
Resolved		• Jhernandez	T156333 Technical: Use bundler to generate Popups JavaScript code
Resolved		Jdrewniak	T199452 Introduce webpack config/node-qunit and port ModuleLoader
Resolved		pmiazga	T202742 [subtask] Add bundlesize tests
Resolved		Jdrewniak	T203100 Continue webpack + test transition of mobile.startup
Resolved		• Jdlrobson	T202026 Report client-side JavaScript errors in MobileFrontend practically
Resolved		Jdrewniak	T206169 Complete webpack migration of mobile.startup

Event Timeline

• Jhernandez created this task.Aug 31 2016, 3:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 31 2016, 3:55 PM

@phuedx @Jdlrobson Would creating a npm library kind of like oojs did make sense?

• Jhernandez mentioned this in T140352: [EPIC] Create proposed technical goals.Aug 31 2016, 3:58 PM

Yes. I thought I raised a bug for this a while ago.
I'd like to see at least all the basic components in mobile.startup, mobile.oo, mobile.overlays and mobile.view pulled into as separate library that depends on OOjs.
We can give it a random name e.g. jigsaw.js and then I'd then like to see this library export all components like so:

module.exports = {
Overlay: Overlay,
View: View,
...
};

We'd need to drop the use of M.define in those libraries and work out how to load templates without introducing the mw.template.get dependency which imo is a good step in the right direction.

We should be wary of increased JS payload in doing this.

• Jhernandez added a project: Epic.Sep 7 2016, 3:08 PM

• Jhernandez moved this task from Incoming to Epics/Goals on the Readers-Web-Backlog board.

• Jhernandez mentioned this in T144936: [Spike 2hrs]: Thoughts around librarizing MobileFrontend UI components?.

• Jhernandez created subtask T144936: [Spike 2hrs]: Thoughts around librarizing MobileFrontend UI components?.

• Jhernandez updated the task description. (Show Details)Oct 7 2016, 8:51 AM

phuedx updated the task description. (Show Details)Oct 7 2016, 10:25 AM

How can I help with this initiative?

@Jdlrobson I've added you to mfui, some help with the prs review would be great.

We can chat later about the repo and figure out next steps.

@bmansurov from your email (sorry I didn't answer before), this is an Epic I want us to work on. I've added that tag hoping is the right one. Let me know.