User:Quiddity/How does it all work

From Wikitech
Rename/move this page to anywhere (e.g. MediaWiki)! Adopt and improve! Tweak the details, however would be most interesting! I can't take it any further...
Update: It looks like mw:Manual:MediaWiki architecture answers many of my questions. But more visualizations would still be great!.
Update2: Ooo, mw:File:Call graph of extension Math.svg and more by Seb35.
Update3: This this this! Architecture diagram, including keywords of both the software names and their functions. (via)
Update4:Huzzah! More details now at MediaWiki at WMF

I'd like to better understand how MediaWiki works. Our Wikimedia implementation, in particular.

I was thinking to myself, for the squillionth time...

How does it all work?!

The parser turns the wikitext in the database into html, and then sends that to my browser. But what's the next level of complexity? and the next? and possibly the next and next?

How can I better understand (and recall) the deeper bits of MediaWiki - the keywords and the functions - without getting a Bachelor in C.S. and spending a few years slowly acquainting myself with everything?

A few of the answers are in mw:Manual:Index.php and mw:Manual:Code, but not quite enough? or perhaps just not quite in the right way, for my non-developer mind?

I'd love to see/read more visual maps. More workflow diagrams. More keyword compendiums/glossaries. Halp!


To help rapidly educate a newcomer audience of volunteer/staff developers, and to perk the interest of the development-curious.


Make a list of (most/all of) the steps that occur, to render content for a reader.
Our code and data, where to find it, and how it interacts with the other bits of code and data.
I.e. From the databases, through each code call, and all the updates that are triggered (from parsers to analytics), up to when it starts getting sent to my browser.
Perhaps we could start with a simple example, at a few levels of complexity?
and then take it further, or extrapolate to one or two more complex examples?

Events to include

(please brain-dump!)

  • links to explanations, about the bits of the parser that are invoked
  • links to info about the different databases involved
  • links to the API docs
  • links to the repositories
  • names of the servers the bits live on
  • Where does resourceloader, and gadgets, fit in?
  • many radial-file-tree image thumbnails, showing where to find the bits of code, in relation to each other.
  • ?

Images found elsewhere

See: Infographics


(Please, Tweak or overhaul these details however would be most interesting/illustrative/practical! I suggest 2 or 3 examples, so that the differences can easily be seen, in how much more complex the back-end gets, for every reader-visible change.)

A great start is shown in this presentation, SREcon19 Europe/Middle East/Africa - What Happens When You Type (youtube, and slides)

Example scenario 1

  • a new IP user, visits a cached plain-text article at enwiki.
    • At a location called: [[Example]] (i.e. if it's the only content at w:en:Example.)
    • This wikitext:
Hello, world!

Example scenario 2

  • a new IP user, visits a freshly saved, new page creation, with new markup, a reference, a template, at enwiki.
    • At a location called: [[Example (disambiguation)]]
    • This wikitext:
    • Where [[Hello]] is a stub
    • Where [[world]] is a redlink
    • Where {{cn}} is a link to the existing w:en:template:cn
[[Hello]], [[world]]! The population of Earth is 7,359,044,782.<ref>[ source]</ref>{{cn|date=January 2016}}
<references />

Example scenario 3

  • a logged-in user, opens a cached page, with inline css, a wikidata call, and an image from commons, at hewiki.
    • At a location called: [[כדור הארץ]]
    • This wikitext:
[[File:The Earth seen from Apollo 17.jpg|300px|thumb|כדור הארץ בצילום המפורסם של צוות אפולו 17, "The Blue Marble"]]
שלום עולם!

<span class="mw-content-ltr" lang="en" dir="ltr">
Hello, world! The population of Earth is {{#invoke:Wikidata|getValue|P1082|FETCH_WIKIDATA|y}}.