TL;DR: Building apps for Smart TVs with React is nothing like the web. Here’s how we made a sports streaming platform stay stable and responsive on Samsung TVs — even with memory limits, performance quirks, and old hardware.
When we were asked to bring a sports streaming app to millions of Samsung Smart TVs — including models as old as 2017 — we knew performance and compatibility would be our biggest hurdles.
And yes, those hurdles were real. Even after months of tuning, older Samsung models still push the limits — memory leaks, dropped frames, unpredictable behavior. But the app holds up. It recovers, it doesn’t crash, and that’s a win when you’re running React on a TV from 2017.
About the Project
Our client, NativeWaves, delivers interactive streaming experiences for sports and entertainment. Together with B1 SmartTV, they launched Sportworld, a sports hub preinstalled on Samsung TVs in Germany.
Our task was to rebuild the app for Tizen OS, and make the product ready for future ports to WebOS and FireTV – while implementing new interactive features such as switching camera angles, jumping into live replays, and exploring on-demand content.
Eventually, the platform became part of a partnership with the German Bundesliga — the country’s top professional football league — giving fans access to live multi-angle match experiences.
Engineering Challenge
Developing for Smart TVs is a different world. We had to make sure the app:
- Runs smoothly even on older Samsung devices (2017+ models) with limited memory and CPU power.
- Provides a premium, lag-free video experience (live and on-demand).
- Handles multiple interactive features — without breaking UX.
On top of that, we needed a modular architecture that would make porting to other TV and mobile platforms fast and predictable.
How We Tested and Profiled It
Profiling React apps on Smart TVs turned out to be a challenge of its own. To get accurate performance data, we had to use older versions of Chrome — version 79 for 2018 TVs, and for 2016–2017 models even Chrome 56 on a separate old machine.
Modern DevTools simply don’t show what’s really happening inside Tizen’s JavaScript engine.
We also tried the emulators from Tizen Studio, but success was hit-or-miss. They only work if the host CPU supports hardware virtualization, and there’s no ARM build — which means no luck on modern Mac M1+ machines.
In practice, debugging on real devices was the only reliable way to see how the app behaved. This experience shaped our approach: measure performance where it actually runs, not where it’s convenient.
Tech Stack and Architecture
We built the frontend with a lightweight and highly responsive setup:
React.js, TypeScript
Styled-components
Zustand
Webpack
The Zustand state management turned out to be simpler and faster than Redux for our needs, while styled-components helped us dynamically theme different app sections (global and per-page themes).
We also put special effort into keeping the bundle small and efficient — avoiding unnecessary re-renders and using lazy loading for heavy components like video players and analytics modules.
The backend was provided by the client, with well-structured REST APIs documented via Swagger. This setup allowed our team to react quickly to API updates and maintain high development velocity.
Why React on Smart TVs Is Challenging
Running React on Smart TVs isn’t a matter of framework — it’s a matter of physics.
We didn’t choose React; it came with the project. Our job was to make it work inside the limits of Tizen and WebOS — where every render and memory allocation counts.
Even mid-range TVs have less CPU and RAM than most phones. Their browser engines are outdated, garbage collection is slow, and firmware updates are unpredictable. That means even small things — image size, runtime CSS, a few extra listeners — can affect playback smoothness.
We tuned what we could: cut bundle size, trimmed re-renders, and lazy-loaded heavy components. Locally, in the browser, performance looked great. On real TVs — still tight. The app stayed responsive and didn’t crash, but the margin for error was razor-thin.
What made it tricky
1. Hardware ceilings.
Older Samsung models have minimal CPU and GPU power. React’s re-renders can easily cause dropped frames or sluggish navigation. We profiled the UI, flattened component trees, and stripped unnecessary animations to keep interactions predictable during live playback.
2. Outdated JavaScript engines.
Tizen and WebOS browsers don’t match modern Chromium. Some ECMAScript features behave differently, and bundle size directly affects startup time. We tested every polyfill and adjusted TypeScript output for backward compatibility.
3. Remote-only UX.
No touch, no cursor — just arrow keys and OK. We built our own focus management layer to make remote navigation feel instant and natural.
4. Video meets React.
Multiple streams (live, replay, VOD) run alongside the UI. To prevent freezes, we isolated video logic from React’s render cycle and throttled event updates.
5. Debugging in the dark.
Smart TV SDKs give little visibility. Deploying to devices takes minutes, not seconds. We built emulators and detailed logs to reproduce TV-specific issues locally.
In the end, React on Smart TVs isn’t about libraries or syntax. It’s about patience and precision — squeezing stable performance from hardware that was never meant to run a modern frontend framework.
Key Features We Implemented
- Live HLS streaming and VOD playback
- Event calendar and promoted highlights
- QR-based login and SSO integration via Plenigo
- Paid subscriptions and campaign support for new TV models
- Custom Google Analytics events for in-depth engagement tracking
- Support for deep links (jumping directly to a live match or replay)
- Optimized UI for remote control navigation (a major UX difference vs. mobile)
These features turned Sportworld into a fully interactive second-screen experience — where fans can easily switch camera angles, follow replays, and explore on-demand content.
Portability Matters
From the start, we structured the app with platform-agnostic modules and minimal dependencies on Tizen-specific APIs.
That decision paid off later: when the client wanted to expand to WebOS and FireTV, we could reuse about 80% of the codebase with minimal adaptation.
We also designed the architecture to support future integrations — from new sports to additional analytics providers — without rewriting core logic.
Lessons Learned
React on Smart TVs is all about restraint.
Performance tuning matters more than adding libraries. Profiling tools and manual optimization saved us from micro-stutters on older models.
Plan for portability early.
Even if you start with a single platform, build with modular architecture. It makes future ports dramatically faster.
UX for TVs ≠ UX for mobile.
Designing for remote navigation and slower hardware requires a different mindset — focus on responsiveness and minimal animation complexity.
Dedicated teams work.
Our setup — 3 engineers at start, scaling to 9 at peak — kept communication efficient and made delivery predictable for the client.
What’s Next
The Sportworld app is now pre-installed on Samsung TVs in Germany and continues to evolve with new sports and interactive features.
Also, we launched the WebOS version — built on the same core architecture. The only difference: it’s not pre-installed, but available as a downloadable app through LG’s content store.
This step confirmed that our platform-agnostic setup works in practice, not just on paper. The same base now serves as a foundation for future ports to FireTV and other devices.
I prepared this article together with the engineers from our dedicated team at Promwad, who built and optimized the app. If you’d like to see the demo video and more details from the project, check out the full Sportworld Smart TV App Case on our website.
Top comments (0)