Page MenuHomePhabricator

Audit JS and CSS in Android App
Closed, ResolvedPublic

Description

Very important: also investigate adding MobileFrontend's lazy loading images implementation and, assuming it's practical, add tasks for:

  • Copying or consolidating lazy load JavaScript some place (either in wikimedia-page-library itself or, if necessary, a new place to avoid a cyclical dependency between the page library and MobileFrontend)
  • Integrating with iOS, Android, and (if consolidating) MobileFrontend
  • Measuring the performance on iOS, Android, and MobileFrontend (just make sure the last report is reproducible)

Compile a list of:

  • JS that is not in the WWW folder (in source): none
  • JS that is the same as iOS; also consider lifecycles and API
  • JS that is different than iOS
  • CSS that is the same as iOS
  • CSS that is different than iOS: iOS actually uses LESS and supplies override styles locally; Android keeps overrides in an extension
  • HTML that is the same as iOS: index.html and preview.html are about the same
  • HTML that is different than iOS: very minor differences for static content; iOS loading uses one step file loading, Android uses multistep section loading over the JS bridge

This list will be used to discus potential first action steps for consolidation.

Features for consideration:

  • Link preview formatting
  • Collapsible elements
  • High resolution image transformation

Questions:

  • How does iOS order sections for loading into the WebView? How does it cancel loading? iOS saves HTML to a file and then tells the WebView to load it
  • How does iOS mix native components with the WebView? What are they? On Android, we have some fancy scroll logic for the lead image, title, and read more. We also have some integration for edit here and share a fact
  • Does iOS have bridge message size limits?
  • What is iOS currently using the Content Service over MediaWiki API for? How does this affect the JS library? iOS uses MediaWiki

Event Timeline

MobileFrontend's lazy loading images implementation

@Fjalapeno, I surveyed this code briefly and ran some questions by Jon. Here's the summary:

The transform to add noscript tags and placeholders is all PHP service-side code. It could be exposed on the Mobile View API but consider:

  • -Exposing the functionality on Mobile View may not coincide with the planned page content flows and be incompatiable the current Content Service implementation on Android.
  • +Code is shared and no rewrite cost is incurred.
  • +We may be able to share other transforms like paragraph relocation (currently an Android JavaScript implementation) and lazy citation loading.

We could also rewrite the transform in JavaScript, use it client side in the interim, and _hope_ that the Page Content Service will eventually use it.

The JavaScript that actually does the lazy loading (converting placeholders back to images) depends on jQuery. This dependency would either need to be added to both apps or the code ported to plain JavaScript (in addition to the normal amount of refactoring needed for transplanting code).

In general, we can't really share any JavaScript with MobileFrontend right now. This won't be practical until webpack bundling is available (blocked by lots of things according to Jon).

If we move forward, I propose we rewrite the PHP transform in JavaScript and port the placeholder to image transform to not require jQuery. I'm not sure on priorities so let me know if you'd like me to create some tasks for this effort, return to consolidation work, or discuss further!

@Niedzielski thanks for the breakdown…

Your assessment seems on point to me. I think rewriting in JS seems like the way to go as well. Because looking ahead:

  • The page-library absolutely will be used either by the Page Content Service directly or by the clients that use the PCS.
  • The efforts by the web team for modernizing the frontend are moving towards webpack. So while it may take a while, when rewritten the PWA will also be using the PCS (and by extension page-library)

I would say from here, make a task for porting to JS as you suggested and estimate it. Then lets discus how you want to prioritize it. Sound like a plan?

@Fjalapeno, cool, I've broken up the work into subtasks of T164433. Monte and I will work to estimate it.

After discussion with Monte, we're closing T152991, T155695, T155693. Everything presently actionable is tasked in wikimedia-page-library / wikimedia-page-library-tshirt except T164313 which is still being reviewed.