You.i Engine One: Abstraction and Input Handling For Remote, Touch, and Desktop Devices

Josh Toczko
Josh Toczko
You.i TV_You.i Engine One_Josh Toczko_Abstraction_Input Handling_Remote_Touch_Desktop_Blog_thumbnail

The conversations around cross-platform app development are typically focused on the physical form factor of the screens (mobile, tablet, TV) and building a user interface for these devices. However, there’s another layer to multiscreen which holds equal weight, and that is input handling. Mapping physical commands by a user to the appropriate function in the app. An example would be pressing the ‘play’ button on the remote, which starts the playback of a video.

This seems simple enough in concept but when working with endless TV models and multiple touch devices, abstraction can save time, and decrease complexity. Think of all the device inputs that need to be supported in our space. Touch-enabled devices—mobile, tablet, and the occasional remote (Siri remote). Desktop platforms that use a freeform cursor and include a hover state. TV-connected devices which use a remote for navigation and selection. This also includes fringe remote types like LG’s “magic remote”; which behaves in the same way as a browser cursor. Lastly, there are game console controllers that exist in their own world of shapes and letters. For example, PlayStation’s “O” button serves as a “back” command versus Xbox’s “B” button.

In any cross-platform project, these functions are abstracted; which brings me to my demo video discussing how You.i Engine One handles inputs and abstracts the functions for any form factor. This is a feature available to all You.i Engine One users as we know how fragmented the OTT device ecosystem is. This input system exists to assist developers in working quickly and efficiently cross-platform. Teams only have to make a single view that will run and take inputs from every platform we support, including desktop, mobile with touch, and TV with focus.

Recommended: Better Focus Management For React Native Components Using You.i Engine One

You.i Engine One comes with a handy input.js file for React Native developers using our Engine. This file includes every single piece of input that we support for all of the platforms. There’s no extra work to hook all that up. It’s already good to go.

In the video above, I put together a quick sample app using our Adobe After Effects workflow. I then build out my view in React Native and deploy to four platforms: iOS, Android, macOS, and Roku.

Recommended: How We Took React Native to Roku by Playing in the Clouds

You.i Engine One is full of features like our Input Handler. Our aim is to create an SDK that understands the nuances of cross-platform development as it relates to TV and media. Our tools empower designers and developers to work better together and independently. If you missed my last blog post, I discuss the seamless handoff experience between design and engineering when using You.i Engine One.

Thank you for reading. Check out our website for more information on our Engine. Alternatively, if this is something that speaks directly to your organization’s interests, request a demo with one of our experts.

Here’s something similar we think you’ll enjoy.