DEV Community

React JS for Smart TV - discussion

Pedro Paulo Paiva de Medeiros on August 21, 2018

Hi, I'm developing an App for SmartTV with React JS (well, trying to, haha) and was wondering if anyone have done something similar or know someth...
Collapse
 
farnaziifz profile image
Farnaziifz

Hi, can you tell me where can I start developing web app for smart tv with react, I'm confused after searching in google and can't find a solution for developing compatible with all tv platform like webOS and Tizen

Collapse
 
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros

Hi!

First of all, thanks for showing intersting in this Smart TV development area, :D

So, to start develop with React, there isn't any source about it, unfornatelly.

What I did to maintain a single code to the two platform was to develop a single project and use the 'yarn build' command, and then, put this build project on other two projects (each one created to be a Tizen project and webOS project).

With that, you can test on the TVs and test.

Other thing I do is to avoid using too much specific code. An example is the video that I use. I prefer to use a custom HTML5 video player react component that I've built for the platforms and use in the projects instead of using the Tizen or webOS specific code.

Just keep in mind that testing in a real device is a need.

To maintain retrocompatibility you will need some polyfills for new features or build to a older js version using the Babel.

It's really an area that has almost nothing about it on the internet, :(, but just keep searching and asking for help that you will gain knowledge and experience to deal with new problems that will appear :D

Collapse
 
farnaziifz profile image
Farnaziifz

thanks a lot, for remote control event what can I do?

Thread Thread
 
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros

To control the remote control events I use the onKeyDown event that the React give to me. Just put the event on your app's root component and handle the focus and where the user should go when some key is pressed.

The onKeyDown event will send an object that I usually call 'event'.

The event dispatched is this: developer.mozilla.org/en-US/docs/W...

You can use the 'key' attribute or others if you want it.

Thread Thread
 
farnaziifz profile image
Farnaziifz

thanks a milion.

Collapse
 
sugardave profile image
Dave Freeman

I wish I joined before this so I could have helped. I'm part of the Enact framework team and Enact was originally designed to deliver single page web apps on LG webOS TVs using the Moonstone theme. We've grown the framework considerably and offer a way for devs to create their own themes (or keep using Moonstone because it is specifically designed for TVs).

Enact is built on top of React, so you get everything you already have plus some syntactic sugar for things like assigning event handlers, computed properties, HOCs, etc.

Check us out:

If you think you might want to take it for a spin and have questions, come to our Gitter and give us a shout!

Collapse
 
shohzodt profile image
Shohzod Tursunov

Hi, Can you share the source code or how to make react project transfer to Tizen app, I have used it with create react app and vite also, but after build the project , player is not working, and also sometime the app also does not run

Collapse
 
ahmednoureldinmohamed profile image
AhmedNourElDinMohamed

Hello Shohzod do you reach to any solution for your problem ?

Collapse
 
rationalmachines profile image
Shawn Sheehan

Im curious, how did you handle click events? They do not seem to work on smart-tvs

Collapse
 
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros • Edited

Hi,

I'm actually working with Samsung, LG and Panasonic. Since they all use a web browser behind the scenes, the work I have is to control the focus. With the browser focused on a element that has a onClick event, when the use press the Enter key on the remote control, it should work fine.

A example should be like this:

That's how I've done to handle the click events on the TVs, :D

Collapse
 
rationalmachines profile image
Shawn Sheehan

Im curious if you had any trouble with links, this project i'm looking over for a friend everything works fine as he intended on desktop and mobile but the links do not work on smart tvs?

Thread Thread
 
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros

Do you mean the tag? If yes, in some devices it could not work properly, because the TVs runs the apps in a sandbox mode, so every redirect or link to another html page will open the TV browser, instead of staying on the app that was running.

To deal with this, I use react-router-dom on my app to make him a Single Page Application and navigate between routes using the Link and NavLink components.
For a better compatibility, I use the HashRouter component instead of the BrowserRouter that is commonly used.

Is that your case? If not, tell more details and we can figure out something, :D

Collapse
 
adnan8483 profile image
Adnan8483

hi, i am developing a ott app on tv using react.js, In this app i have a sidebar which has some cards vertically when i scroll in some tv i can't scroll and in some it happening but very slow how can i improve its refresh rate?

Thanks!

Collapse
 
stevetaylor profile image
Steve Taylor

You can certainly create smart TV apps using React, but it takes a lot of work to manage performance. Expect to memoise everything, which itself has overhead.

Consider a fine-grained reactivity framework instead, such as SolidJS or Svelte. If all your supported smart TVs support WebGL, there's also Lightning.js which is a completely different approach and made specifically for smart TV apps.

Collapse
 
rubinelezi profile image
Rubin Elezi

It may be an old post but, did you manage to do anything about this? Can you give any guide about react on TIZEN/WEBOS

Collapse
 
pdrmdrs profile image
Pedro Paulo Paiva de Medeiros

I did manage to have a full production app that is working ATM in Tizen and WebOS.

We used ReactJS with Typescript and created an architecture to work with.

ReactNative didn't have the tools that we needed.
Enact is good for basic projects, but to work on bigger apps, it's a pain.

To work with Tizen/WebOS platforms, just do a basic app with ReactJS, put on fullscreen (probably F11 if you are using windows) and create a way to handle focus imperatively with the arrow keys.

There's not a perfect way to do this, it will depends on your requirements.

One thing to do is create an state in the component that will be the focused child component, and put an useEffect that will trigger state updates based on the keydown event.
With this, you can check which component is focused, pass this as a prop, and update the style accordingly.

One thing that helped us is to create two basic apps using the templates that the Tizen/WebOS gave us, and on the HTML file, just create a redirect to your app.

With that, deploy your app where you want and it will work just fine.

This helps develop a lot faster.

Other than that, you just need to finish your app and deploy on the Tizen and WebOS app store's, fix the issues that they will find and you have your app available to everyone, :D

PS: sorry about the late answer, I was away from the dev.to for a while

Collapse
 
lucifer_morningstar profile image
lucifer9560

Hi,
To implement navigation using arrow keys i used a package called "react-js-spatial-navigation".

Collapse
 
ahmednoureldinmohamed profile image
AhmedNourElDinMohamed

Can you tell me how to using it or any toutorial for this ?

Collapse
 
ahmednoureldinmohamed profile image
AhmedNourElDinMohamed

I need to build Smart TV app tizen/Webos with React JS Can you tell me how to configure project and how to start it, if i need to special packages please mention it