Simple overview image about how MW loads resources in clients

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

Simple overview image about how MW loads resources in clients

Joaquin Oltra Hernandez
Hi,

We were having a session where we talked about resource loading, code entry
points for the front-end, and how things work on MediaWiki, and we came up
with a small pic to explain the lifecycle for people newer to MediaWiki.

Maybe it could help some people get a better grasp about where files are
coming from and what why the load.php urls are as they are.

Please, forgive any missing details, and if there is something very wrong
I'd love to correct it, please let me know.

Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
the state of your code/client cache/server state & extensions" to shorten
things and in a humorous key.

Links:

   - Phab: https://phabricator.wikimedia.org/M232
   - Imgur: https://i.imgur.com/DYLqtQf.png
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Gergo Tisza
Nice! Can you put it on Commons under a free license?

debug=1 in the URL query disables the bottom third of the image; scripts
are loaded via direct source URLs. Not sure if that's worth mentioning.
Also IIRC there are some other magic modules beyond startup where the URL
does not contain the module names (such as the code for the gadgets the
user has enabled). And the page-specific settings (via
the MakeGlobalVariablesScript hook) just get inlined in the initial HTML.
Again not sure if that's worth mentioning.


On Mon, Nov 6, 2017 at 10:39 AM, Joaquin Oltra Hernandez <
[hidden email]> wrote:

> Hi,
>
> We were having a session where we talked about resource loading, code entry
> points for the front-end, and how things work on MediaWiki, and we came up
> with a small pic to explain the lifecycle for people newer to MediaWiki.
>
> Maybe it could help some people get a better grasp about where files are
> coming from and what why the load.php urls are as they are.
>
> Please, forgive any missing details, and if there is something very wrong
> I'd love to correct it, please let me know.
>
> Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
> the state of your code/client cache/server state & extensions" to shorten
> things and in a humorous key.
>
> Links:
>
>    - Phab: https://phabricator.wikimedia.org/M232
>    - Imgur: https://i.imgur.com/DYLqtQf.png
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Jan Dittrich
In reply to this post by Joaquin Oltra Hernandez
Thanks! This looks pretty useful and is on the level of what I often missed
when I was trying to wrap my head around Mediawiki-things. Could it go to
some "official"-ish place on mediawiki.org ?

Jan

2017-11-06 18:39 GMT+00:00 Joaquin Oltra Hernandez <[hidden email]
>:

> Hi,
>
> We were having a session where we talked about resource loading, code entry
> points for the front-end, and how things work on MediaWiki, and we came up
> with a small pic to explain the lifecycle for people newer to MediaWiki.
>
> Maybe it could help some people get a better grasp about where files are
> coming from and what why the load.php urls are as they are.
>
> Please, forgive any missing details, and if there is something very wrong
> I'd love to correct it, please let me know.
>
> Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
> the state of your code/client cache/server state & extensions" to shorten
> things and in a humorous key.
>
> Links:
>
>    - Phab: https://phabricator.wikimedia.org/M232
>    - Imgur: https://i.imgur.com/DYLqtQf.png
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l




--
Jan Dittrich
UX Design/ User Research

Wikimedia Deutschland e.V. | Tempelhofer Ufer 23-24 | 10963 Berlin
Phone: +49 (0)30 219 158 26-0
http://wikimedia.de

Imagine a world, in which every single human being can freely share in the
sum of all knowledge. That‘s our commitment.

Wikimedia Deutschland - Gesellschaft zur Förderung Freien Wissens e. V.
Eingetragen im Vereinsregister des Amtsgerichts Berlin-Charlottenburg unter
der Nummer 23855 B. Als gemeinnützig anerkannt durch das Finanzamt für
Körperschaften I Berlin, Steuernummer 27/029/42207.
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Joaquin Oltra Hernandez
In reply to this post by Gergo Tisza
On Mon, Nov 6, 2017 at 8:30 PM Gergo Tisza <[hidden email]> wrote:

> Nice! Can you put it on Commons under a free license?
>
> Of course!
https://commons.wikimedia.org/wiki/File:Frontend_resource_loading_in_MediaWiki.png


debug=1 in the URL query disables the bottom third of the image; scripts
> are loaded via direct source URLs. Not sure if that's worth mentioning.
>

