Introduction to OOjs-UI

This presentation was given in WikimediaAtWork event at Feb 24th in the Wikimedia offices.

Transcript

1. Moriel Schottlender Software Engineer Collaboration Team Wikimedia Foundation
2. OOjs-UI
3. OOjs-UI Object Oriented JavaScript User Interface Library
5. • VisualEditor project started in 2011 • Repository split in late 2013: • VisualEditor standalone ('core') • VisualEditor MediaWiki • OOjs-UI
6. Why build something new??
7. Why not?
8. MediaWiki is Super extensible
9. Super extensibility • Extensions (plugins) • User scripts (Common.js / Common.css) • Gadgets • Projects in ~280 languages – 895 wikis
10. Constraints • We can't trust the DOM for data storage – User scripts can mess with it – (We don't think that's a good idea in general)
11. Constraints • We can't trust the DOM for data storage – User scripts can mess with it – (We don't think that's a good idea in general) • Must be cross-platform / cross-browser
12. Constraints • We can't trust the DOM for data storage – User scripts can mess with it – (We don't think that's a good idea in general) • Must be cross-platform / cross-browser • Must be themeable
13. Constraints • We can't trust the DOM for data storage – User scripts can mess with it – (We don't think that's a good idea in general) • Must be cross-platform / cross-browser • Must be themeable • Consistent one place for UI / Widgets – Users from many different cultures, countries, languages and platforms
14. Constraints • We can't trust the DOM for data storage – User scripts can mess with it – (We don't think that's a good idea in general) • Must be cross-platform / cross-browser • Must be themeable • Consistent one place for UI / Widgets – Users from many different cultures, countries, languages and platforms • The basic functionality must support old browser technology
15. Existing problems
16. Data is stored in the DOM
17. Data is stored in the DOM <div class="dropdown"> <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown trigger <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="dLabel"> ... </ul> </div> (Bootstrap)
18. DOM events are messy :(
19. DOM events are messy :( Input field|
20. DOM events are messy :( Input field| keydown change input cut paste
21. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter?
22. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change
23. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change
24. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change
25. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change OO.ui.TextInputWidget
26. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change Intercept Wait for stack to clear Check if content changed OO.ui.TextInputWidget
27. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change Intercept Wait for stack to clear Check if content changed ignore N OO.ui.TextInputWidget
28. DOM events are messy :( Input field| keydown change input cut paste Arrows? Enter? Requires focus change Emit "change" Intercept Wait for stack to clear Check if content changed ignore Y N OO.ui.TextInputWidget
29. What we want
30. Object Oriented
31. Event emitter support Object Oriented
32. Event emitter support Object Oriented Component (building bigger widgets from smaller)
33. Event emitter support Object Oriented Component (building bigger widgets from smaller) Abstracting the DOM
34. Event emitter support Object Oriented Component (building bigger widgets from smaller) Library of mixins everyone can use Abstracting the DOM
35. Event emitter support Object Oriented Separation of data and UI Component (building bigger widgets from smaller) Library of mixins everyone can use Abstracting the DOM
36. Event emitter support Object Oriented Separation of data and UI Component (building bigger widgets from smaller) No-JS support Library of mixins everyone can use Abstracting the DOM
37. OOUI Event emitter support Object Oriented Separation of data and UI Component (building bigger widgets from smaller) No-JS support Library of mixins everyone can use Abstracting the DOM
38. OOUI OOUI-JS OOUI-PHP Event emitter support Object Oriented Separation of data and UI Component (building bigger widgets from smaller) No-JS support Library of mixins everyone can use Abstracting the DOM
39. Structure
40. OOjs OOjs-UI Object-Oriented (Inheritance, Mixins) Event Emitter Utilities Widgets DOM behavior abstraction Theming
41. OOjs OOjs-UI OOUI-PHP Object-Oriented (Inheritance, Mixins) Event Emitter Utilities Widgets DOM behavior abstraction Theming Widgets DOM structure for no-JS Theming
42. OOjs OOjs-UI OOUI-PHP infuse Object-Oriented (Inheritance, Mixins) Event Emitter Utilities Widgets DOM behavior abstraction Theming Widgets DOM structure for no-JS Theming
43. Example
45. OO.ui.SelectWidget
46. mw.echo.ui.NotificationItemWidget
47. mw.echo.ui.NotificationItemWidget Extends: OO.ui.OptionWidget
48. mw.echo.ui.NotificationItemWidget Extends: OO.ui.OptionWidget Contains: OO.ui.LabelWidget OO.ui.ButtonWidget OO.ui.IconWidget ...
49. mw.echo.ui.NotificationItemWidget mw.echo.dm.NotificationItem Extends: OO.ui.OptionWidget Contains: OO.ui.LabelWidget OO.ui.ButtonWidget OO.ui.IconWidget ...
50. mw.echo.ui.NotificationItemWidget mw.echo.dm.NotificationItem Extends: OO.ui.OptionWidget Contains: OO.ui.LabelWidget OO.ui.ButtonWidget OO.ui.IconWidget ... DATA / View model UI
51. mw.echo.ui.NotificationItemWidget = function( model, config ) { this.model = model; this.markAsReadButton = new OO.ui.ButtonWidget( { icon: 'close', framed: false, classes: [ 'mw-echo-ui-notificationItemWidget-markAsReadButton' ] } ); // Events this.markAsReadButton.connect( this, { click: 'onMarkAsReadButtonClick' } ); this.model.connect( this, { seen: 'onModelSeen', read: 'onModelRead' } ); /* … */ } mw.echo.ui.NotificationItemWidget.prototype.onMarkAsReadButtonClick = function () { this.model.toggleRead( true ); };
52. Widgets Widgets Everywhere
54. Resources
55. Official documentation: https://www.mediawiki.org/wiki/OOjs_UI Code documentation: • Javascript: https://doc.wikimedia.org/oojs-ui/master/js/ • PHP: https://doc.wikimedia.org/oojs-ui/master/php/ Demos: https://doc.wikimedia.org/oojs-ui/master/demos/#widgets-mediawiki-ltr npm package: • OOjs-UI: https://www.npmjs.com/package/oojs-ui • OOjs: https://www.npmjs.com/package/oojs Git repository: • OOjs-UI: http://git.wikimedia.org/tree/oojs%2Fui.git • OOjs: http://git.wikimedia.org/tree/oojs%2Fcore.git MIT LICENSE
56. Thanks!