Frontend Development Strategies For WebUI
As WebUI is increasingly utilized for plugin UI and web audio tools, we propose some tools and strategies that can be leveraged from traditional web application frontend development.
A web-based UI may benefit from a wide range of frameworks, documentation, and support available online. Web-based UI enables theming and accessibility support. Where there may be concerns over performance, browser development tools help target smooth experiences at 60 frames per second or above. We cover ten such tips and provide demos and a GitHub pointer with these references plus any others might suggest in Q/A and discussions.
Topics covered (briefly, with references) include:
- Web Components
- Popular third-party frameworks tooling
- Static Analysis and Build Tools
- Theming
- Accessibility
- Web-based DSP Development
- Testability
- Browser DevTools Part 1: Iterative Development and the Inspectors
- Browser DevTools Part 2: Performance Analysis and Animation Timing
- Benefits of Community
Note: I'm not affiliated with any products mentioned here.
Travis Skare
Student
Stanford University
I'm a software developer and PhD Student; research interests include real-time modal and percussion synthesis on GPUs. In the past, I worked in industry at Google on client-side products that leveraged WebUI (e.g. Chrome, Toolbar), and am interested in applying WebUI to current projects including a GPU-powered drum synthesizer and a spatial audio reverberator.