Right, this image is for the debug=false or production mode. Thanks, I've
updated the phab and commons description to clarify!

Also IIRC there are some other magic modules beyond startup where the URL
> does not contain the module names (such as the code for the gadgets the
> user has enabled). And the page-specific settings (via
> the MakeGlobalVariablesScript hook) just get inlined in the initial HTML.
> Again not sure if that's worth mentioning.
>
>
Good insight, quite specific for the overview. I've linked to the
mediawiki.org docs that Krinkle mentioned in phab in the descriptions to
have a way into more in depth docs.

Thanks for the comments!

>
> On Mon, Nov 6, 2017 at 10:39 AM, Joaquin Oltra Hernandez <
> [hidden email]> wrote:
>
> > Hi,
> >
> > We were having a session where we talked about resource loading, code
> entry
> > points for the front-end, and how things work on MediaWiki, and we came
> up
> > with a small pic to explain the lifecycle for people newer to MediaWiki.
> >
> > Maybe it could help some people get a better grasp about where files are
> > coming from and what why the load.php urls are as they are.
> >
> > Please, forgive any missing details, and if there is something very wrong
> > I'd love to correct it, please let me know.
> >
> > Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
> > the state of your code/client cache/server state & extensions" to shorten
> > things and in a humorous key.
> >
> > Links:
> >
> >    - Phab: https://phabricator.wikimedia.org/M232
> >    - Imgur: https://i.imgur.com/DYLqtQf.png
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Adam Wight-2
In reply to this post by Joaquin Oltra Hernandez
Where has this drawing been all my life!

-Adam

> On Nov 6, 2017, at 1:39 PM, Joaquin Oltra Hernandez <[hidden email]> wrote:
>
> Hi,
>
> We were having a session where we talked about resource loading, code entry
> points for the front-end, and how things work on MediaWiki, and we came up
> with a small pic to explain the lifecycle for people newer to MediaWiki.
>
> Maybe it could help some people get a better grasp about where files are
> coming from and what why the load.php urls are as they are.
>
> Please, forgive any missing details, and if there is something very wrong
> I'd love to correct it, please let me know.
>
> Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
> the state of your code/client cache/server state & extensions" to shorten
> things and in a humorous key.
>
> Links:
>
>   - Phab: https://phabricator.wikimedia.org/M232
>   - Imgur: https://i.imgur.com/DYLqtQf.png
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l


_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Mathieu Stumpf Guntz
In reply to this post by Joaquin Oltra Hernandez
Seriously, what is the fantasy with banana? Where does it come from?

Otherwise, thank you for sharing this information and links.

Ĝis baldaŭ

Le 06/11/2017 à 19:39, Joaquin Oltra Hernandez a écrit :

> Hi,
>
> We were having a session where we talked about resource loading, code entry
> points for the front-end, and how things work on MediaWiki, and we came up
> with a small pic to explain the lifecycle for people newer to MediaWiki.
>
> Maybe it could help some people get a better grasp about where files are
> coming from and what why the load.php urls are as they are.
>
> Please, forgive any missing details, and if there is something very wrong
> I'd love to correct it, please let me know.
>
> Also to clarify, "Magic" is used as "Dynamic, runtime based, dependent on
> the state of your code/client cache/server state & extensions" to shorten
> things and in a humorous key.
>
> Links:
>
>     - Phab: https://phabricator.wikimedia.org/M232
>     - Imgur: https://i.imgur.com/DYLqtQf.png
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Nick Wilson (Quiddity)
On Tue, Nov 7, 2017 at 10:34 PM, mathieu stumpf guntz
<[hidden email]> wrote:
>
> Seriously, what is the fantasy with banana? Where does it come from?
>

If you mean the "?modules=banana|phone" in the image, that is (I
assume) a reference to a long-lasting meme based on kids using
bananas as imaginary phone handsets. See (1969!)
https://www.youtube.com/watch?v=OAX6YPCwJsM and
https://youtu.be/51ZhEjB_KvU , and
http://knowyourmeme.com/memes/bananaphone for more recent iterations.

If you mean https://www.mediawiki.org/wiki/Module:Bananas I would
guess "banana" was chosen as a
https://en.wikipedia.org/wiki/Placeholder_name because it's friendly
and innocuous, and is not ambiguous as "Example" might be.

