Introduction

Uniform's powerful composition engine is not tied to the web channel, and can power experience on a native mobile device as well, together with running personalization and A/B testing.

There are two options to use Uniform on mobile.

Option 1: With SDK

Use Case: React Native Application#

Repository: [Uniform Mobile Demo]

Steps:#

1. Install SDK: Add the Uniform SDK as a dependency in your React Native project.
2. Setup Project: Clone the [mobile demo repository] which provides a starter template for integrating Uniform with React Native.
3. Define Components: Set up components like you would in a standard React application, using Uniform Composition to load content.
4. Run Application: Perform tests on local machines or emulators. The project comes pre-configured with Metro, but Expo can be added to generate a web version for Uniform preview.

Data Flow: #

Pros:

• Ease of Integration: Direct integration with React Native environments.
• Feature Rich: Benefit from all SDK features for personalization and A/B testing.
• Preview: Requires web version for Preview that can be achieved with the same codebase using tools like Expo

Cons:

• Framework options: Currently only available for React Native. Support for other mobile technology can be added on demand, contact us to discuss.

Option 2: SDK-Free

This approach leverages special API middleware that you can self-host which retrieves composition data JSON and runs personalization and A/B testing on the API boundary, meaning that any consuming application can take advantage of it. The client sends context (visitor id, or profile data) via http headers, which are then used to initialize Uniform quirks so you can personalize on behavior, geo data, and CDP data.

Use Case: Custom Middleware Implementation#

Repositories:

• Cloudflare Hosted: [Context as a Service – Cloudflare]
• Akamai Hosted: [Context as a Service – Akamai]

Steps:#

1. Set Up Middleware Worker: Deploy a worker on Cloudflare or Akamai to act as a middleware for Uniform's global API requests.
2. Middleware Logic:
   1. Configure the middleware to handle requests, append quirks, get scores from CDP and manage the personalization logic based on visitor quirks and signals.
   2. Use uniform context for delivering a personalized response.
3. Preview Setup: Develop a separate web application to facilitate previews in the Canvas editor, as native previews are not directly supported.

Data Flow:#

Pros:

• Platform Flexibility: Works with any serverless platform offering edge worker capabilities.
• Customizable: Allows for intricate personalization logic and retrieval of customer data from your own CDP or profile API.

Cons:

• Additional setup required: Requires additional middleware configuration and a separate application for previewing in Uniform's Canvas Editor.
• Manual API output mapping: in contrast with SDK assisting in mapping data to components, you will need to do it yourself.
• Preview Limitations: Requires extra app for previewing.
  

Considerations:#

• SDK Integration: Suited for projects that benefit from Uniform's full feature set and support React Native web previews.
• SDK-Free Solution: Ideal for teams needing a flexible architecture and requirement to build with Native/Flutter/Kotlin/Xamarin . Additional work is needed for Canvas Editor compatibility.

For further assistance, consult the respective repositories or contact Uniform support for personalized guidance.