Back To Text UI

Paradoxically that today it is easier to create GUI than Text UI. Developer has an arsenal of different GUI libraries and layout engines. When one decides to write Terminal Text UI app he faces obstacles of Text UI DSL Library, imperative layouts, constantly increasing complexity and underdeveloped approaches. In this talk I will show you how to ask browser layout engine for help, how to avoid slavery of DSL and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.

Video https://www.youtube.com/watch?v=ee_U2t-8L48

Transcript

1. _
   _
   _
   _ _ _
   | _
   _ ) _
   _ _ _
   _
   _
   | | _
   _ | |
   _ _
   _
   _
   | _ \ / _
   ` |
   / _
   _
   | |
   / / | _
   _
   / _ \
   | |
   _
   ) | (
   _
   | | (
   _
   _
   | < | |
   | (
   _
   ) |
   |
   _
   _
   _
   _
   / \
   _
   _
   ,
   _
   |
   \
   _
   _
   _
   |
   _
   |
   \
   _
   \ \
   _
   _
   \
   _
   _
   _
   /
   |
   _ _
   |
   _
   _
   _
   _ _
   | |
   _ | | | |
   _ _
   |
   | |
   / _ \ \
   / / _
   _
   | | | | |
   | |
   | | _
   _
   /
   > <
   | |
   _ | |
   _
   | |
   | |
   |
   _
   |
   \
   _
   _
   _
   /
   _
   /
   \
   _
   \
   \
   _
   _
   | \
   _
   _
   _
   /
   |
   _
   _
   _
   |
   

   View Slide

2. View Slide

3. Writing, 3200 BCE
   

   View Slide

4. Woodblock printing, 200 AE
   

   View Slide

5. Printing press, 1440
   

   View Slide

6. Typewriter, 1860
   

   View Slide

7. Terminal, 70-80th
   

   View Slide

8. R
   e
   n
   d
   e
   r t
   e
   x
   t
   s
   ┌
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ┐
   | D
   r
   a
   w T
   e
   x
   t U
   I |
   └
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ­
   ┘
   █
   8
   

   View Slide

9. .
   .
   .
   a
   n
   d f
   o
   r A
   S
   C
   I
   I A
   r
   t
   =
   =
   =
   =
   o o
   ~
   ~
   /
   ~
   \ _
   \
   ­ /
   _
   ( o
   o
   | _
   _
   _ / \ / \
   _
   \
   =
   /
   _ / (
   )
   \ /
   /
   | | |
   \
   \
   / _ \ _
   |
   _
   _
   _
   _
   _
   |
   _ /
   / | | |
   /
   /
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   =
   = | | =
   =
   = | | /
   / | | /
   /
   | | |
   _
   | O |
   _
   |
   (
   ' |
   =
   =
   =
   (
   |
   |
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   | |
   | O |
   | | |
   | |
   | | |
   |
   _
   _
   *
   _
   _
   |
   | (
   _
   )
   (
   _
   )
   | | |
   ~ \
   _
   _
   _
   / ~
   | |
   _
   |
   |
   _
   |
   | | /
   =
   \ /
   =
   \ /
   =
   \ |
   _
   |
   |
   _
   |
   _
   |
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   _
   |
   _
   _
   _
   _
   _
   _
   _
   [
   _
   ]
   _
   [
   _
   ]
   _
   [
   _
   ]
   _
   _
   _
   _
   /
   _
   _
   ]
   [
   _
   _
   \
   _
   _
   9
   

   View Slide

10. Text UI of Dired, 1974
    

    View Slide

11. Graphic UI, 1985
    

    View Slide

12. Window Art
    

    View Slide

13. View Slide

14. 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»
    14
    

    View Slide

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

    View Slide

16. > w
    g
    e
    t ­
    q
    O
    ­ f
    i
    l
    e | b
    s
    d
    t
    a
    r ­
    x
    v
    f
    ­
    

    View Slide

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

    View Slide

18. Blessed.js Demo
    

    View Slide

19. Blessed.js
    v
    a
    r b
    o
    x = b
    l
    e
    s
    s
    e
    d
    .
    b
    o
    x
    (
    {
    s
    t
    y
    l
    e
    : {
    f
    g: '
    w
    h
    i
    t
    e
    '
    ,
    b
    g: '
    m
    a
    g
    e
    n
    t
    a
    '
    }
    ,
    b
    o
    r
    d
    e
    r: {
    t
    y
    p
    e
    : '
    l
    i
    n
    e
    '
    }
    ,
    t
    a
    g
    s
    : t
    r
    u
    e
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    0
    8
    .
    19
    

    View Slide

20. Simple lib – simple DSV
    i
    n
    q
    u
    i
    r
    e
    r
    .
    p
    r
    o
    m
    p
    t
    (
    [
    {
    t
    y
    p
    e
    : '
    r
    a
    w
    l
    i
    s
    t
    '
    ,
    n
    a
    m
    e
    : '
    t
    u
    i
    '
    ,
    m
    e
    s
    s
    a
    g
    e
    : '
    A
    r
    e T
    U
    I
    s c
    o
    o
    l
    ?
    '
    ,
    c
    h
    o
    i
    c
    e
    s
    : [
    '
    Y
    u
    p
    '
    , '
    W
    h
    y d
    o y
    o
    u a
    s
    k
    ?
    '
    ]
    }
    ]
    , (
    a
    n
    s
    w
    e
    r
    s
    ) =
    > {
    }
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    20
    

    View Slide

21. Inquirer.js Demo
    

    View Slide

22. Creating UI engine is challenging
    1. Layout Math
    • Relative positioning
    • Dynamic box dimensions
    2. Simple yet familiar DSV
    • Naming, Structure, Styling, ...
    22
    

    View Slide

23. View Slide

24. _
    _ _
    _ _
    _
    _
    _
    _
    _
    _ _
    _ _
    _ _
    _
    _
    | | | |
    | |
    | |
    _
    | |
    | |
    | |
    _
    | |
    |
    _ _
    |
    | |
    | |
    | | | | | |
    | |
    | | | | | |
    | |
    _
    _
    _
    | _ | | | | |
    |
    _
    |
    | |
    | |
    |
    _
    _
    | |
    _
    _
    | |
    _
    _
    _
    | |
    _
    | |
    _
    |
    |
    _
    _
    _
    _
    _
    _
    _
    |
    _
    _
    _
    _
    _
    _
    _ _
    _ _
    _ _
    _
    _
    | |
    | | | |
    | |
    |
    _ _
    |
    | | | |
    | |
    | | | |
    _
    | |
    | |
    | | | |
    | |
    | | | |
    | |
    

    View Slide

25. <
    d
    i
    v s
    t
    y
    l
    e
    =
    "
    .
    .
    .
    "
    >
    C
    o
    n
    t
    e
    n
    t
    <
    /
    d
    i
    v
    >
    

    View Slide

26. ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    | C
    o
    n
    t
    e
    n
    t |
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    █
    

    View Slide

27. <
    d
    i
    v s
    t
    y
    l
    e
    =
    "
    .
    .
    .
    "
    >
    A
    d
    v
    a
    n
    c
    e
    d
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v s
    t
    y
    l
    e
    =
    "
    .
    .
    .
    "
    >
    L
    a
    y
    o
    u
    t
    <
    /
    d
    i
    v
    >
    

    View Slide

28. ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    |
    A
    d
    v
    a
    n
    c
    e
    d
    |
    |
    L
    a
    y
    o
    u
    t
    |
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    

    View Slide

29. <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    c
    "
    >
    <
    u
    l c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    "
    >
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    -
    s
    h
    o
    r
    t
    c
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    -
    s
    h
    o
    r
    t
    c
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    -
    s
    h
    o
    r
    t
    c
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    -
    s
    h
    o
    r
    t
    c
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    "
    >
    <
    s
    p
    a
    n c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    m
    e
    n
    u
    _
    _
    i
    t
    e
    m
    -
    s
    h
    o
    r
    t
    c
    <
    /
    u
    l
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    e
    n
    t
    "
    >
    {
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    l
    e
    f
    t
    P
    a
    n
    e
    l ? t
    h
    i
    s
    .
    _
    r
    e
    n
    d
    e
    r
    P
    a
    n
    e
    l
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    l
    e
    f
    t
    P
    a
    n
    e
    {
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    r
    i
    g
    h
    t
    P
    a
    n
    e
    l ? t
    h
    i
    s
    .
    _
    r
    e
    n
    d
    e
    r
    P
    a
    n
    e
    l
    (
    t
    h
    i
    s
    .
    p
    r
    o
    p
    s
    .
    r
    i
    g
    h
    t
    P
    a
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    s
    o
    l
    e
    "
    >
    <
    i
    n
    p
    u
    t c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    s
    o
    l
    e
    _
    _
    i
    n
    p
    u
    t
    " t
    y
    p
    e
    =
    "
    t
    e
    x
    t
    " d
    e
    f
    a
    u
    l
    t
    V
    a
    l
    u
    e
    =
    "
    ~
    <
    /
    d
    i
    v
    >
    <
    u
    l c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    s
    "
    >
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    "
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    _
    _
    n
    u
    m
    b
    e
    r
    "
    >
    1
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    _
    _
    n
    a
    m
    e
    "
    >
    H
    e
    l
    p
    <
    /
    d
    i
    v
    >
    <
    /
    l
    i
    >
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    "
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    _
    _
    n
    u
    m
    b
    e
    r
    "
    >
    2
    <
    /
    d
    i
    v
    >
    <
    d
    i
    v c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    _
    _
    n
    a
    m
    e
    "
    >
    M
    e
    n
    u
    <
    /
    d
    i
    v
    >
    <
    /
    l
    i
    >
    <
    l
    i c
    l
    a
    s
    s
    N
    a
    m
    e
    =
    "
    c
    o
    n
    t
    r
    o
    l
    "
    >
    29
    

    View Slide

30. React Midnight Commander
    

    View Slide

31. Borrow from DOM API/CSSOM
    • e
    l
    e
    m
    .
    g
    e
    t
    C
    l
    i
    e
    n
    t
    R
    e
    c
    t
    s
    (
    ) — Layout Math
    • g
    e
    t
    C
    o
    m
    p
    u
    t
    e
    d
    S
    t
    y
    l
    e
    (
    e
    l
    e
    m
    ) — Styles
    • DOM Event system
    • Document Structure
    31
    

    View Slide

32. <
    d
    i
    v s
    t
    y
    l
    e
    =
    "
    .
    .
    .
    "
    >
    C
    o
    n
    t
    e
    n
    t
    <
    /
    d
    i
    v
    >
    

    View Slide

33. 9 P
    i
    x
    e
    l
    Content 3
    p
    x
    

    View Slide

34. Translating to TUI
    l
    e
    t s
    t
    y
    l
    e
    s = w
    i
    n
    d
    o
    w
    .
    g
    e
    t
    C
    o
    m
    p
    u
    t
    e
    d
    S
    t
    y
    l
    e
    (
    d
    i
    v
    )
    ;
    l
    e
    t r
    e
    c
    t = d
    i
    v
    .
    g
    e
    t
    C
    l
    i
    e
    n
    t
    R
    e
    c
    t
    s
    (
    )
    ;
    l
    e
    t b
    o
    x = r
    e
    n
    d
    e
    r
    B
    o
    x(
    r
    e
    c
    t
    , s
    t
    y
    l
    e
    s
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    34
    

    View Slide

35. 9 S
    y
    m
    b
    o
    l
    s
    3
    s
    ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    | |
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    

    View Slide

36. Translating textNode to TUI
    l
    e
    t s
    t
    y
    l
    e
    s = w
    i
    n
    d
    o
    w
    .
    g
    e
    t
    C
    o
    m
    p
    u
    t
    e
    d
    S
    t
    y
    l
    e
    (
    d
    i
    v
    )
    ;
    l
    e
    t t
    e
    x
    t = d
    i
    v
    .
    f
    i
    r
    s
    t
    C
    h
    i
    l
    d
    ;
    l
    e
    t r
    a
    n
    g
    e = d
    o
    c
    u
    m
    e
    n
    t
    .
    c
    r
    e
    a
    t
    e
    R
    a
    n
    g
    e
    (
    )
    ;
    r
    a
    n
    g
    e
    .
    s
    e
    l
    e
    c
    t
    N
    o
    d
    e
    C
    o
    n
    t
    e
    n
    t
    s
    (
    t
    e
    x
    t
    )
    ;
    l
    e
    t r
    e
    c
    t = r
    a
    n
    g
    e
    .
    g
    e
    t
    C
    l
    i
    e
    n
    t
    R
    e
    c
    t
    s
    (
    )
    ;
    l
    e
    t t
    e
    x
    t
    B
    o
    x = r
    e
    n
    d
    e
    r
    T
    e
    x
    t(
    r
    e
    c
    t
    , s
    t
    y
    l
    e
    s
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    36
    

    View Slide

37. 9 S
    y
    m
    b
    o
    l
    s
    3
    s
    ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    | |
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    C
    o
    n
    t
    e
    n
    t
    

    View Slide

38. ┌
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┐
    | |
    └
    ­
    ­
    ­
    ­
    ­
    ­
    ­
    ┘
    C
    o
    n
    t
    e
    n
    t
    

    View Slide

39. DOM STDOUT
    →
    

    View Slide

40. STDIN DOM
    →
    

    View Slide

41. Forwarding Input events
    1. Read from S
    T
    D
    I
    N
    2. Serialize Event
    3. Transmit to Browser
    4. Replay on D
    O
    M
    5. G
    O
    T
    O 1
    41
    

    View Slide

42. View Slide

43. Ways of repainting
    1. a
    d
    d
    E
    v
    e
    n
    t
    L
    i
    s
    t
    e
    n
    e
    r
    (
    'M
    o
    zA
    f
    t
    e
    r
    P
    a
    i
    n
    t
    '
    )
    2. r
    e
    q
    u
    e
    s
    t
    A
    n
    i
    m
    a
    t
    i
    o
    n
    F
    r
    a
    m
    e
    (
    )
    • CPU burning
    3. n
    e
    w M
    u
    t
    a
    t
    i
    o
    n
    O
    b
    s
    e
    r
    v
    e
    r
    (
    )
    • Only DOM changes
    43
    

    View Slide

44. componentDidUpdate
    event bubbling?
    

    View Slide

45. No such thing!
    

    View Slide

46. Let's hack React!
    

    View Slide

47. ReactReconcileTransaction in a nutshell
    • Restores Selection after updates
    • Suppresses DOM events during updates
    • Source of c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    U
    p
    d
    a
    t
    e
    47
    

    View Slide

48. ON_DOM_READY_QUEUEING Transaction
    /
    / A q
    u
    e
    u
    e f
    o
    r c
    o
    l
    l
    e
    c
    t
    i
    n
    g `
    c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    M
    o
    u
    n
    t
    ` a
    n
    d
    /
    / `
    c
    o
    m
    p
    o
    n
    e
    n
    t
    D
    i
    d
    U
    p
    d
    a
    t
    e
    ` c
    a
    l
    l
    b
    a
    c
    k
    s d
    u
    r
    i
    n
    g t
    r
    a
    n
    s
    a
    c
    t
    i
    o
    n
    v
    a
    r O
    N
    _
    D
    O
    M
    _
    R
    E
    A
    D
    Y
    _
    Q
    U
    E
    U
    E
    I
    N
    G = {
    c
    l
    o
    s
    e
    : f
    u
    n
    c
    t
    i
    o
    n
    (
    ) {
    t
    h
    i
    s
    .
    r
    e
    a
    c
    t
    M
    o
    u
    n
    t
    R
    e
    a
    d
    y
    .n
    o
    t
    i
    f
    y
    A
    l
    l(
    )
    ;
    } /
    / .
    .
    .
    }
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    48
    

    View Slide

49. Hacking CallbackQueue
    c
    l
    a
    s
    s M
    y
    C
    Q e
    x
    t
    e
    n
    d
    s C
    a
    l
    l
    b
    a
    c
    k
    Q
    u
    e
    u
    e {
    n
    o
    t
    i
    f
    y
    A
    l
    l
    (
    ) {
    s
    u
    p
    e
    r
    .
    n
    o
    t
    i
    f
    y
    A
    l
    l
    (
    )
    ;
    c
    o
    n
    s
    o
    l
    e
    .
    l
    o
    g
    (
    '
    u
    p
    d
    a
    t
    e
    '
    );
    }
    }
    P
    o
    o
    l
    e
    d
    C
    l
    a
    s
    s
    .
    a
    d
    d
    P
    o
    o
    l
    i
    n
    g
    T
    o
    (
    M
    y
    C
    Q
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    49
    

    View Slide

50. Hacking ReactReconcileTransaction
    c
    l
    a
    s
    s M
    y
    R
    R
    T e
    x
    t
    e
    n
    d
    s R
    e
    a
    c
    t
    R
    e
    c
    o
    n
    c
    i
    l
    e
    T
    r
    a
    n
    s
    a
    c
    t
    i
    o
    n {
    c
    o
    n
    s
    t
    r
    u
    c
    t
    o
    r
    (
    ) {
    s
    u
    p
    e
    r
    (
    )
    ;
    t
    h
    i
    s
    .
    r
    e
    a
    c
    t
    M
    o
    u
    n
    t
    R
    e
    a
    d
    y = M
    y
    C
    Q.
    g
    e
    t
    P
    o
    o
    l
    e
    d
    (
    n
    u
    l
    l
    )
    ;
    }
    }
    P
    o
    o
    l
    e
    d
    C
    l
    a
    s
    s
    .
    a
    d
    d
    P
    o
    o
    l
    i
    n
    g
    T
    o
    (
    M
    y
    R
    R
    T
    )
    ;
    R
    e
    a
    c
    t
    U
    p
    d
    a
    t
    e
    s
    .
    i
    n
    j
    e
    c
    t
    i
    o
    n
    .
    i
    n
    j
    e
    c
    t
    R
    e
    c
    o
    n
    c
    i
    l
    e
    T
    r
    a
    n
    s
    a
    c
    t
    i
    o
    n(
    M
    y
    R
    R
    T
    )
    ;
    0
    1
    .
    0
    2
    .
    0
    3
    .
    0
    4
    .
    0
    5
    .
    0
    6
    .
    0
    7
    .
    0
    8
    .
    0
    9
    .
    50
    

    View Slide

51. Hacking ReactReconcileTransaction
    1. Global React Tree changes
    • Close enough to AfterPaint
    2. Requires o
    n
    W
    h
    e
    e
    l event hack
    3. Doesn't help with stylesheet injections
    51
    

    View Slide

52. Full Text UI Application Cycle
    1. Measure D
    O
    M & generate Text UI
    2. Render Text UI to S
    T
    D
    O
    U
    T
    3. Receive S
    T
    D
    I
    N Events
    4. Replay Events on D
    O
    M
    5. G
    O
    T
    O 1
    52
    

    View Slide

53. Conclusion: Back to Text UI
    1. Text UI toolchain is not limited
    2. H
    T
    M
    L+ C
    S
    S+ J
    S= T
    U
    I
    3. Declarative Text UI with React!
    4. It's easy to extend React unsing injections
    53
    

    View Slide

54. Questions?
    

    View Slide

55. See more on GitHub
    

    View Slide

56. g
    o
    o
    .
    g
    l
    /
    E
    h
    w
    p
    a
    2
    

    View Slide