If you mean https://www.mediawiki.org/wiki/Banana-checker I don't know
the story behind that one!
https://www.mediawiki.org/wiki/Naming_things is hard.


>
> Otherwise, thank you for sharing this information and links.
>

Agreed!  I've added it to a collection I've been making at
https://wikitech.wikimedia.org/wiki/User:Quiddity/How_does_it_all_work#Images_found_elsewhere
(additions welcome)

quiddity

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

James Hare-4
On November 7, 2017 at 11:08:39 PM, Nick Wilson (Quiddity) (
[hidden email]) wrote:

On Tue, Nov 7, 2017 at 10:34 PM, mathieu stumpf guntz
<[hidden email]> wrote:
>
> Seriously, what is the fantasy with banana? Where does it come from?
>

If you mean the "?modules=banana|phone" in the image, that is (I
assume) a reference to a long-lasting meme based on kids using
bananas as imaginary phone handsets. See (1969!)
https://www.youtube.com/watch?v=OAX6YPCwJsM and
https://youtu.be/51ZhEjB_KvU , and
http://knowyourmeme.com/memes/bananaphone for more recent iterations.


Also this delightful song: https://www.youtube.com/watch?v=dIiZ3vvZ78s


Cheers,

James Hare
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Krinkle
In reply to this post by Nick Wilson (Quiddity)
On Tue, Nov 7, 2017 at 11:07 PM, Nick Wilson (Quiddity) <
[hidden email]> wrote:

>
> If you mean https://www.mediawiki.org/wiki/Banana-checker I don't know
> the story behind that one!
> https://www.mediawiki.org/wiki/Naming_things is hard.
>
>
Banana-checker is a linter that "checks" the validity and quality of our
localisation files.
This file format originally didn't have a name and was just part of
MediaWiki core.
In 2012, a second implementation was created by jQuery.i18n, as part of
Project Milkshake. [1][2]

In 2014, when James worked on creating a Grunt.js-based validator for these
files, we retroactively
named the format "Banana" (in line with the Milkshake theme), and the
validator "Banana-checker".

-- Krinkle

[1] https://github.com/wikimedia/jquery.i18n#readme
[2] https://www.mediawiki.org/wiki/Milkshake
[3] https://en.wikipedia.org/wiki/Lint_(software)
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Mathieu Stumpf Guntz
In reply to this post by Nick Wilson (Quiddity)
Ok, thank you everybody for this cast of light. :)

Maybe this kind of mnem should be documented in some central place, and
maybe reference that in
https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker

The fact that banana is friendly, yeah sure, I'm not aware of any banana
who willingly assaulted someone. The fact that it is innocuous, well,
really, I think that banana is not the less sexually connoted example
one might found. Well, personally I don't really have a problem with
that, although one might argue that for gender parity it would be fair
to also use other examples.

Now, for the case of Module:Bananas, I think that Module:Fanciful would
be fine in some cases. In others cases like introduction manual, things
like "MyFirstModule" or "UsernameFirstModule" might do the trick. It
also add implicit information that camel case is the usual way to write
module names. Moreover, one might even argue that "UsernameFirstModule"
easily be dynamically generated, creating an awesome custom user
experience which foster engagement of developers and finally make the
world a really wonderful place to live in (hmm).

ĝis baldaŭ

Le 08/11/2017 à 08:07, Nick Wilson (Quiddity) a écrit :

> On Tue, Nov 7, 2017 at 10:34 PM, mathieu stumpf guntz
> <[hidden email]> wrote:
>> Seriously, what is the fantasy with banana? Where does it come from?
>>
> If you mean the "?modules=banana|phone" in the image, that is (I
> assume) a reference to a long-lasting meme based on kids using
> bananas as imaginary phone handsets. See (1969!)
> https://www.youtube.com/watch?v=OAX6YPCwJsM and
> https://youtu.be/51ZhEjB_KvU , and
> http://knowyourmeme.com/memes/bananaphone for more recent iterations.
>
> If you mean https://www.mediawiki.org/wiki/Module:Bananas I would
> guess "banana" was chosen as a
> https://en.wikipedia.org/wiki/Placeholder_name because it's friendly
> and innocuous, and is not ambiguous as "Example" might be.
>
> If you mean https://www.mediawiki.org/wiki/Banana-checker I don't know
> the story behind that one!
> https://www.mediawiki.org/wiki/Naming_things is hard.
>
>
>> Otherwise, thank you for sharing this information and links.
>>
> Agreed!  I've added it to a collection I've been making at
> https://wikitech.wikimedia.org/wiki/User:Quiddity/How_does_it_all_work#Images_found_elsewhere
> (additions welcome)
>
> quiddity
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l

