Architecting Front-End Stack for Multi-Screen Pay TV Services

With direct-to-consumer OTT experiences increasingly becoming the economic growth vehicles for media and technology companies, platform fragmentation can create a compounding problem that will impact business velocity if not managed correctly. Read on this article to learn about strategic imperatives as it relates to choosing a cross-platform framework that underpins your front-end tech stack.

Architecting a Front-End Stack for Multi-Screen Pay TV Services
Architecting a Front-End Stack for Multi-Screen Pay TV Services

These imperatives will be split into three key factors that need to be addressed when mapping out a long-term app development strategy:

  • Hardware & Operating System Agnostic: Within the connected ecosystem, there is a huge variety of devices. Broad platform coverage is critical to support how viewer’s consumption patterns evolve.
  • Responsive to Personalization and Optimization: Finding a framework that can collect uniform data across every platform and iterate at scale is a requisite of tomorrow.
  • Built for Developer and Designer Productivity: Market-leading user experiences are built by teams and empowered by tools, and the tooling must be embraced and loved by the developers and designers using it.

Make the most out of your development cycle by choosing a cross-platform framework that can withstand evolving viewer behaviors and expanding platform ecosystems, while improving your team’s productivity at scale.

With strong competition provided by a vibrant D2C market, Pay TV operators must also provide a first-class subscription service experience on a similar array of devices – this article will explore and assess technology approaches that will power your cross-platform development and underpin your front-end tech stack. In the premium video OTT space, the cross-platform problem is complex – read this article to help evaluate which cross-platform framework is right for your OTT development strategy.

Content Summary

Introduction
Imperative 1: Hardware & Operating System Agnostic
Imperative 2: Responsive to Data-Driven Personalization and Optimization
Imperative 3: Built for Developer and Designer Productivity
You.i Engine One – Built for Multi-screen

Introduction

Most Pay TV operators have mobile OTT applications to accompany their traditional set-top box (STB) environment. But as the OTT market becomes more and more fragmented, operators are under increasing pressure to extend past mobile to an ever-larger range of “big screen” consumer devices such as gaming consoles, streaming devices, and smart TVs.

Simultaneously, the rise of Android TV as a popular choice for new managed set-top boxes has further blurred the lines between traditional and OTT environments, leading to operators needing to support a wide range of platforms and device form factors.

In short, broad platform coverage is critical to support how viewer consumption patterns evolve over time.

The rise of Android TV as a popular choice for new managed set-top boxes has further blurred the lines between traditional and OTT environments, leading to operators needing to support a wide range of platforms and device form factors.

With strong competition provided by a vibrant direct-to-consumer market, where the viewer is able to watch content on any device they choose, the incentives are there for a Pay TV operator to also provide a first-class subscription service experience on a similar array of devices.

However, platform fragmentation can create a compounding problem that can materially impact business velocity if not managed correctly.

To innovate at the pace of market leaders, careful thought and planning need to be applied to how the Pay TV service:

  • Scales across every screen in an ever-changing ecosystem.
  • Supports rapid in-market iteration to close the loop on analytical learnings.
  • Ensures developer and designer productivity to support scalable delivery.

This article will explore each of these strategic imperatives as it relates to choosing the technology approach that underpins your Front-End Tech Stack.

Imperative 1: Hardware & Operating System Agnostic

Within the Pay TV ecosystem, devices range from low-end and legacy STBs already deployed in-market, to top of the line consumer streaming devices and new Android TV Operator Tier set-top boxes.

Aside from having a bottomless budget for R&D spend and an army of engineers on-staff to act on shifting behaviors and trends, the pragmatic solution to managing a suite of apps will involve technology. The right technology can help provide technical stability as platform preferences evolve and bring efficiencies to how teams are built for execution. Increasingly, companies are turning to cross-platform frameworks to help achieve these goals.

Cross-Platform Frameworks (FW)

