Want to share the experience of the application development video content for the Smart TV (Tizen and WebOS), and what problems we face.

On modern televisions, as we know, you can install different applications to facilitate the work with some resources and content. In most cases, these apps under the hood is a normal browser, on the telly it’s Chromium.

As this browser, there is nothing we do not interfere with use React.js for development that impacts on some performance issues.

I’m not going to tell you about how it should be done with code examples, I will talk about the nuances and decisions that were taken.
Go through the main points:

  1. Limited resources
  2. Navigation
  3. Performance styles and rendering
  4. Video players
  5. Backend

Limited resources

On the TV is not so much memory and performance, both on our computers, so the first problem is the limitation of resources.

For example, the application allocated a total of about 250 megabytes to use and we are faced with such a problem that when displaying a grid with the content (picture, description, rating) could be spent memory to the limit, when the grid is only 1000 items and we scrollin down, the size of the images increases and increases and at some point, the application krasitsja saying that out of memory.

The solution to this problem react-window
It does not store all items out of the window in the DOM.

Navigation

If the computer we used to, we click the mouse on the items on the website, on the TV we use remote that happens to use as a mouse, but most of it is button. From here emerges the problem of the navigation that we need to handle button presses and to navigate throughout the app without the cursor, but at the same time, we need to handle clicking on elements using “clicks”.
Some codes from the buttons on the remote, LG and Samsung are different, as different from a regular keyboard, so for each platform we had sehardcore codes of the buttons that we handle.

An Example Of Tizen
Tizen

export default { KEY_0: 48, KEY_1: 49, KEY_2: 50, KEY_3: 51, KEY_4: 52, KEY_5: 53, KEY_6: 54, KEY_7: 55, KEY_8: 56, KEY_9: 57, KEY_UP: 38, KEY_DOWN: 40, KEY_LEFT: 37, KEY_RIGHT: 39, KEY_OK: 13, KEY_BACK: 10009, KEY_CHANNEL_UP: 427, KEY_CHANNEL_DOWN: 428, KEY_MEDIA_FAST_FORWARD: 417, KEY_MEDIA_PAUSE: 19, KEY_MEDIA_PLAY: 415, KEY_MEDIA_PLAY_PAUSE: 10252, KEY_MEDIA_REWIND: 412, KEY_MEDIA_STOP: 413, KEY_DEBUG_TOGGLE_CONSOLE: 403, KEY_DEBUG_TOGGLE_QUICK_EDIT: 404, KEY_DEBUG_SET_FAVOURITES: 405, KEY_DEBUG_CLEAR_FAVOURITES: 406, KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable
};

WebOS

export default { KEY_0: 48, KEY_1: 49, KEY_2: 50, KEY_3: 51, KEY_4: 52, KEY_5: 53, KEY_6: 54, KEY_7: 55, KEY_8: 56, KEY_9: 57, KEY_UP: 38, KEY_DOWN: 40, KEY_LEFT: 37, KEY_RIGHT: 39, KEY_OK: 13, KEY_BACK: 461, KEY_MEDIA_FAST_FORWARD: 417, KEY_MEDIA_PAUSE: 19, KEY_MEDIA_PLAY: 415, KEY_MEDIA_PLAY_PAUSE: 10252, KEY_MEDIA_REWIND: 412, KEY_MEDIA_STOP: 413, KEY_CHANNEL_UP: 33, KEY_CHANNEL_DOWN: 34, KEY_DEBUG_SET_EMAIL: 403, KEY_DEBUG_TOGGLE_CONSOLE: 404, KEY_DEBUG_TOGGLE_QUICK_EDIT: 405, KEY_DEBUG_SET_FAVOURITES: 406, KEY_DEBUG_CLEAR_FAVOURITES: 407, KEY_SHOW_REMOTE_POINTER: 1536, KEY_HIDE_REMOTE_POINTER: 1537,
};

Keyboard

export default { KEY_0: 48, KEY_1: 49, KEY_2: 50, KEY_3: 51, KEY_4: 52, KEY_5: 53, KEY_6: 54, KEY_7: 55, KEY_8: 56, KEY_9: 57, KEY_UP: 38, KEY_DOWN: 40, KEY_LEFT: 37, KEY_RIGHT: 39, KEY_OK: 13, KEY_BACK: 8, // backspace KEY_MEDIA_FAST_FORWARD: 70, // f KEY_MEDIA_PLAY_PAUSE: 80, // p KEY_MEDIA_REWIND: 66, // b KEY_MEDIA_STOP: 83, // s KEY_CHANNEL_UP: 70, // f KEY_CHANNEL_DOWN: 71, // g KEY_DEBUG_SET_EMAIL: 81, // q KEY_DEBUG_TOGGLE_CONSOLE: 87, // w KEY_DEBUG_TOGGLE_QUICK_EDIT: 69, // e KEY_DEBUG_SET_FAVOURITES: 88, // w KEY_DEBUG_CLEAR_FAVOURITES: 82, // r KEY_SHOW_REMOTE_POINTER: 7777777, // not applicable KEY_HIDE_REMOTE_POINTER: 7777777, // not applicable
};

As you can see, the keyboard is a button with the letters (in comments indicate).

In order to handle the navigation via the buttons and clicking the mouse, we have the result was always the same event — mouseClick, thus we are equally processed all events.

Another feature of the navigation is the focus, on every screen there should be an element in focus because losing focus, we will not be able to navigate around the screen. Each element prescribes the properties of focus and focus id. When navigation need always take this into account, but also, sometimes there is requirement when you return back revert completely to the previous screen, so the navigation has been completely custom written.

Performance styles and rendering

Animation in CSS is running slow on the TV, especially when the DOM elements that get into making an animation a lot, you can see not a smooth change and a slide show. One of the options the solution to this problem — canvas. Drawing on it, the animation, highlighting novagiovanni accelerate work at times, but if you have the Automator, they are such an implementation may not like it, because it is difficult on the picture to check the content.

Many prerendering on the page — another pain, everything starts to slow down, twitch. It was necessary to control this process, then shouldComponentUpdate components looks like this:

image

In the end, rewrote the sensitive part of the app in vanilla js is faster.

Video players

LG and Samsung have different native video players, which also creates additional difficulties for development. They use different SDKs with different functionality, you need to consider that not all opportunities are the same in LG and Samsung and may differ from version to version of the OS.

Also had problems with the load when you launch the video was solved by caching the parallelization and postponement requests, treatments.

Backend

The speed affects the quality of the backend, the speed of processing of queries and the number of them. On the side of the FE should be a minimal amount of data processing. If you need to load large amounts of data, you can use web workers. Source