Angular with NativeScript: Creating the Blackout Lighting Console

Lighting consoles are electronic devices used in theatrical lighting design to control stage lights. The nstudio team developed Blackout, an iPad app that provides the same features as standalone consoles. The app supports DMX control protocols and Bluetooth control via LumenRadio TimoTwo chips. Blackout maintains a constant data transmission rate to connected lights while delivering a smooth UI with real-time data indicators and detailed fixture controls. It uses Angular 17+ and NativeScript 8+ for development, combining Angular's DI, templating, and state management with NativeScript's platform-optimized views and iOS CoreMIDI integration. Angular's declarative component architecture, directives, and state management via NgRx helped create sophisticated UI features, such as MIDI Learn Mode and the nsIf directive, which improves performance by detaching views from change detection until needed. By pairing Angular with NativeScript, the team was able to style UIKit views with Tailwind CSS and use platform-specific APIs and techniques. NgRx played a crucial role in ensuring a rock-solid state layer for managing data flow and minimizing unnecessary calculations, while NativeScript enabled the use of platform-optimized rendering engines for ideal performance and natural device behavior.