.svg)
.svg)
As the world of smart TVs evolves, delivering immersive and seamless viewing experiences is more crucial than ever. At Velotio Technologies, we take pride in our proven expertise in crafting high-quality TV applications that redefine user engagement. Over the years, we have built multiple TV apps across diverse platforms, and our mastery of cutting-edge JavaScript frameworks, like EnactJS, has consistently set us apart.
Our experience extends to WebOS Open Source Edition (OSE), a versatile and innovative platform for smart device development. WebOS OSE’s seamless integration with EnactJS allows us to deliver native-quality apps optimized for smart TVs that offer advanced features like D-pad navigation, real-time communication with system APIs, and modular UI components.
This blog delves into how we harness the power of WebOS OSE and EnactJS to build scalable, performant TV apps. Learn how Velotio’s expertise in JavaScript frameworks and WebOS technologies drive innovation, creating seamless, future-ready solutions for smart TVs and beyond.
This blog begins by showcasing the unique features and capabilities of WebOS OSE and EnactJS. We then dive into the technical details of my development journey — building a TV app with a web-based UI that communicates with proprietary C++ modules. From designing the app’s architecture to overcoming platform-specific challenges, this guide is a practical resource for developers venturing into WebOS app development.
The rest of this blog details my development experience, offering insights into the architecture, tools, and strategies for building TV apps:
The app had to connect a web-based interface (HTML, CSS, JS) to proprietary C++ services interacting with system-level processes. This setup is uncommon for WebOS OSE apps, posing two core challenges:
Solution: An Intermediate C++ Service capable of interacting with both the UI and other C++ modules
To bridge these gaps, I implemented an intermediate C++ service to:
This approach not only solved the integration challenges but also laid a scalable foundation for future app functionality.
The WebApp architecture employs MVVM (Model-View-ViewModel), Component-Based Architecture (CBA), and Atomic Design principles to achieve modularity, reusability, and maintainability.
App Architecture Highlights:
With the integration architecture in place, I focused on UI development. The D-pad compatibility required for smart TVs narrowed the choice of frameworks to EnactJS, a React-based framework optimized for WebOS apps.
EnactJS’s default components had restrictive customization options and lacked the flexibility for the desired app design.
Solution: A Custom Design Library
I reverse-engineered EnactJS’s building blocks (e.g., Buttons, Toggles, Popovers) and created my own atomic components aligned with the app’s design.
This approach helped in two key ways:
In the absence of any recommended navigation tool for WebOS, I employed a straightforward navigation model using conditional-based routing:
This conditional-based routing minimized complexity and avoided adding unnecessary tools like react-router.
The WebOS OSE simulator was straightforward to use and compatible with Mac and Linux. However, testing the native C++ services needed a Linux-based emulator.
The Problem: Slow Build Times Cause Slow Development
Building and deploying code on the emulator had long cycles, drastically slowing development.
Solution: Mock Services
To mitigate this, I built a JavaScript-based mock service to replicate the native C++ functionality:
This separation of development and testing environments streamlined the process, saving hours during the UI and flow development.
To set up your machine for WebApp development with a simulator, ensure you install the VSCode extensions — webOS Studio, Git, Python3, NVM, and Node.js.
Install WebOS OSE CLI (ares) and configure the TV profile using ares-config. Then, clone the repository, install the dependencies, and run the WebApp in watch mode with npm run watch.
Install the “webOS Studio” extension in VSCode and set up the WebOS TV 24 Simulator via the Package Manager or manually. Finally, deploy and test the app on the simulator using the extension and inspect logs directly from the virtual remote interface.
Note: Ensure the profile is set to TV because the simulator only works only for the TV profile.
CODE: https://gist.github.com/velotiotech/a37b156e2c966074e27d8b9a33260a06.js
To set up your development machine for WebApp and Native Service development with an emulator, ensure you have a Linux machine and WebOS OSE CLI.
Install essential tools like Git, GCC, Make, CMake, Python3, NVM, and VirtualBox.
Build the WebOS Native Development Kit (NDK) using the build-webos repository, which may take 8–10 hours.
Configure the emulator in VirtualBox and add it as a target device using the ares-setup-device. Clone the repositories, build the WebApp and Native Service, package them into an IPK, install it on the emulator using ares-install, and launch the app with ares-launch.
Setting Up the Target Device for Ares Command to be Able to Identify the Emulator
This step is required before you can install the IPK to the emulator.
Note: To find the IP address of the WebOS Emulator, go to Settings -> Network -> Wired Connection.
CODE: https://gist.github.com/velotiotech/d05f5ee9057c8d3efad80c8aadeaef67.js
One feature required real-time updates from the C++ module to the UI. While the Luna Bus API provided a means to establish a subscription, I encountered challenges with:
Solution: Custom Subscription Management
I designed a custom logic layer for stable subscription management, ensuring seamless, real-time updates without interruptions.
Packaging
Pack a dist of the Enact app, make the native service, and then use the ares-package command to build an IPK containing both the dist and the native service builds.
CODE: https://gist.github.com/velotiotech/331e46b11c4ad2bfeef49cd4d0daa27f.js
Deployment
The external native service will need to be packaged with the UI code to get an IPK, which can then be installed on the WebOS platform manually.
CODE: https://gist.github.com/velotiotech/10e35260799f2fb4c6edca9228f9e21f.js
App Updates
The app updates need to be sent as Firmware-Over-the-Air (FOTA) — based on libostree.
WebOS OSE 2.0.0+ supports Firmware-Over-the-Air (FOTA) using libostree, a “git-like” system for managing Linux filesystem upgrades. It enables atomic version upgrades without reflashing by storing sysroots and tracking filesystem changes efficiently. The setup involves preparing a remote repository on a build machine, configuring webos-local.conf, and building a webos-image. Devices upgrade via commands to fetch and deploy rootfs revisions. Writable filesystem support (hotfix mode) allows temporary or persistent changes. Rollback requires manually reconfiguring boot deployment settings. Supported only on physical devices like Raspberry Pi 4, not emulators, FOTA simplifies platform updates while conserving disk space.
Building a WebOS TV app was a rewarding challenge. With WebOS OSE and EnactJS, developers can create native-quality apps using familiar web technologies. WebOS OSE stands out for its high performance, seamless integration, and robust localization support, making it ideal for TV app development and beyond (automotive, IOT, and robotics). Pairing it with EnactJS, a React-based framework, simplifies the process with D-pad compatibility and optimized navigation for TV experiences.
This project showed just how powerful WebOS and EnactJS can be in building apps that bridge web-based UIs and C++ backend services. Leveraging tools like Luna Bus for real-time updates, creating a custom design system, and extending EnactJS’s flexibility allowed for a smooth and scalable development process.
The biggest takeaway is that developing for niche platforms like WebOS requires persistence, creativity, and the right approach. When you face roadblocks and there’s limited help available, try to come up with your own creative solutions, and persist! Keep iterating, learning, and embracing the journey, and you’ll be able to unlock exciting possibilities.
Did you like the blog? If yes, we're sure you'll also like to work with the people who write them - our best-in-class engineering team.
We're looking for talented developers who are passionate about new emerging technologies. If that's you, get in touch with us.
As the world of smart TVs evolves, delivering immersive and seamless viewing experiences is more crucial than ever. At Velotio Technologies, we take pride in our proven expertise in crafting high-quality TV applications that redefine user engagement. Over the years, we have built multiple TV apps across diverse platforms, and our mastery of cutting-edge JavaScript frameworks, like EnactJS, has consistently set us apart.
Our experience extends to WebOS Open Source Edition (OSE), a versatile and innovative platform for smart device development. WebOS OSE’s seamless integration with EnactJS allows us to deliver native-quality apps optimized for smart TVs that offer advanced features like D-pad navigation, real-time communication with system APIs, and modular UI components.
This blog delves into how we harness the power of WebOS OSE and EnactJS to build scalable, performant TV apps. Learn how Velotio’s expertise in JavaScript frameworks and WebOS technologies drive innovation, creating seamless, future-ready solutions for smart TVs and beyond.
This blog begins by showcasing the unique features and capabilities of WebOS OSE and EnactJS. We then dive into the technical details of my development journey — building a TV app with a web-based UI that communicates with proprietary C++ modules. From designing the app’s architecture to overcoming platform-specific challenges, this guide is a practical resource for developers venturing into WebOS app development.
The rest of this blog details my development experience, offering insights into the architecture, tools, and strategies for building TV apps:
The app had to connect a web-based interface (HTML, CSS, JS) to proprietary C++ services interacting with system-level processes. This setup is uncommon for WebOS OSE apps, posing two core challenges:
Solution: An Intermediate C++ Service capable of interacting with both the UI and other C++ modules
To bridge these gaps, I implemented an intermediate C++ service to:
This approach not only solved the integration challenges but also laid a scalable foundation for future app functionality.
The WebApp architecture employs MVVM (Model-View-ViewModel), Component-Based Architecture (CBA), and Atomic Design principles to achieve modularity, reusability, and maintainability.
App Architecture Highlights:
With the integration architecture in place, I focused on UI development. The D-pad compatibility required for smart TVs narrowed the choice of frameworks to EnactJS, a React-based framework optimized for WebOS apps.
EnactJS’s default components had restrictive customization options and lacked the flexibility for the desired app design.
Solution: A Custom Design Library
I reverse-engineered EnactJS’s building blocks (e.g., Buttons, Toggles, Popovers) and created my own atomic components aligned with the app’s design.
This approach helped in two key ways:
In the absence of any recommended navigation tool for WebOS, I employed a straightforward navigation model using conditional-based routing:
This conditional-based routing minimized complexity and avoided adding unnecessary tools like react-router.
The WebOS OSE simulator was straightforward to use and compatible with Mac and Linux. However, testing the native C++ services needed a Linux-based emulator.
The Problem: Slow Build Times Cause Slow Development
Building and deploying code on the emulator had long cycles, drastically slowing development.
Solution: Mock Services
To mitigate this, I built a JavaScript-based mock service to replicate the native C++ functionality:
This separation of development and testing environments streamlined the process, saving hours during the UI and flow development.
To set up your machine for WebApp development with a simulator, ensure you install the VSCode extensions — webOS Studio, Git, Python3, NVM, and Node.js.
Install WebOS OSE CLI (ares) and configure the TV profile using ares-config. Then, clone the repository, install the dependencies, and run the WebApp in watch mode with npm run watch.
Install the “webOS Studio” extension in VSCode and set up the WebOS TV 24 Simulator via the Package Manager or manually. Finally, deploy and test the app on the simulator using the extension and inspect logs directly from the virtual remote interface.
Note: Ensure the profile is set to TV because the simulator only works only for the TV profile.
CODE: https://gist.github.com/velotiotech/a37b156e2c966074e27d8b9a33260a06.js
To set up your development machine for WebApp and Native Service development with an emulator, ensure you have a Linux machine and WebOS OSE CLI.
Install essential tools like Git, GCC, Make, CMake, Python3, NVM, and VirtualBox.
Build the WebOS Native Development Kit (NDK) using the build-webos repository, which may take 8–10 hours.
Configure the emulator in VirtualBox and add it as a target device using the ares-setup-device. Clone the repositories, build the WebApp and Native Service, package them into an IPK, install it on the emulator using ares-install, and launch the app with ares-launch.
Setting Up the Target Device for Ares Command to be Able to Identify the Emulator
This step is required before you can install the IPK to the emulator.
Note: To find the IP address of the WebOS Emulator, go to Settings -> Network -> Wired Connection.
CODE: https://gist.github.com/velotiotech/d05f5ee9057c8d3efad80c8aadeaef67.js
One feature required real-time updates from the C++ module to the UI. While the Luna Bus API provided a means to establish a subscription, I encountered challenges with:
Solution: Custom Subscription Management
I designed a custom logic layer for stable subscription management, ensuring seamless, real-time updates without interruptions.
Packaging
Pack a dist of the Enact app, make the native service, and then use the ares-package command to build an IPK containing both the dist and the native service builds.
CODE: https://gist.github.com/velotiotech/331e46b11c4ad2bfeef49cd4d0daa27f.js
Deployment
The external native service will need to be packaged with the UI code to get an IPK, which can then be installed on the WebOS platform manually.
CODE: https://gist.github.com/velotiotech/10e35260799f2fb4c6edca9228f9e21f.js
App Updates
The app updates need to be sent as Firmware-Over-the-Air (FOTA) — based on libostree.
WebOS OSE 2.0.0+ supports Firmware-Over-the-Air (FOTA) using libostree, a “git-like” system for managing Linux filesystem upgrades. It enables atomic version upgrades without reflashing by storing sysroots and tracking filesystem changes efficiently. The setup involves preparing a remote repository on a build machine, configuring webos-local.conf, and building a webos-image. Devices upgrade via commands to fetch and deploy rootfs revisions. Writable filesystem support (hotfix mode) allows temporary or persistent changes. Rollback requires manually reconfiguring boot deployment settings. Supported only on physical devices like Raspberry Pi 4, not emulators, FOTA simplifies platform updates while conserving disk space.
Building a WebOS TV app was a rewarding challenge. With WebOS OSE and EnactJS, developers can create native-quality apps using familiar web technologies. WebOS OSE stands out for its high performance, seamless integration, and robust localization support, making it ideal for TV app development and beyond (automotive, IOT, and robotics). Pairing it with EnactJS, a React-based framework, simplifies the process with D-pad compatibility and optimized navigation for TV experiences.
This project showed just how powerful WebOS and EnactJS can be in building apps that bridge web-based UIs and C++ backend services. Leveraging tools like Luna Bus for real-time updates, creating a custom design system, and extending EnactJS’s flexibility allowed for a smooth and scalable development process.
The biggest takeaway is that developing for niche platforms like WebOS requires persistence, creativity, and the right approach. When you face roadblocks and there’s limited help available, try to come up with your own creative solutions, and persist! Keep iterating, learning, and embracing the journey, and you’ll be able to unlock exciting possibilities.
.svg)
.svg)
