Adventures with React and JUCE: Building UI with Typescript in a C++ Application
summary
A large C++ JUCE audio app implements its UI in React + Typescript using react-juce, with C++ sending gain-peak updates on a 100 ms timer into the JS world and the JS reconciler updating a virtual tree. It uses Hermes bytecode for embedded execution and Yoga for flexbox layout, supports hot-reload of JS files, and mixes native JUCE components for high‑performance drawing. It works functionally but has limited components (vertical-only list), requires careful optimization to avoid reconciler stalls (~200 ms renders), and adds a learning and maintenance cost.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 0:30Who am I
- 5:11JUCE
- 6:54Who uses JUCE
- 7:22JUCE class index
- 8:32JUCE Graphics
- 9:25JUCE Graph
- 9:38React
- 10:48Is programming about to go obsolete
- 12:45What is JavaScript
- 15:03Why use React
- 20:51React Properties
- 25:09React is Reactive
- 28:02React DOM
- 28:35React Native
- 30:14React Native Example
- 32:06React Juice Introduction
- 36:19Hermes
- 39:31Yoga
- 40:21Demo
- 40:48UI Walkthrough
- 42:44React Code Walkthrough
- 51:36React Editor Walkthrough
related talks
29mEvolving the Visual Programming Environment with React
57mBuilding Scalable, Maintainable Apps Using TypeScript and React
27mNative Web Apps: React and WebAssembly to Rewrite Native Apps
01h 04mWhat makes React different?
27mI Heard React Was Good
34mI Heard React Was Good
30mReact Native
30mNative Web Apps: React, JS & WebAssembly to rewrite native apps