WIKIMANIA 2011

Roan Kattouw - Timo Tijhof -

Trevor Parscal -

[[User:Catrope]][[User:Krinkle]][[User:Trevor Parscal]]

Introduction to ResourceLoaderFocus on easy gains for

Speed, localization and developer-friendliness

WIKIMANIA 2011

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

1

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

1 29

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

1 29 4

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

1 2229 4

WIKIMANIA 2011

Resources

0KB 100KB 200KB 300KB 400KB 500KB 600KB

HTML JavaScript CSS Images

1 47 2

WIKIMANIA 2011

Modules

WIKIMANIA 2011

Modules

Scripts,

WIKIMANIA 2011

Modules

Scripts, styles

WIKIMANIA 2011

Modules

Scripts,

& messages

styles

WIKIMANIA 2011

Modules

Scripts, styles

& messages

WIKIMANIA 2011

Modules

WIKIMANIA 2011

Modules

b ca

a, b & c

WIKIMANIA 2011

Modules

b ca

a, b & c

WIKIMANIA 2011

Modules

bcaa, b & c

WIKIMANIA 2011

Modules

a, b & c

WIKIMANIA 2011

Modules

WIKIMANIA 2011

Example: Register a module

WIKIMANIA 2011

Example: Register a module$wgResourceModules['ext.Foobar'] = array(

WIKIMANIA 2011

Example: Register a module$wgResourceModules['ext.Foobar'] = array(

'scripts' => 'resources/ext.Foobar.js',

WIKIMANIA 2011

Example: Register a module$wgResourceModules['ext.Foobar'] = array(

'scripts' => 'resources/ext.Foobar.js','styles' => 'resources/ext.Foobar.css',

WIKIMANIA 2011

Example: Register a module$wgResourceModules['ext.Foobar'] = array(

'scripts' => 'resources/ext.Foobar.js','styles' => 'resources/ext.Foobar.css','messages' => array(

'foobar-title','foobar-welcome','foobar-intro',

),

WIKIMANIA 2011

Example: Register a module$wgResourceModules['ext.Foobar'] = array(

'scripts' => 'resources/ext.Foobar.js','styles' => 'resources/ext.Foobar.css','messages' => array(

'foobar-title','foobar-welcome','foobar-intro',

),'dependencies' => array(

'jquery.ui.button','mediawiki.Title',

),);

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

Images: Sprites. No ?

WIKIMANIA 2011

CSS: Data URI embedding

WIKIMANIA 2011

CSS: Data URI embedding

.foo {/* @embed */background-image: url(foo.png);

}

WIKIMANIA 2011

CSS: Data URI embedding

.foo {/* @embed */background-image: url(foo.png);

}

.foo {background-image: url(data:image/png;base64,iVBORw0K...FTkSuQmCC);

}

WIKIMANIA 2011

CSS: Flipping for RTL languages

WIKIMANIA 2011

CSS: Flipping for RTL languages.foo {float: left;padding-right: 0.5em;margin: 1px 2px 3px 4px;background-image: url(foo-ltr.png);

}

WIKIMANIA 2011

CSS: Flipping for RTL languages.foo {float: left;padding-right: 0.5em;margin: 1px 2px 3px 4px;background-image: url(foo-ltr.png);

}

.foo {float: right;padding-left: 0.5em;margin: 1px 4px 3px 2px;background-image: url(foo-rtl.png);

}

WIKIMANIA 2011

WIKIMANIA 2011

WIKIMANIA 2011

Startup Module

WIKIMANIA 2011

Startup Module

if ( IE5 ) { giveUp(); }

Sanity check

WIKIMANIA 2011

Startup Module

if ( IE5 ) { giveUp(); }

Sanity checkmodule manifest

Dependencies

b c

a

d e

WIKIMANIA 2011

Startup Module

site-wide settings

Configurationif ( IE5 ) { giveUp(); }

Sanity checkmodule manifest

Dependencies

b c

a

d e

WIKIMANIA 2011

Client-side Loader

WIKIMANIA 2011

Client-side Loader

calculate dependencies

Resolution

b c

a

WIKIMANIA 2011

Client-side Loader

calculate dependencies

Resolution

b c

a

give it to me all at once

Batching

ca +

WIKIMANIA 2011

Client-side Loader

calculate dependencies

Resolution

b c

a

give it to me all at once

Batching

ca +

run in correct order

Execution

a

WIKIMANIA 2011

Example: JavaScript wrapping

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

function() {! ! // Code for foo module

mw.Foo = { ... };! },

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

function() {! ! // Code for foo module

mw.Foo = { ... };! },

// CSS for foo module

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

function() {! ! // Code for foo module

mw.Foo = { ... };! },

// CSS for foo module{

! ! 'all': '.foo{color:blue;background-image:url(data:image/png;base64,iVBORw0K...FTkSuQmCC);}',! ! 'print': '.foo{display:none;}'! },

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

function() {! ! // Code for foo module

mw.Foo = { ... };! },

// CSS for foo module{

! ! 'all': '.foo{color:blue;background-image:url(data:image/png;base64,iVBORw0K...FTkSuQmCC);}',! ! 'print': '.foo{display:none;}'! },

// messages for foo module

WIKIMANIA 2011

Example: JavaScript wrappingmw.loader.implement( 'foo',

function() {! ! // Code for foo module

mw.Foo = { ... };! },

// CSS for foo module{

! ! 'all': '.foo{color:blue;background-image:url(data:image/png;base64,iVBORw0K...FTkSuQmCC);}',! ! 'print': '.foo{display:none;}'! },

// messages for foo module{

! ! 'foo-intro': 'This is an introduction to foo.',! ! 'foo-msg': 'Hello $1, check out $2!'! });

WIKIMANIA 2011

Example: Module loading

WIKIMANIA 2011

Example: Module loading

//example.org/w/load.php?modules=foo|bar&skin=vector&lang=en

WIKIMANIA 2011

Example: Module loading

//example.org/w/load.php?modules=foo|bar&skin=vector&lang=en

mw.loader.implement('foo',function(){mw.Foo={};},{'all':'.foo{color:blue;background-image:url(data:image/png;base64,iVBORw0K...FTkSuQmCC);}','print':'.foo{display:none;}'},{'foo-intro':'This is an introduction to foo.','foo-msg':'Hello $1, check out $2!'});mw.loader.implement('bar',...);

WIKIMANIA 2011

Thanks!

http://wikitech.wikimedia.org/view/Presentations

http://bit.ly/wm11resourceloader

http://www.mediawiki.org/wiki/ResourceLoader

Roan Kattouw - Timo Tijhof -

Trevor Parscal -

[[User:Catrope]][[User:Krinkle]][[User:Trevor Parscal]]