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
|
[[!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
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
BBB:
- like in dogears.el readme
- So I'm really interested in potentially using tui for Ement.el
- there are 2 or 3 ways I could imagine using it...
- 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...
- That sounds interesting. I don't know anything about React
- 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
- yes IIRC
- 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
- that would be SO useful
- yes, sorting and filtering, temporarily hiding elements!
- that would be SO useful
- 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
- ahh, I need that! :)
- 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
- I think it uses React
- but I'm not sure
- 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
- that would be fun :)
- are you on Matrix by any chance?
- maybe someday, need to get more people "jacked in" :)
- I'm bad with email, but when I have time to check out TUI in more detail, I look forward to it!
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"]]
|