There are many cross-platform frameworks on the market but underneath the hood, there are only a few architectural approaches supporting their portability. When evaluating their technical foundation, three main factors need to be considered:

  1. Portability & Velocity: How does the approach scale across the entire device landscape, from high-end devices to low BoM, and what are the impacts on development velocity?
  2. Performance: What is the performance profile of the technology and how does it bring maximum efficiency in managing and exploiting the available resources of the platform?
  3. Experience Control: What are the dependencies on the underlying operating system and where does that provide opportunities and/or limitations in the experiences or business models that can be enabled?

With these three pillars in mind, there are four common fundamental cross-platform approaches that will be explored:

  1. Native
  2. Hybrid
  3. Platform Abstraction
  4. Engine

Native: IOS (Objective C), Android (java) etc

Native: IOS (Objective C), Android (java) etc
Native: IOS (Objective C), Android (java) etc

Portability and Velocity
A historical approach, this is the least portable of all the architectures and requires the experience to be built based on the frameworks and technologies provided by the underlying operating systems. This creates a long-term velocity drag by building siloed development environments with multiple parallel codebases and teams.

Performance
On the major platforms with proprietary environments, high-performance experiences can be built. Many of the platforms leverage the GPU to accelerate the rendering of all of their views and controls. The exception is legacy web-based platforms that use an embedded browser as their main application execution environment. This is commonly seen in the Smart TV and set-top-box landscape and performance typically lag modern viewer expectations.

Experience Control
This approach leads to a fully integrated experience with the capabilities of the platform and will leverage all the common controls, content discovery, monetization mechanisms, and interactions associated with the platform. Developers are wholly dependent on what the platform chooses to expose and can sometimes be limited in achieving cross-platform parity.

Hybrid: ReactJS, Angular, Cordova (Web-based FWs)

Hybrid: ReactJS, Angular, Cordova (Web-based FWs)
Hybrid: ReactJS, Angular, Cordova (Web-based FWs)

Portability and Velocity
Hybrid applications leverage web-based development as a means of driving code reuse across a broad spectrum of platforms. Most platforms in today’s OTT market support hybrid apps through the availability of an embedded browser, with some notable exceptions like tvOS. This approach enables a development team to reach a large number of devices, with limited platform-specific fragmentation.

The drawback of using this approach is managing web stack conformance gaps across various browser technologies. Included in this group are Progressive Web Apps (PWAs)—which use web-based technologies to deliver quick and lightweight applications.

Performance
Teams that go down this path struggle to achieve brand objectives and also ultimately encounter platform-by-platform tuning and experience profiling. With the Hybrid approach, what ultimately suffers is the user experience. The foundations of web technology are simply not optimized for the execution of rich user interfaces.

Experience Control
The experiences enabled by hybrid apps largely stand-alone from the platform. Custom APIs are used to connect into the platform. This provides developers with the ability to build any type of experience that the underlying web stack on the platform enables, but they have no ability to influence the direction and evolution of that web stack.

