User interface programming is one of the most critical — and complex — aspects of building a production tool. The choices you make about your UI architecture will shape how your tool feels to use and how easy it is to extend over time.
Immediate Mode vs. Retained Mode
Immediate mode UIs are redrawn every frame. The application issues drawing calls each time the screen refreshes. Examples include OpenGL and P5.js. The UI has no memory of what was drawn previously.
Retained mode UIs maintain a persistent scene graph or object model. The framework tracks what objects exist and handles redrawing automatically. Examples include the browser DOM, React, UIKit, and AppKit.
Retained mode is generally easier to reason about for complex UIs; immediate mode offers more direct control and is common in graphics-intensive applications like games and creative coding tools.
HTML / CSS / JavaScript as a UI Framework
Pros: Rich layout engine, broad platform support, large ecosystem, easy to prototype rapidly.
Cons: Not always the best fit for complex interactive tools — the browser's rendering model can introduce performance bottlenecks for high-frequency updates. The impedance mismatch between the DOM and complex application state can be challenging.
React and the Virtual DOM
React is a JavaScript library for building UIs based on components. Key ideas:
- Components: Small, reusable pieces of UI that manage their own state and can be composed into larger interfaces.
- Unidirectional data flow: Data flows down from parent to child via props; changes flow up via callbacks. This makes the application state predictable.
- Virtual DOM: React maintains a lightweight in-memory representation of the DOM and diffs it against the real DOM, applying only the minimal set of changes needed.
Native Frameworks
For tools that need deep platform integration or high performance, native frameworks may be preferable:
- AppKit / UIKit: Apple's frameworks for macOS and iOS respectively. Tightly integrated with the OS, excellent performance.
- Qt: A cross-platform C++ framework widely used for creative and scientific applications.
- Electron: Wraps a Chromium browser and Node.js runtime in a native app shell, allowing HTML/CSS/JS apps to be distributed as native applications. Used by VS Code, Figma, Slack.
Choosing the Right Approach
Consider: target platform, team expertise, performance requirements, and how long you have to build. For most student projects in this class, a web-based UI (React, vanilla JS, or P5) is the fastest path to a working prototype.
Links & Resources
- React — Official documentation.
- Electron — Build cross-platform desktop apps with JavaScript.
- Qt — Cross-platform C++ framework.
Assignment
Work on the deliverables from the stand-up meeting.