Flash Client
Overview
Server-Driven UI (SDUI) is a technique where the server defines the structure, style, and behavior of the user interface. This enables a highly dynamic and adaptable UI that can be updated without requiring a new app release. Flash Client, a Server-Driven UI (SDUI) framework for React Native, allows developers to leverage server-defined configurations to render dynamic components, layouts, and behaviors directly in the app.
In this section, we’ll explore how to make specific parts of the UI compatible with SDUI, using Flash Client SDK to allow for greater flexibility and remote configuration.
Why SDUI
In addition to layout flexibility, SDUI empowers you to control user behavior through configuration—enabling dynamic workflows, feature toggles, and contextual experiences. This approach opens up opportunities for experimentation, reduces the need for frequent app releases, and accelerates the overall development cycle.
Consider a scenario such as a ticket booking platform where the content changes frequently, but the placement of UI elements and the overall visual structure remains consistent. SDUI is valuable in this case: rather than hardcoding layouts, configuration related to the screen is delivered over the air, allowing the server to define the screen’s layout dynamically.
SDUI also enables:
Real-time UI updates.
Customizable UI components.
Reduced app release frequency.
Rapid experimentation with UI changes.
Flash Client integrates this SDUI paradigm to ensure flexibility in app development. Read more about the capabilities of Flash Client SDK for rendering dynamic components and layouts.
UI elements
A UI element in Flash Client refers to any component used to define the layout and design of a screen. Examples include View, Text, Button, and Image, which serve as the fundamental building blocks of the user interface. These elements can be customized, styled, and updated dynamically based on the configurations provided by the server.
In Flash Client, these UI elements are described in JSON format, enabling developers to dynamically alter layouts and styles at runtime through backend configurations.
Behaviour
Behavior defines the dynamic aspects of a UI element, such as events (e.g., taps, scrolls, or input changes) and the corresponding actions that should be triggered in response. Flash Client enables the definition of behavior in a highly configurable manner, linking events to actions such as navigating to a new screen, opening deep links, or displaying alerts.
Events and Actions will soon be a part of the Flash Client SDK. This feature will allow the server to specify actions that should occur when a specific event happens within the UI. For example:
Event: A button is clicked.
Action: Navigate to a new screen.
Event: A list item is tapped.
Action: Open a deep link or trigger a custom behavior.
This capability will enable developers to configure and control user interactions entirely from the server, providing flexibility in creating dynamic and context-sensitive user experiences.
Note: The full Event and Action functionality is scheduled for release soon, and will be integrated into future SDK versions, enabling the app to dynamically respond to user inputs based on remote configurations.
How it Works
The Flash Client SDK does not directly call the app or the API to fetch configuration data. Instead, the app provides the necessary data (such as layout configuration, UI components, styles, behaviors, etc.) to the SDK from an external source (like an API or local configuration storage). The SDK is then responsible for rendering the UI and managing the dynamic behavior based on the provided configuration.
Process Flow:
App Fetches Configuration: The app makes the API calls to fetch the required configuration (e.g., layout, style, event-action mappings) from an external source. The Flash Client SDK relies on the app to provide this data.
Flash Client SDK Receives Configuration: The app passes the configuration data to the Flash Client SDK, which interprets and renders the UI components dynamically.
Rendering Components: Once the configuration data is provided to the SDK, the Flash Client SDK uses FlashComponent and Inflaters to render UI components dynamically according to the provided configuration.
Event and Action Handling: The SDK uses the provided configuration to manage events and corresponding actions (e.g., button clicks, taps), ensuring that the UI responds dynamically to user interactions.
The Flash Client SDK itself does not initiate the fetching of configuration data but relies entirely on the app to supply the necessary data for rendering the UI and defining behaviors.
Flash Client SDK Overview
The Flash Client SDK is a powerful tool designed to manage configuration delivery and provide contextual configurations suited to the runtime environment. It is not responsible for fetching the data itself but relies entirely on the app to supply the necessary configuration. The SDK includes:
Component Registration: Register custom components for dynamic rendering.
Dynamic Layout & Behavior Rendering: Use provided configurations to manage layouts and behaviors.
Helper Utilities: Ensure easier integration with the app.
Type-Safe Interfaces: Guarantee proper usage of configuration data.
Validation Mechanisms: Ensure that the provided configuration data is correct.
The SDK’s core functionality revolves around rendering dynamic layouts (via FlashComponent and Inflaters) and managing dynamic behavior (via events and actions). However, for all of this to work, the app must provide the necessary configuration data at runtime.
Flow
Last updated
