User:MSchottlender-WMF/ooui-doc-draft

This is a concept write-up for starting OOjs-UI documentation.

The rationale behind this is to organize the documentation in a conceptually logical way, so we can make sure developers know where to start, and we can collaboratively write and maintain the documentation.

The idea is that once a developer understands the rationale of why things are built a certain way, it is much easier to get into multiple widgets and implementation details. On top of that, we build separate documentation for quick-info if a developer 'just' wants to create a one-off widget without getting all in to the logic and operation of OOUI. In between the documentation we should include hands-on tutorials and walk-throughs.

Please feel free to add, adjust, or link to a page if you've written it.


 * Introduction
 * What is OOjs-UI
 * Rationale
 * Why you should use it in your extension
 * OOjs and OOjs-UI
 * How to work with OOUI / Good practices:
 * View models, Widgets, and Events
 * Creating a UI from multiple widgets
 * Using existing OOUI icons
 * Getting started
 * Dependencies
 * Javascript modules
 * PHP composer dependencies
 * Choosing from existing widgets (through the demo)
 * Tutorial: building a basic UI from existing ooui widgets
 * Working with widgets
 * Labels
 * Buttons
 * Inputs
 * Checkboxes
 * Select inputs
 * Layouts
 * Dialogs
 * Icons
 * Extending OOUI widgets
 * General method / rationale / best practices
 * The difference between a mixin and a widget (PopupElement vs PopupWidget, etc, and when to use each)
 * Tutorial: Creating a basic TODO app interface with extended input widgets (inspired from part 2 of the tutorial here)
 * Advanced Tutorial: Creating a TODO app interface with a view model, event listener, and extended ooui widgets.
 * Advanced concepts
 * Generalizing a widget for upstream into ooui