Aries Bifold (Mobile Agent React Native) Q2 Roadmap

[jleach]

Aries Bifold (Mobile Agent React Native) Q2 Roadmap

TL;DR

This proposal outlines strategies to enhance Bifold by tackling issues such as a complicated theme file, limited scalability in component customization, and challenges in adding new components. The suggested solutions involve simplifying the process for themes, enabling more in-depth personalization with style sheet overrides, providing ways to replace UI components, and using Bifold as an npm package in individual React Native apps for added flexibility and expanded features.

Medium Term Arcitecture Roadmap

The following issues, identified within our current architecture, are planned to be addressed by the community soon. These issues are primarily derived from the Bifold Summit 2023. The summit not only aids in pinpointing the issues but also provides guidance on potential solutions.

Issues

1. The existing theme file has become unwieldy, exceeding its original purpose. It's become the default method for customizing all visual aspects of the application, resulting in too many variables for developers to adjust to suit their specific needs.

2. The existing method to override or inject custom components via the useConfiguration hook is effective but not highly scalable. Developers need a more manageable solution to ensure that the application remains intuitive for developers. This will also facilitate the contribution of clean, easy-to-maintain code.

3. Currently, there's no straightforward way for developers to inject their own components without starting from scratch and creating their own React application. They then have to import what they need from Bifold and write their own custom components as required.

4. The project in unable to upgrade past React Native 0.66.5 due to our ability to compile and support related components such as Indy SDK.

Proposed Solutions

We need to find a new pattern that will allow:

1. Theme

We aim to provide teams with the essential tools to swiftly launch a branded app with minimal effort. This includes transitioning from the current Bifold theme of green and black to, for instance, to Brazil's green and yellow or British Columbia's blue and gold.

The color palette will be confined to colors that significantly influence the application at a high level, as specified by the Bifold style guide. This approach also allows the application to switch between a light and dark theme but restricts the customization of individual components by introducing new styles. For instance, if changing the border color of a button isn't currently possible, this file won't support such a modification unless the addition of this change is first proposed during a Bifold working group meeting.

2. Style Overrides

In cases where merely altering the color palette is insufficient and a more comprehensive approach to customizing the app is needed, we will offer a method to provide components with their own style sheet overrides. These will then be integrated to create a product where the supplied style either modifies or supplements the existing default style of a component.

3. Custom Components

In cases where teams find the user interface provided by Aries Bifold unsuitable for their needs, we aim to offer a mechanism that enables easy overriding of any component within the entire application. For instance, if a team desires a significantly different style for UI Buttons, they can import and utilize their own custom component.

4. Bifold as a UI Component Library

Teams that aspire to extend beyond the capabilities provided by the three mechanisms mentioned above may likely need to take a different approach than what Aries Bifold offers. In such situations, teams will create their own React Native application and use Bifold as an npm package. This allows them to import any desired UI/UX components, offering maximum flexibility while still taking advantage of existing UI components as needed.

Next Steps

Based on the above discussion, we plan to create a series of issues to gradually achieve our technical architecture goals. Each issue should correspond to an identified problem or proposed solution and should include documentation of the implementation.

Issue	Description
Text	Text

[jleach]

Above is the working copy of the document I mentioned on the May 9th Working Group Call. Comments and feedback welcome.