1. Render texts
2. ┌--------------┐ | Draw Text UI | └--------------┘

...and for ASCII Art

                                            ====
                                            o o~~
         /~\                               _\- /_
        ( oo|                  ___        / \ /  \
        _\=/_                 / ()\      //| |  |\\
       /  _  \              _|_____|_   // | |  |//
 ===================       | | === | | //  | |  //
 |                 |       |_|  O  |_|('   |===(|
 |_________________|        ||  O  ||      | || |
 |                 |        ||__*__||      (_)(_)
 |                 |       |~ \___/ ~|     |_||_|
 |                 |       /=\ /=\ /=\     |_||_|
_|_________________|_______[_]_[_]_[_]____/__][__\__
        

GUI

1. Text UI – step in GUI evolution
   • PC for non-technical users
2. Browser APIs, WinAPI, GTK, Qt, ...
   • Easier to create GUI than TUI now
3. «Text UI is for hackers»

Developers <3 Terminal

1. Faster to type than click
2. Ability to compose text streams
3. More flexible than GUI
4. Less complicated than equal GUI

Post GUI Text UI

1. Toolchain is not limited
   • 1-2 good libraries for every language
2. Imperative style
3. Range of DSV/DSL is a problem

DSV – Domain Specific Vocabulary

Blessed.js

            var box = blessed.box({
              style: {
                fg: 'white',
                bg: 'magenta'
              },
              border: {type: 'line'},
              tags: true
            });
        

Simple lib – simple DSV

            inquirer.prompt([{
              type: 'rawlist',
              name: 'tui',
              message: 'Are TUIs cool?',
              choices: ['Yup', 'Why do you ask?']
            }], (answers) => {
            });
        

Creating UI engine is challenging

1. Layout Math
   • Relative positioning
   • Dynamic box dimensions
2. Simple yet familiar DSV
   • Naming, Structure, Styling, ...

            <div className="mc">
                <ul className="menu">
                    <li className="menu__item"><span className="menu__item-shortcut">L</span>eft</li>
                    <li className="menu__item"><span className="menu__item-shortcut">F</span>ile</li>
                    <li className="menu__item"><span className="menu__item-shortcut">C</span>ommand</li>
                    <li className="menu__item"><span className="menu__item-shortcut">O</span>ptions</li>
                    <li className="menu__item"><span className="menu__item-shortcut">R</span>ight</li>
                </ul>
                <div className="content">
                    {this.props.leftPanel ? this._renderPanel(this.props.leftPanel.toJS()) : null}
                    {this.props.rightPanel ? this._renderPanel(this.props.rightPanel.toJS()) : null}
                </div>
                <div className="console">
                    <input className="console__input" type="text" defaultValue="~/Documents/html-cli$ node index.js" autofocus />
                </div>
                <ul className="controls">
                    <li className="control">
                        <div className="control__number">1</div>
                        <div className="control__name">Help</div>
                    </li>
                    <li className="control">
                        <div className="control__number">2</div>
                        <div className="control__name">Menu</div>
                    </li>
                    <li className="control">
                        <div className="control__number">3</div>
                        <div className="control__name">View</div>
                    </li>
                    <li className="control">
                        <div className="control__number">4</div>
                        <div className="control__name">Edit</div>
                    </li>
        

Borrow from DOM API/CSSOM

• elem.getClientRects() — Layout Math
• getComputedStyle(elem) — Styles
• DOM Event system
• Document Structure

Translating <div> to TUI

            let styles = window.getComputedStyle(div);
            let rect = div.getClientRects();
            let box = renderBox(rect, styles);
        

Translating textNode to TUI

            let styles = window.getComputedStyle(div);
            let text = div.firstChild;
            let range = document.createRange();
                        range.selectNodeContents(text);
            let rect = range.getClientRects();
            let textBox = renderText(rect, styles);
        

Forwarding Input events

1. Read from STDIN
2. Serialize Event
3. Transmit to Browser
4. Replay on DOM
5. GOTO 1

Ways of repainting

1. addEventListener('MozAfterPaint')
2. requestAnimationFrame()
   • CPU burning
3. new MutationObserver()
   • Only DOM changes

ReactReconcileTransaction in a nutshell

• Restores Selection after updates
• Suppresses DOM events during updates
• Source of componentDidUpdate

ON_DOM_READY_QUEUEING Transaction

            // A queue for collecting `componentDidMount` and
            // `componentDidUpdate` callbacks during transaction
            var ON_DOM_READY_QUEUEING = {
              close: function() {
                this.reactMountReady.notifyAll();
              } // ...
            };
        

Hacking CallbackQueue

            class MyCQ extends CallbackQueue {
              notifyAll() {
                super.notifyAll();
                console.log('update');
              }
            }
            PooledClass.addPoolingTo(MyCQ);
        

Hacking ReactReconcileTransaction

            class MyRRT extends ReactReconcileTransaction {
              constructor() {
                super();
                this.reactMountReady = MyCQ.getPooled(null);
              }
            }
            PooledClass.addPoolingTo(MyRRT);
            ReactUpdates.injection
                       .injectReconcileTransaction(MyRRT);
        

Hacking ReactReconcileTransaction

1. Global React Tree changes
   • Close enough to AfterPaint
2. Requires onWheel event hack
3. Doesn't help with stylesheet injections

Full Text UI Application Cycle

1. Measure DOM & generate Text UI
2. Render Text UI to STDOUT
3. Receive STDIN Events
4. Replay Events on DOM
5. GOTO 1

Conclusion: Back to Text UI

1. Text UI toolchain is not limited
2. HTML+CSS+JS=TUI
3. Declarative Text UI with React!
4. It's easy to extend React unsing injections