Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to OOjs-UI

Introduction to OOjs-UI

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

B1720ad8dd59327f01f704eb8870247f?s=128

Moriel Schottlender

February 24, 2016
Tweet

More Decks by Moriel Schottlender

Other Decks in Programming

Transcript

  1. Moriel Schottlender Software Engineer Collaboration Team Wikimedia Foundation

  2. OOjs-UI

  3. OOjs-UI Object Oriented JavaScript User Interface Library

  4. None
  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

  44. None
  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

  53. None
  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!