Generate a report detailing where inside MobileFrontend jQuery is used and what it is used for.
e.g event binding, hiding, updating properties, dom manipulation, constructing elements
This will allow us to explore smaller versions of jQuery/jQuery 2 and componetising the mediawiki library.
Output:
Table on wiki page
Module name | Uses jQuery (yes/no) | How uses jQuery...
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| POC: Use jquery 3 in mobile target mode | mediawiki/core | master | +10 K -4 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Duplicate | • Jhernandez | T104432 [EPIC]: Improve mobile site performance | |||
| Resolved | Jdlrobson | T100254 Spike: Document all uses of jQuery and mediawiki (mw) in mobile. |
Change 314771 had a related patch set uploaded (by Jdlrobson):
POC: Use jquery 3 in mobile target mode
I submitted a POC that switches the mobile site to jQuery 3. It works as expected and when you consult the browser matrix it is no surprise - the api of 3 is consistent with 1, the browsers it supports are different and more in line with expectations for our mobile support.
Scanning MobileFrontend usages of jQuery is interesting. We mostly seem to use it for locating elements, binding events, setting attributes and adding classes and using each.
It's worth noting however the ajax capabilities of jQuery are tied quite strongly to all our api requests. Removing jQuery at this point seems like a lot of work, but upgrading to jQuery 3 seems pretty achievable.
Interesting things to think about is our show/hide usage. It's pretty high and it can cause performance issues. Worth looking a little closer and seeing if we can remove them?
ag "\\$\([^\)]*\)" resources/ | wc -l
309
ag "\.on\(" resources/ | wc -l
89
ag "\.attr\(" resources/ | wc -l
63
ag "\.addClass\(" resources/ | wc -l
44
ag "\.each\(" resources/ | wc -l
44
ag "\.hide\(\)" resources/ | wc -l
41
ag "\.find" resources/ | wc -l
45
ag "\.removeClass\(" resources/ | wc -l
39
ag "\.data\(" resources/ | wc -l
30
ag "\.show\(\)" resources/ | wc -l
29
ag "\.remove\(" resources/ | wc -l
24
ag "\.prop\(" resources/ | wc -l
23
ag "\.text\(" resources/ | wc -l
22
ag "\.off\(" resources/ | wc -l
22
ag "\.appendTo\(" resources/ | wc -l
18
ag "\.css\(" resources/ | wc -l
16
ag "\.api\." resources/ | wc -l
16
ag "\.height\(\)" resources/ | wc -l
15
ag "\.html\(" resources/ | wc -l
13
ag "\.hasClass\(" resources/ | wc -l
11
ag "\.scrollTop\(\)" resources/ | wc -l
10
ag "api\.get\(" resources/ | wc -l
9
ag "\.toggleClass\(" resources/ | wc -l
7
ag "\.closest\(" resources/ | wc -l
7
ag "\.one\(" resources/ | wc -l
6
ag "\.outerHeight\(\)" resources/ | wc -l
6
ag "\.parent\(\)" resources/ | wc -l
5
ag "\.detach\(\)" resources/ | wc -l
5
ag "\.parents\(" resources/ | wc -l
4
ag "\.once\(" resources/ | wc -l
4
ag "\.empty\(\)" resources/ | wc -l
4
ag "\.width\(\)" resources/ | wc -l
3
ag "\.animate\(" resources/ | wc -l
2
ag "\.ajax\(" resources/ | wc -l
2
ag "\.post\(" resources/ | wc -l
1
Change 314771 abandoned by Jdlrobson:
POC: Use jquery 3 in mobile target mode
Reason:
Krinkle is continuing this work here - https://gerrit.wikimedia.org/r/#/c/322812/7 - yay!
@Jdrewniak pointed out we can roughly measure jquery usage using the eslint-plugin-jquery and eslint-detailed-reporter, we can identify the iQuery methods we use that have native DOM equivalents. Better than nothing I guess.