_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Joaquin Oltra Hernandez
I personally use it as an example with other fruits like Apple, or some
times with Phone or Bing because of the Raffi song *Bananaphone
<https://en.wikipedia.org/wiki/Bananaphone> *which brings me good memories.

It is also a very useful article name which has articles in many language
wikis under the same title (the ones I'm familiar with), en
<https://en.m.wikipedia.org/wiki/Banana>, es
<https://es.m.wikipedia.org/wiki/Banana>, ca
<https://ca.m.wikipedia.org/wiki/Banana>, it
<https://it.m.wikipedia.org/wiki/Banana>, and some other interesting
content, like the disambiguation page on fr
<https://fr.m.wikipedia.org/wiki/Banana>, or that in german
<https://de.m.wikipedia.org/wiki/Banana> it is a state in the Democratic
Republic of Congo.

On Wed, Nov 8, 2017 at 9:43 AM mathieu stumpf guntz <
[hidden email]> wrote:

> Ok, thank you everybody for this cast of light. :)
>
> Maybe this kind of mnem should be documented in some central place, and
> maybe reference that in
> https://www.mediawiki.org/wiki/How_to_become_a_MediaWiki_hacker
>
> The fact that banana is friendly, yeah sure, I'm not aware of any banana
> who willingly assaulted someone. The fact that it is innocuous, well,
> really, I think that banana is not the less sexually connoted example
> one might found. Well, personally I don't really have a problem with
> that, although one might argue that for gender parity it would be fair
> to also use other examples.
>
> Now, for the case of Module:Bananas, I think that Module:Fanciful would
> be fine in some cases. In others cases like introduction manual, things
> like "MyFirstModule" or "UsernameFirstModule" might do the trick. It
> also add implicit information that camel case is the usual way to write
> module names. Moreover, one might even argue that "UsernameFirstModule"
> easily be dynamically generated, creating an awesome custom user
> experience which foster engagement of developers and finally make the
> world a really wonderful place to live in (hmm).
>
> ĝis baldaŭ
>
> Le 08/11/2017 à 08:07, Nick Wilson (Quiddity) a écrit :
> > On Tue, Nov 7, 2017 at 10:34 PM, mathieu stumpf guntz
> > <[hidden email]> wrote:
> >> Seriously, what is the fantasy with banana? Where does it come from?
> >>
> > If you mean the "?modules=banana|phone" in the image, that is (I
> > assume) a reference to a long-lasting meme based on kids using
> > bananas as imaginary phone handsets. See (1969!)
> > https://www.youtube.com/watch?v=OAX6YPCwJsM and
> > https://youtu.be/51ZhEjB_KvU , and
> > http://knowyourmeme.com/memes/bananaphone for more recent iterations.
> >
> > If you mean https://www.mediawiki.org/wiki/Module:Bananas I would
> > guess "banana" was chosen as a
> > https://en.wikipedia.org/wiki/Placeholder_name because it's friendly
> > and innocuous, and is not ambiguous as "Example" might be.
> >
> > If you mean https://www.mediawiki.org/wiki/Banana-checker I don't know
> > the story behind that one!
> > https://www.mediawiki.org/wiki/Naming_things is hard.
> >
> >
> >> Otherwise, thank you for sharing this information and links.
> >>
> > Agreed!  I've added it to a collection I've been making at
> >
> https://wikitech.wikimedia.org/wiki/User:Quiddity/How_does_it_all_work#Images_found_elsewhere
> > (additions welcome)
> >
> > quiddity
> >
> > _______________________________________________
> > Wikitech-l mailing list
> > [hidden email]
> > https://lists.wikimedia.org/mailman/listinfo/wikitech-l
>
> _______________________________________________
> Wikitech-l mailing list
> [hidden email]
> https://lists.wikimedia.org/mailman/listinfo/wikitech-l
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