Platform Abstraction: React Native (JS), Xamarin (C#)

Platform Abstraction: React Native (JS), Xamarin (C#)
Platform Abstraction: React Native (JS), Xamarin (C#)

Portability and Velocity
This approach, which includes frameworks like React Native and Xamarin, focuses on two main objectives. Firstly, they provide code reuse for business logic by abstracting development into platform-agnostic scripting layers. Secondly, the surface up a common set of interface controls and properties through a single API that functions consistently on the underlying platforms. Underneath the consistent APIs are platform-specific abstraction layers that connect through to the native controls. This leads to a lowest-common-denominator approach to user experience in order to achieve a high level of code reuse. For more complex experiences, these frameworks provide direct access to the underlying platform for custom development.

As the platform, the ecosystem continues to expand and evolve, and as brands’ experience aspirations increase, these approaches fragment. The long-term result of this approach is more and more platform-specific code being built into the applications.

Additionally, these technologies are typically only available on a small number of platforms and the utility of the framework is compromised if taken further due to the architectural approach. This creates the need to pair this development approach with other development strategies to meet the full scope of platform reach requirements.

Performance
These frameworks ultimately leverage the native controls for rendering the UI, but due to the abstraction layers introduced, performance worse than native can be expected in many scenarios. For example, a common scenario with React Native is that long list performance is worse than the equivalent native experiences. Android and iOS both have optimized long list implementations and when React Native surfaces a common API to handle this functionality, the platform level optimizations can’t be leveraged in a common way, thereby creating an inferior solution at the abstracted level.

Experience Control
Like native development, this approach leverages the capabilities exposed by the underlying platform. However, as opposed to being dependent on what is available on a specific platform, with the abstraction approach, developers are dependent on what is common across every platform. This creates an innovation and control bottleneck and may introduce long-term issues with the business model and experience flexibility.

Engine: You.i Engine (C++, React Native, JS)

Engine: You.i Engine (C++, React Native, JS)
Engine: You.i Engine (C++, React Native, JS)

Portability and Velocity
An Engine provides a completely stand-alone platform-agnostic application stack. This approach brings all of the required capabilities to power complete experiences independent of the underlying platform. Engines are implemented in C++, the foundational language for today and tomorrow’s device ecosystem. They are able to run on any platform, provided the right level of access is available. With this technology foundation, the same Engine can be brought to new platforms as the device landscape evolves, providing a continuity path for any user experiences built on top of the Engine.

Also, with an Engine, any type of higher-level application framework can be built on top of this base. An Engine can choose to design and build a proprietary API set or map the Engine’s capabilities to an existing application framework. The latter yields, a single codebase approach for maximum cross-platform code reuse paired with familiar development approaches for velocity.

Performance
Engines typically leverage the same GPU interfaces as natively built frameworks for the rendering of views and controls, providing a near equivalent level of experience. Additionally, with the entire application stack contained within the Engine, performance optimizations can be built around specific use cases as required to meet any custom needs of the user experiences built on top of the stack.

Experience Control
All of the UX components and rendering pipelines are under the control of the Engine, providing full flexibility in the experiences that can be built. Integrations into platform-specific APIs can be pre-built into the Engine or developed on-demand by bridging to the native platform environment to meet any specific integration requirements. Working with an Engine also provides developers with an increased level of control into the Engine feature roadmap when compared to having to interface with the companies that own the platform-specific native development environments.

When facing a mandate of building a market leading user experience that scales across a fragmented device landscape and is architected to support delivery and innovation at pace, an Engine foundation is needed. Digital leaders need to be in control of their own destiny, and leveraging an Engine that their user experiences are built on is the only way to ensure that they can drive the experience, flexibility and portability needed to support the future of their business.

Imperative 2: Responsive to Data-Driven Personalization and Optimization

The user experiences of the future will be built on top of intelligence and capable of delivering the right experience, to the right user, at the right time. With an Engine approach, multi-screen experiences can be consistently instrumented to support the uniform collection of data across every platform. However, that data needs to be turned into actionable intelligence that can drive user experience iteration at scale.

The day of the static application binary that is updated every 6 months is gone and the technology approach to a scalable application needs to support the conditional roll-out of experiences based on user context. These experiences need to have the ability to be updated on-the-fly without impacting the quality of the user experience being delivered. To achieve these objectives, the architecture should leverage a combination of natively executed code and dynamically retrieved scripting.

Responsive to Data Driven Personalization and Optimization
Responsive to Data-Driven Personalization and Optimization

The package deployed to any given device should include both the Engine and an App Skeleton. The Engine needs to be a hardware-accelerated rendering platform for optimal performance so it should live as close to the hardware as possible. The App Skeleton should be kept as lightweight as possible and its main responsibilities are to initiate the application flow by triggering the appropriate services and user-specific asset retrieval, managing the execution and storage of remote scripting and design assets, and if applicable, providing a default and/or offline experience in the event of a loss of connectivity or for load time optimization.

The majority of the experience should be externalized in remotely hosted JavaScript files. This enables the experience to be dynamically configured and personalized based on a specific user’s context. This also enables maximum flexibility in deploying global audience iterations to functionality based on analytical learnings.

To ensure that the retrieval and execution of remote JavaScript do not impact the user experience, the Engine needs to be optimized for the execution of remote scripting files across every platform that it is deployed on. In the multi-screen world where the hardware profiles vary dramatically, multiple JavaScript Engines will need to be supported within the context of the Engine so that the deployed footprint and performance can be managed accordingly.

With the right architecture that balances native rendering performance with the ability to dynamically retrieve functionality, digital leaders will be able to deploy, manage, personalize and iterate their user experiences at scale consistently across every platform.

Imperative 3: Built for Developer and Designer Productivity

Market-leading user experiences are built by teams and empowered by tools. To achieve the best possible outcomes, the tooling needs to be embraced and loved by the developers and designers using it.

The development and design communities are always inundated with new tools, methodologies, and projects coming to market. One of the best ways to attract, scale and retain top talent in these fields is to stay at the forefront of the landscape and embrace the frameworks they want to be using in your ecosystem. These decisions should not be taken lightly as the switching costs between development frameworks can be high. When evaluating Engine technologies, make sure you consider the application development paradigm they expose and how it:

  1. Fits with the existing skill sets within your organization.
  2. Provides opportunities for code reuse with existing applications.
  3. Impacts your staffing, recruiting and delivery structure strategies.

Market leading user experiences are built by teams and empowered by tools. To achieve the best possible outcomes, the tooling needs to be embraced and loved by the developers and designers using it.

You.i Engine One – Built for Multi-screen

Hardware And Operating System Agnostic

You.i Engine One is a C++ powered Engine designed and built from the ground-up to deliver high-fidelity cross-platform experiences for multiscreen applications. It provides a complete platform-agnostic application stack, optimized for user interface development so that all business logic and screens can be built with a single codebase in a fully cross-platform manner. The embedded roots of the You.i Engine allow the platform to be ported onto any hardware platform with all of the major consumer platforms already supported out-of-box.

Responsive To Data-Driven Personalization And Optimization

The You.i Engine has support for a full JavaScript layer built directly on top of the C++ foundation. This capability can be used to create a separation layer between the native application binary deployed to devices and the dynamic loading of remotely stored JavaScript functionality. This architecture yields the combination of native rendering performance with maximum deployment and personalization flexibility. Additionally, the You.i Engine is interpreter agnostic, meaning that we can leverage JavaScriptCore, Chakra, V8 (coming soon) or Duktape, providing the flexibility to use the JS engine with the optimal performance and footprint profile for any given platform.

The You.i Engine has embraced an integration strategy throughout both the designer and developer tooling ecosystems so that users can leverage the frameworks and tools they already know and love.

Built To Deliver The Best Developer, Designer And End-User Experience

The You.i Engine has embraced an integration strategy throughout both the designer and developer tooling ecosystems so that users can leverage the frameworks and tools they already know and love. For developers, React Native has been fully integrated as a development framework by building a binding layer on-top of the You.i Engine’s C++ foundation. This allows an existing ecosystem of developers to tap into the portability and performance benefits of the You.i Engine with minimal onboarding time. The opportunities to extend this framework and push the limits of the experiences that can be built with this paradigm are endless when paired with You.i Engine One.

Designer empowerment has been built into the You.i Engine since its founding days. The technology is built for design tool extensibility through a custom data input format to fully describe the layout, visual and animation characteristics of components. Today, designers can build custom visuals within the Adobe Creative Cloud and export those directly into the You.i Engine via a custom-built plug-in.

We here at You.i TV get that TV and Media organizations of all shapes and sizes are in a race to reach and retain users. The challenge is reaching across a fragmented ecosystem full of wildly radical platforms and devices. Innovators are turning to in-house development to gain control of their product roadmap and deliver on a full range of consumer devices from a single development environment—all while ensuring a great user experience.

It’s why we’ve built a product to tackle all of that in a way that’s efficient, agile, and ever-evolving. You.i Engine One is a software development kit designed to handle the demands of video app development across multiple platforms.

Source: You.i TV