TAL + React

[boris-felix]

Hi all,

My company is building a fairly standard live and VOD application that has been successfully deployed on Web and Mobile ( iOS and Android ). Our stack is essentially composed with React and React Native on the top of Redux for state management. We are now looking at the Smart TVs and are considering using TAL.

We were hoping you could help us with some quick questions:

• Does React play well alongside TAL, or are there any obvious architectural blockers that would make the two difficult to mix / incompatible?
• TAL uses widgets for common UI components - are the bridging connectors that TAL uses to smooth out the various smart TV platform quirks tightly bound into those widgets, or easily separatable for us to extend them (and contribute back of course…)?
• When looking at performance management, especially on lower end devices, do you guys typically use any other frameworks /techniques that sit alongside TAL, or do you find that the applications run well out of the box across the full list of devices in your config file?

Any info greatly appreciated. We’re happy license fee payers, massive fans of iPlayer more generally, and think the work and documentation you guys have contributed to this repo are great.

[rosswilson]

Hi @boris-felix,

It's great that you're investigating TAL for developing Smart TV applications. Here at the BBC we've also been interested in React (amongst other JS frameworks). An issue that we faced was the device support for such modern tools - though this may not be an issue for you depending on the devices you wish to target. Older devices lack certain JS APIs, such as Object.defineProperty (which is also un-shimmable).

1. We have run trials of React and Preact on compatible devices and didn't have too much trouble integrating alongside TAL. You'll need to think about how key events are handled, and have TAL delegate those events to your React component tree. A nice pattern we found was to have your components handle the events that they care about, any other events get bubbled up to TAL.

   My personal recommendation would be to adopt a clear demarcation point between TAL and your React components. If your components have a clean public API, then the interaction between TAL controller code and React is quite nice.

2. We've found that there is less need for a TAL abstraction for common widgets these days. The biggest areas of abstraction that TAL solves are things like video playback and animation. Fortunately the abstracted animation functions (like moveElementTo) are available regardless of whether you're using React components or TAL widgets.

3. For lower-performance devices there are a few things to watch out for. Memory utilisation is something that you'll want to track (Chrome DevTools is useful here), along with the amount of computation that the app is doing (especially when the user is interacting with the UI). If your app is doing a lot of computation then that can result in delayed garbage collection.

We're looking to make some announcements soon about our use of React, especially our use of server-side rendered React components and TAL. I'll let you know when that happens.

Happy to chat some more.

[boris-felix]

Hi @rosswilson. Thank you for your answer and the advices.

But that being said and knowing that TVs are a limited ecosystem, how does TAL face the performance issues in term of rendering ? Are you still using the DOM or did you switched to a canvas based model rendering as react-canvas is doing : https://medium.com/front-end-development-2/my-reaction-to-react-canvas-e181a0189d4c ?

[spikything]

Have discovered this relatively recently, I too am interested in how to get TAL and React playing nicely together.

[alaghusun60]

Hi, Any improvement on this. Any tutorial aailable this. Any possible way to do in angular. We want web devlopment come tv app devlopment using BBC tal

[kukulaka]

We have deprecated this project and there are no plans for active development going forward.

Please see the deprecation notice.

We are hoping to keep the community more up to date in future - apologies for the radio silence!