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.

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

    View full-size slide

  2. OOjs-UI
    Object Oriented JavaScript
    User Interface Library

    View full-size slide


  3. VisualEditor project started in 2011

    Repository split in late 2013:

    VisualEditor standalone ('core')

    VisualEditor MediaWiki

    OOjs-UI

    View full-size slide

  4. Why build something
    new??

    View full-size slide

  5. MediaWiki is
    Super extensible

    View full-size slide

  6. Super extensibility

    Extensions (plugins)

    User scripts (Common.js / Common.css)

    Gadgets

    Projects in ~280 languages
    – 895 wikis

    View full-size slide

  7. 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)

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  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)

    Must be cross-platform / cross-browser

    Must be themeable

    Consistent one place for UI / Widgets
    – Users from many different cultures, countries, languages and
    platforms

    View full-size slide

  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

    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

    View full-size slide

  12. Existing
    problems

    View full-size slide

  13. Data is stored in the DOM

    View full-size slide

  14. Data is stored in the DOM

    data-toggle="dropdown"
    role="button"
    aria-haspopup="true"
    aria-expanded="false">
    Dropdown trigger



    ...


    (Bootstrap)

    View full-size slide

  15. DOM events are messy :(

    View full-size slide

  16. DOM events are messy :(
    Input field|

    View full-size slide

  17. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste

    View full-size slide

  18. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste
    Arrows?
    Enter?

    View full-size slide

  19. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste
    Arrows?
    Enter?
    Requires focus change

    View full-size slide

  20. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste
    Arrows?
    Enter?
    Requires focus change

    View full-size slide

  21. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste
    Arrows?
    Enter?
    Requires focus change

    View full-size slide

  22. DOM events are messy :(
    Input field|
    keydown
    change
    input
    cut
    paste
    Arrows?
    Enter?
    Requires focus change
    OO.ui.TextInputWidget

    View full-size slide

  23. 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

    View full-size slide

  24. 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

    View full-size slide

  25. 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

    View full-size slide

  26. What we want

    View full-size slide

  27. Object Oriented

    View full-size slide

  28. Event emitter support
    Object Oriented

    View full-size slide

  29. Event emitter support
    Object Oriented
    Component (building bigger widgets from smaller)

    View full-size slide

  30. Event emitter support
    Object Oriented
    Component (building bigger widgets from smaller)
    Abstracting the DOM

    View full-size slide

  31. Event emitter support
    Object Oriented
    Component (building bigger widgets from smaller)
    Library of mixins everyone can use
    Abstracting the DOM

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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

    View full-size slide

  35. 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

    View full-size slide

  36. OOjs
    OOjs-UI
    Object-Oriented (Inheritance, Mixins)
    Event Emitter
    Utilities
    Widgets
    DOM behavior abstraction
    Theming

    View full-size slide

  37. OOjs
    OOjs-UI
    OOUI-PHP
    Object-Oriented (Inheritance, Mixins)
    Event Emitter
    Utilities
    Widgets
    DOM behavior abstraction
    Theming
    Widgets DOM structure for no-JS
    Theming

    View full-size slide

  38. 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

    View full-size slide

  39. OO.ui.SelectWidget

    View full-size slide

  40. mw.echo.ui.NotificationItemWidget

    View full-size slide

  41. mw.echo.ui.NotificationItemWidget
    Extends:
    OO.ui.OptionWidget

    View full-size slide

  42. mw.echo.ui.NotificationItemWidget
    Extends:
    OO.ui.OptionWidget
    Contains:
    OO.ui.LabelWidget
    OO.ui.ButtonWidget
    OO.ui.IconWidget
    ...

    View full-size slide

  43. mw.echo.ui.NotificationItemWidget
    mw.echo.dm.NotificationItem
    Extends:
    OO.ui.OptionWidget
    Contains:
    OO.ui.LabelWidget
    OO.ui.ButtonWidget
    OO.ui.IconWidget
    ...

    View full-size slide

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

    View full-size slide

  45. 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 );
    };

    View full-size slide

  46. Widgets
    Widgets
    Everywhere

    View full-size slide

  47. 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

    View full-size slide