View
17
Download
0
Category
Preview:
Citation preview
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]]
Recommended