diff options
Diffstat (limited to '2021/talks/ui.md')
| -rw-r--r-- | 2021/talks/ui.md | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/2021/talks/ui.md b/2021/talks/ui.md new file mode 100644 index 00000000..0fbf9322 --- /dev/null +++ b/2021/talks/ui.md @@ -0,0 +1,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"]] |