WhoBuilt

“Over the Top”: Building Streaming Apps for Mobile, Web, and Smart TVs

Sep 26, 2024· 47 min· 907 views·Watch on YouTube
#Mobile Development#Software Performance#Open Source

Speakers

Chris Tragerconference host at Callstack
Michał Miłowdirector of technology at Callstack
Mikesenior director of engineering at DIRECTV
BartCEO and tech lead at The Wid’s Group
Arushisoftware engineer on the React team at Meta
Mohead of mobile at BAM

Chris Trager hosts a panel on building streaming apps across mobile, web, and smart TVs with engineers and leaders from Callstack, DIRECTV, Meta, The Wid’s Group, and Theodo at a Callstack conference.

React Native’s growth and developer experience

Michał says debugging tools such as React Native Debugger and Flipper, along with ready-to-use libraries, have made development easier than it was in React Native’s early years. He also describes a shift from mostly startup projects to adoption by large companies including Microsoft and Amazon.

The demands of streaming across platforms

Mike says DIRECTV’s React Native app, started in 2019, serves platforms including Fire TV, tvOS, iOS, Android, tablets, Samsung devices, and web. Supporting live TV as well as video on demand requires platform-specific work, a strong CI/CD pipeline, and collaboration across engineering, product, and design.

Video reliability, focus, and performance

Bart describes the challenge of keeping React Native Video stable across platforms while supporting DRM, including offline DRM and devices without Google services. Mike explains that TV focus navigation needs careful planning: teams must map where remote-control input moves focus while keeping interactions responsive. Michał recommends production observability, Reassure for performance regression checks, and Flashlight for measuring FPS, memory, and CPU usage.

New architecture and universal apps

Arushi says Meta’s React team builds framework capabilities used by Meta products and the wider ecosystem. She groups the open-source rollout of React Native’s new architecture into library migration, backward compatibility, and interoperability, and says performance is a byproduct rather than its primary purpose. Mo argues for apps that share a common API while adapting to native platforms, including fragmented TV systems, and cites production React apps targeting tvOS, Android TV, web, and set-top boxes.

Live video and engineering leadership

Bart defines glass-to-glass latency as the time from camera capture to display, noting that real-time streams may take two to three seconds and ultra-low latency can be about half a second. He describes interactive features such as live chat, donations, and drawing on video frames. Mike says staying involved in code reviews and small team utilities helps him make technical decisions as an engineering leader.

Takeaways

  • List target platforms early and identify the features, such as video playback, that need platform-specific work.
  • For TV apps, design focus paths deliberately and keep the immediate response fast; load secondary details afterward when needed.
  • Monitor production performance and add repeatable checks for rendering time, re-renders, frame rate, memory, and CPU.
  • Treat a framework migration as work across libraries, API compatibility, and interoperability, rather than a performance upgrade by itself.
  • For live video features, measure end-to-end latency and account for how it affects synchronized interaction.

Mentioned in this talk

CallstackThe Wid’s GroupBAMDIRECTVMetaReact Native VideoFlipperReact Native DebuggerReact Native DirectoryFire devicesExpo ModulesReassureFlashlightRunpod FlashReactReact NativetvOSFabricDRMTurboModulesFlutterReact Native TVUniversal React

Search inside this talk

What was claimed 20

Related talks