path: root/2021/talks/ui.md

[[!meta title=""Yak-shaving to a UI framework" (/"Help! I accidentally yak-shaved my way to writing a UI framework because overlays were slow")"]]
[[!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" (/"Help! I accidentally yak-shaved my way to writing a UI framework because overlays were slow")
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://ebpa.link>
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.



# 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"]]