MZMcBride-2
In reply to this post by Nick Wilson (Quiddity)
Nick Wilson (Quiddity) wrote:
>If you mean https://www.mediawiki.org/wiki/Module:Bananas I would
>guess "banana" was chosen as a
>https://en.wikipedia.org/wiki/Placeholder_name because it's friendly
>and innocuous, and is not ambiguous as "Example" might be.

"Module:Bananas" on the English Wikipedia is slightly older:
<https://en.wikipedia.org/wiki/Module:Bananas>. Both appear to be named
after the example in the reference manual (August 2012):
<https://www.mediawiki.org/w/index.php?diff=572334&oldid=568270>.

mathieu stumpf guntz wrote:
>The fact that banana is friendly, yeah sure, I'm not aware of any banana
>who willingly assaulted someone. The fact that it is innocuous, well,
>really, I think that banana is not the less sexually connoted example
>one might found. Well, personally I don't really have a problem with
>that, although one might argue that for gender parity it would be fair
>to also use other examples.

We could switch to Module:🍆 or Module:🍑. :-)

 
>Now, for the case of Module:Bananas, I think that Module:Fanciful would
>be fine in some cases. In others cases like introduction manual, things
>like "MyFirstModule" or "UsernameFirstModule" might do the trick. It
>also add implicit information that camel case is the usual way to write
>module names. Moreover, one might even argue that "UsernameFirstModule"
>easily be dynamically generated, creating an awesome custom user
>experience which foster engagement of developers and finally make the
>world a really wonderful place to live in (hmm).

Using CamelCase for module names may be specific to particular wikis. The
English Wikipedia doesn't seem to do this as much:
<https://en.wikipedia.org/wiki/Special:PrefixIndex/Module:>.

MZMcBride



_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l
Reply | Threaded
Open this post in threaded view
|

Re: Simple overview image about how MW loads resources in clients

Mathieu Stumpf Guntz


Le 08/11/2017 à 14:32, MZMcBride a écrit :
> Nick Wilson (Quiddity) wrote:
> We could switch to Module:🍆 or Module:🍑. :-)
lol, Unicode has definitely an insane number of WTF symbols included.
Maybe I should try to re-implement libcaca in Lua within Module:💩.

>> Now, for the case of Module:Bananas, I think that Module:Fanciful would
>> be fine in some cases. In others cases like introduction manual, things
>> like "MyFirstModule" or "UsernameFirstModule" might do the trick. It
>> also add implicit information that camel case is the usual way to write
>> module names. Moreover, one might even argue that "UsernameFirstModule"
>> easily be dynamically generated, creating an awesome custom user
>> experience which foster engagement of developers and finally make the
>> world a really wonderful place to live in (hmm).
> Using CamelCase for module names may be specific to particular wikis. The
> English Wikipedia doesn't seem to do this as much:
> <https://en.wikipedia.org/wiki/Special:PrefixIndex/Module:>.
Oh, well, the main point was you might use "Module:|{{#USERNAME:}}|
first module" in the documentation, or whatever the local convention (if
any) might be. Although one might argue that from a cache perspective
that might not looks like a very attractive idea. But, actually, I have
no idea if there feature which would allow a cache-light substitution
for just some stuff like user name in the content page.

I guess there are caches for stuff like the username in the user menu
though. To be honest, the longest conversation I ever had about cache so
far was probably with a former colleague which was always complaining
about how much he hates vanish. So more hints/links on cache management
in the Wikimedia environment would be welcome. I only know there are
some sever at Amsterdam (if that's still up-to-date information) for
serving Europe in read-only. I can't remember right now if there is an
equivalent server in Asia, which would definitely make sense. Also we
should soon have some backup on the moon, if I well understood :
https://meta.wikimedia.org/wiki/Wikipedia_to_the_Moon

Sorry for this almost in-topic message. Here are some completely
irrelevant Unicode symbols to seek your forgiveness: ☫⚛💥⏿࿋💯
_______________________________________________
Wikitech-l mailing list
[hidden email]
https://lists.wikimedia.org/mailman/listinfo/wikitech-l