I have recently implemented my own GUI framework/toolkit for terminal-based programs and learned a great deal about how GUIs work. This is the first in a series of videos in which I attempt to explain how GUIs and UI frameworks work underneath.
This is the second episode in the "How GUIs Work" series. We talk about UI components, their hierarchical tree structure, and show a couple of example programs that demonstrate this structure. We also, talk about XML-based UI frameworks and mention a few examples of those in the industry.
In this episode 3 of How GUIs Works: I chat with Huiqi about how layouts in GUIs work. In particular, I describe my experience of first developing a homegrown layout algorithm, and then later switching to Flutter's layout scheme (I stole their algorithm by reimplementing it, not using any of their code). Here is a link to Flutter's layout algorithm: https://flutter.dev/docs/resources/architectural-overview#layout-and-rendering. Here is a link to their Google Talk https://www.youtube.com/watch?v=UUfXWzp0-DU. Also worth checking out is Jeremy Rose's article on this topic: https://blog.nornagon.net/ui-layout-algorithms/.