ResourceLoader 2 - Wikimedia · • Focus on front-end performance. BERLIN HACKATHON 2012...
Transcript of ResourceLoader 2 - Wikimedia · • Focus on front-end performance. BERLIN HACKATHON 2012...
BERLIN HACKATHON 2012
Roan Kattouw - Timo Tijhof -
[[User:Catrope]][[User:Krinkle]]
ResourceLoader 2The Future of Gadgets
BERLIN HACKATHON 2012
What are Gadgets ?
BERLIN HACKATHON 2012
What are Gadgets ?
• Extra functionality created by users (javascript / css)
BERLIN HACKATHON 2012
What are Gadgets ?
• Extra functionality created by users (javascript / css)
• Wiki pages
BERLIN HACKATHON 2012
What are Gadgets ?
• Extra functionality created by users (javascript / css)
• Wiki pages
• Overview on [[Special:Gadgets]]
BERLIN HACKATHON 2012
What are Gadgets ?
• Extra functionality created by users (javascript / css)
• Wiki pages
• Overview on [[Special:Gadgets]]
BERLIN HACKATHON 2012
Workflow & Issues
BERLIN HACKATHON 2012
Script creation and editing
BERLIN HACKATHON 2012
Script creation and editing
• MediaWiki-namespace
[[MediaWiki:Gadget-Example.js]]
BERLIN HACKATHON 2012
Script creation and editing
• MediaWiki-namespace
[[MediaWiki:Gadget-Example.js]]
• Requires 'editinterface' (administrators-only by default)
BERLIN HACKATHON 2012
Management
BERLIN HACKATHON 2012
Management
• Properties are stored at [[MediaWiki:Gadgets-definition]]
BERLIN HACKATHON 2012
Management
• Properties are stored at [[MediaWiki:Gadgets-definition]]
• Create/remove by editing the list syntax
BERLIN HACKATHON 2012
Management
• Properties are stored at [[MediaWiki:Gadgets-definition]]
• Create/remove by editing the list syntax
• Worse than wikitext
BERLIN HACKATHON 2012
Management
• Properties are stored at [[MediaWiki:Gadgets-definition]]
• Create/remove by editing the list syntax
• Worse than wikitext
BERLIN HACKATHON 2012
Management
BERLIN HACKATHON 2012
Management
BERLIN HACKATHON 2012
Translation
BERLIN HACKATHON 2012
Translation
• Some solutions exist,invented by the community
BERLIN HACKATHON 2012
Translation
• Some solutions exist,invented by the community
BERLIN HACKATHON 2012
Translation
• Some solutions exist,invented by the community
• No native handling for localization
BERLIN HACKATHON 2012
Sharing
BERLIN HACKATHON 2012
Sharing
• No native way to load gadgets from another wiki
BERLIN HACKATHON 2012
Sharing
• No native way to load gadgets from another wiki
• Community workarounds
BERLIN HACKATHON 2012
Sharing
• No native way to load gadgets from another wiki
• Community workarounds
• Export/import feature incomplete(requires post-import manual fix-ups)
BERLIN HACKATHON 2012
Sharing
BERLIN HACKATHON 2012
Sharing
BERLIN HACKATHON 2012
Sharing
BERLIN HACKATHON 2012
FutureGadgets 2.0
BERLIN HACKATHON 2012
ResourceLoader
BERLIN HACKATHON 2012
ResourceLoader
• Focus on front-end performance
BERLIN HACKATHON 2012
ResourceLoader
• Focus on front-end performance
• Access to interface messages
BERLIN HACKATHON 2012
ResourceLoader
• Focus on front-end performance
• Access to interface messages
• JavaScript libraries (jQuery & MediaWiki.js)
BERLIN HACKATHON 2012
ResourceLoader
• Focus on front-end performance
• Access to interface messages
• JavaScript libraries (jQuery & MediaWiki.js)
• Cross-wiki modules (foreign module source)
BERLIN HACKATHON 2012
ResourceLoader
• Focus on front-end performance
• Access to interface messages
• JavaScript libraries (jQuery & MediaWiki.js)
• Cross-wiki modules (foreign module source)
var $button = jQuery( ‘<div>’, {id: ‘mw-example-button’,text: mw.msg( ‘gadget-example-button’ )
} );
$button.on( ‘click’, function ( e ) {jQuery( ‘#mw-panel’ ).fadeOut();
} );
BERLIN HACKATHON 2012
Editing
BERLIN HACKATHON 2012
Editing
• [[MediaWiki:Gadget-Example.js]] → [[Gadget:Example.js]]
BERLIN HACKATHON 2012
Editing
• [[MediaWiki:Gadget-Example.js]] → [[Gadget:Example.js]]
• Permissions separate from MediaWiki namespace
BERLIN HACKATHON 2012
Management
BERLIN HACKATHON 2012
Management
• [[MediaWiki:Gadgets-definition]] → [[Special:Gadgets]]
BERLIN HACKATHON 2012
Management
• [[MediaWiki:Gadgets-definition]] → [[Special:Gadgets]]
• [[Gadget definition:Example.js]]
BERLIN HACKATHON 2012
Management
• [[MediaWiki:Gadgets-definition]] → [[Special:Gadgets]]
• [[Gadget definition:Example.js]]
• Permissions separate from MediaWiki namespace
BERLIN HACKATHON 2012
BERLIN HACKATHON 2012
BERLIN HACKATHON 2012
Localization
BERLIN HACKATHON 2012
Localization
• Uses MediaWiki core localization framework
BERLIN HACKATHON 2012
Localization
• Uses MediaWiki core localization framework
• Easy access through mw.message
BERLIN HACKATHON 2012
Localization
• Uses MediaWiki core localization framework
• Easy access through mw.message
• Basic parsing ($1, {{SITENAME}}, {{PLURAL:}}, ..)
BERLIN HACKATHON 2012
Localization
• Uses MediaWiki core localization framework
• Easy access through mw.message
• Basic parsing ($1, {{SITENAME}}, {{PLURAL:}}, ..)
--- [[MediaWiki:Gadget-example-welcome]]Hello $1, welcome back!
--- [[Gadget:Example.js]]mw.msg( ‘gadget-example-welcome’, mw.user.name() );
// “Hello Krinkle, welcome back!”
BERLIN HACKATHON 2012
Using other modules
BERLIN HACKATHON 2012
Using other modules
• Gadgets can “use” other modules
BERLIN HACKATHON 2012
Using other modules
• Gadgets can “use” other modules
• Re-use commonly needed utilities
BERLIN HACKATHON 2012
Using other modules
• Gadgets can “use” other modules
• Re-use commonly needed utilities
• Dependencies
BERLIN HACKATHON 2012
Using other modules
• Gadgets can “use” other modules
• Re-use commonly needed utilities
• Dependencies
var t = new mw.Title( ‘image: an_example.jpg’ );
t.getNamespacePrefix(); // “File:”t.getMainText(); // “An example.jpg”t.getUrl(); // “/wiki/File:An_example.jpg”
BERLIN HACKATHON 2012
Duplication Sharing
BERLIN HACKATHON 2012
Duplication Sharingmediawiki.org
BERLIN HACKATHON 2012
Duplication Sharingmediawiki.org
BERLIN HACKATHON 2012
Duplication Sharingnl.wikipedia.org
BERLIN HACKATHON 2012
Duplication Sharingnl.wikipedia.org
BERLIN HACKATHON 2012
Demo
BERLIN HACKATHON 2012
Roan Kattouw - Timo Tijhof -
[[User:Catrope]][[User:Krinkle]]
ResourceLoader 2The Future of Gadgets
mediawiki.org/wiki/RL2TEST