1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
[[!meta title="Yak-shaving to a UI framework"]]
[[!meta copyright="Copyright © 2021 Erik Anderson"]]
[[!inline pages="internal(2021/info/ui-nav)" raw="yes"]]
<!-- You can manually edit this file to update the abstract, add links, etc. --->
# Yak-shaving to a UI framework
Erik Anderson
[[!inline pages="internal(2021/info/ui-schedule)" raw="yes"]]
[[!table header="no" class="speaker-details" data="""
Name pronunciation: | ERR-ick ANN-dur-sun
Pronouns: | he/him
Homepage: | <https://github.com/ebpa/tui.el>
Preferred contact info: | <erik@ebpa.link>
"""]]
Tui.el is a textual User Interface (UI) framework for Emacs Lisp
modeled after the popular JavaScript 'React' framework. This package
implements React Component API's with the goal of simplifying
development of interactive UI's for all Emacs users- regardless of
their prior experience with React or web programming. Components
provide a useful functional unit for constructing complex interfaces
declaratively and also eliminate much of the burden associated with
updating textual content as application state changes. This talk will
cover use of the tui.el API and its operation in a textual environment
by implementing some basic UI's.
# Discussion
Pad:
- Q1: A common issue I have with Magit status buffers is that focus
get lost easily when staging hunks since scroll gets lost during
re-render (Magit attempts at recovering). Are we getting magit-tui?
- A: It is certainly possible and compatible.
- I am interested in tui.el but haven't looked at it too closely
yet. Have been entertaining the idea of something like this for
a long time now. -- jonas (magit maintainer)
- Q2:We can update images as well?! Like SVG, or the comics you shown.
This is awesome!
- A: Yes, that's possible.
- Q3:Have you tried to display any diagram? Like UML sequence diagrams
- Q4: So does tui implement some sort of DOM model?
- A: Yes.
- Q5: How does performance compare with some other libraries, like
EWOC, magit-section, tabulated-list? e.g. to render a view with
thousands of elements (and thank you for your work on this, it's
very exciting for Emacs's future)
- A: In general EWOC and tabulated-list should perform better, and
tui still needs some optimization. TUI has the potential to be
better, but it needs some work.
- Q6: Are you planning to contribute tui.el to emacs core?
- A: Eventually, once its polished and more robust.
- Q7: What is the memory overhead like, e.g. I guess values are hashed
to detect whether items need to be re-rendered?
- A: Haven't done any memory profiling, but memory overhead could
probably be an issue.
- Q8: Awesome. Would lack of concurrency/multi-threading in Emacs be
an issue?
BBB:
- like in dogears.el readme
- So I'm really interested in potentially using tui for Ement.el
- 1. For the room buffers, showing events in the chat rooms. That sometimes has thousands of events, so that's why I asked about performance for that case.
- It seems like it could be very helpful for re-rendering some events when their content changes, e.g. when messages are edited, when coalescing adjacent join/leave events...
- EWOC does work for that to some extent, but I've been unable to get nested EWOCs to work correctly so far, so TUI is an interesting alternative
- yeah, EWOC uses markers too AFAIK, and it seems to perform well enough even with 2000-3000 events in a buffer
- oh yeah, your grid idea
- yes, sorting and filtering, temporarily hiding elements!
- like "show all messages from this user or mentioning that user in this room"
- and then press a key and all the others are shown again
- expanding larger images from thumbnails, captions for files, etc
- like Element.io but in Emacs with TUI, that would be great
- that's the official Matrix Web client
- Sounds great! well thanks for the presentation, I really look forward to TUI's progress! maybe someday I can help with it, in the distant future... I have too many Emacs projects already :)
- hmm, a TUI library for taxy.el... more ideas!
- TUI would be like a natural frontend for taxy.el as a backend
- are you on Matrix by any chance?
- I'm bad with email, but when I have time to check out TUI in more detail, I look forward to it!
IRC:
- I'm trying the run your demos of tui... it seems that (add-to-list 'load-path "~/usrc/tui.el/") is not enough, I have to either add the subdirectories by hand or to run a standard function - whose name I don't know - to add the subdirs...
- hey, I'm trying to run your demos of tui... I had to add the subdirectories to the load-path manually to make (require 'tui-tic-tac-toe) work. my notes are here: https://0x0.st/-7dV.txt
- tui.el is very exciting, should open up a new era of more advanced UI in Emacs
- seems like we can get some really cool emacs ui going in combination with svg.el
- combine with the magit approach to menus (transient etc) and something very nice is coming!
- I think anything you can show in a buffer should work with this, so images, text, whatever.
- tui.el is just too cool: I am going to try it for sure :D
IRC feedback:
- I like the bird mascot on the repo readme :)
- FYI if you would want it to show at the side of the readme, you can see the Org markup I use to accomplish that in some of my readmes
# Outline
- 5-10 minutes:
- Problem space: UI implementation complexity.
- API introduction: Displaying content, Components.
- Visual taste of dashboards and applications built with tui.
<!--- 20 minutes:
- (same as the above- less some visual tour, plus:)
- Introducing **state** to your UI.
- Demonstration via development of a trivial web comic reader.
- 40 minutes:
- (same as the above, plus:)
- Demonstration of developer helpers/utility functions for:
- Explanation of the reconciliation algorithm.
- More Emacsisms: Implementing a comic dashboard component.
--->
[[!inline pages="internal(2021/captions/ui)" raw="yes"]]
[[!inline pages="internal(2021/info/ui-nav)" raw="yes"]]
|
