[Youtube Shorts] Navigation Options for Multi-Page Apps in Tizen TV
When building a multi-page Tizen TV app, one of the most critical decisions is how to handle navigation. There are six distinct approaches — each with real trade-offs for remote-control usability and developer experience.
Option 1: Single HTML Page with a Router
Use React Router, Angular Router, or a similar framework to swap views within a single HTML page. This approach is fast, supports persistent state, enables deep links, and delivers smooth UX. The downside is that you must manually handle D-pad focus and the back key. Best for professional apps with lists, media, login flows, and deep linking.
Option 2: Single DOM with Hash or History API
Show or hide pages within a single DOM using the hash change or History API — no framework required. This keeps dependencies minimal and gives you full control, but means more boilerplate and manual focus and back-key logic. A good fit for small to medium apps or proof-of-concept projects.
Option 3: Separate HTML Files
Navigate between fully separate HTML files using location.href. The mental model is simple and assets are scoped per page. However, full page reloads mean lost state and slightly slower transitions on TV hardware. Only recommended for very small apps with minimal state.
Option 4: Parent Shell with iFrames
A parent shell page loads sub-pages inside iframes for strong isolation and sandboxing of legacy widgets. The cost is painful focus management across frame boundaries and significant overhead. Use this only when sandboxing is absolutely required.
Option 5: Canvas or WebGL Scene-Based Navigation
Pages are rendered as scenes on a canvas or WebGL surface, enabling ultra-smooth animations and a solid focus model ideal for media grids. The paradigm is fundamentally different from HTML-based development and carries a steep learning curve. Reserve this for media-rich apps that need polished motion and peak performance.
Option 6: Tizen Application Control
Use Tizen’s Application Control API to open other apps within the ecosystem — perfect for cross-app handoffs and deep links. This is not in-app navigation; each transition is a cold start and requires managing app IDs and permissions. Use it for special integrations, not regular page changes.
The overall winner? Single-page applications with a router and spatial navigation. This combination delivers the best speed, state management, and TV-grade UX. Watch the full video to see all six options compared side by side in just two minutes!