JS2 Overview

JS2 is a new phase of JavaScript for MediaWiki. It contains a script loader that minimizes page loading times by minifying, compressing, and grouping JavaScript files. It provides a unified approach to translation of user messages in JavaScript-based interfaces. It includes JavaScript helpers for dynamically loading JavaScript libraries that provide interfaces as needed rather than the traditional approach of loading all JavaScript in-line. And finally it promotes structuring JavaScript as highly modular reusable components, with clean separation of configuration, invocation binding and interface code.

See also Media Projects Overview, MwEmbed.

Primary motivation
We need a script server to package language text into JavaScript. When a user invokes an interface component, say the add media wizard, we don't want to pull the entire interface code base and all the messages at once. Instead we just want to grab enough to display the current interface interaction. Once the user click on some tab, say the ‘archive.org search’, we then want to import the code to run the archive.org search and the localized messages specific to that interface component. In other words we don't want to package all the message text in the HTML output of the initial page because JavaScript interactions can result in many different interfaces being invoked from that context and we only want to load what is absolutely necessary on initial page display/load.

Another example: say you're on a view page. Then click “edit” on a section and we want to do that edit in-line (without going to another page). We now want to load the toolbar JavaScript all its dependences and localized msg text in a single gziped, minified and indefinitely-client-cached by SVN revision request. (Then we want to grab the actual section wiki-text via the API.)

How to use the ScriptLoader in your extension
You can use the ScriptLoader in your extension with some small modifications:

How to use the ScriptLoader as a gadget developer
As a "gadget" (= JavaScript functionality without PHP extension) developer once JS2 is deployed you can write your JavaScript code to include localized messages. It also lets you group a large set of wikipage JavaScript files in a single request and have all the files be gzipped, minified and localized.

Say for example you have quite a few:

( Note: presently the script-loader is in the "js2-work" branch it won't be availably until post 1.16 release. )

How to include localized messages in your JavaScript
The include msgs for your JavaScript interface must be loaded. Ideally near the header and with one call to.

How does that get translated?

 * Maintenance scripts copy the JavaScript msg into the msg in your PHP localization file.
 * Then when you load your script via the scriptloader your msg_key will contain the localized msg text.

JavaScript messages text limitations
Right now we only support basic $1 replace and NaN undefineds type replacements.

How to structure your JavaScript application
JS2 applications are ideally structured across a few files.

Let's again consider the example of in-line editing.

For every page we include some core helper functions the wikibits.js of JS2 is presently stored in mwEmbed.js. Two functions we are using here are mw.ready, mw.load


 * mw.ready is the JS2 version of addOnloadHook. It ensures that all core library interfaces are "ready" and ensures jquery is available. It binds jQuery to $j – to avoid conflicting with other JavaScript libraries that use $; you can still use $ if you wrap your code in the jQuery context (like all the jQuery plugins do).
 * mw.load function lets us load classes. (For more on mw.load see MwEmbed It will only load classes that are not yet defined. It uses the scriptloader to map class names to JavaScript files and group requests. Say one widget on the page already loaded $j.ui and $j.slider then your app needs $j.ui, $j.slider and $j.fish, your mwLoad call will know to only send a request to the script server for $j.fish. (or directly load the $j.fish.js if scriptloader is off). Once the class are ready it fires the callback (the second argument)

Configuration variables
Also see the DefaultSettings.php code.

See $wgEnableScriptLoader, $wgDebugJavaScript, $wgScriptModifiedCheck.