Flutter Fish Redux 2.0 architecture evolution practice

Since Fish-Redux is open sourced, a lot of verification has been done on Xianyu's core link. Starting from the initial baby details page and the release page, the use of Fish-Redux in Xianyu has gradually increased. The use of the Fish-Redux framework greatly improves the development efficiency in complex page scenarios. Especially through the component reuse and state management capabilities provided by the framework, we have greatly reduced code redundancy and simplified page complexity.

Fish-Redux GitHub：https://github.com/alibaba/fish-redux

However, as page complexity continues to increase, existing capabilities can no longer support the requirements of new business scenarios. especially

• Page layout
• Dynamic AB
• Insufficient flexibility

So we made a new round of architecture evolution based on the existing Fish-Redux framework. By upgrading the existing adapter capabilities, the flexibility of the architecture is further improved. Fish-Redux version 2.0 is officially born!

Free fish Fish-Redux status

Fish-Redux has already landed on the core link of Xianyu. The core benefits of Fish-Redux are as follows:

1. Component reuse takes the development of Xianyu’s product detail page as an example. Based on core service type commodities and transaction type commodities. With the help of the Fish-Redux framework, we have derived more than 10 baby details pages such as ordinary baby, rental baby, and player account baby. These different types of detail pages not only have their own independent business modules, but also reuse common component modules as much as possible.
2. State management In the development of such a strong interaction scenario, we use Fish-Redux to efficiently manage a large number of page events, which greatly improves the efficiency of component communication. Logic componentization is also guaranteed in a variety of business scenarios.
3. Code structure management Fish-Redux provides us with a good file code specification. This ensures that when we develop, there is a high degree of consistency in both the code style and the project structure. We have many people involved in the development of the release link, responsible for the corresponding module, and develop the corresponding component part. Especially after personnel transfer, you can get started quickly, which greatly improves the efficiency of multi-person collaborative development.

Challenges faced by Fish-Redux

It is necessary to maintain the characteristics of Fish-Redux and expose the Adpater with dynamic orchestration capabilities, and satisfy the appeal capabilities to support the business scenarios needed in the future.

Briefly introduce some shortcomings and shortcomings of the current adapter:

Already static arrangement: StaticFlowAdapter

StaticFlowAdapter({
    @required List<Dependent<T>> slots,
    Reducer<T> reducer,
    Effect<T> effect,
    ReducerFilter<T> filter,
  })


  （Dependent = connector + component）

FlowAdapter determines the order of page display by the Dependent array. The display order of the pages directly depends on the solts, and can directly control the data flow between the various self-components. Using this advantage to write complex pages, the logic of various data divisions and conquering, greatly improves the maintainability of the code . This form also has some drawbacks. We cannot modify the slots dynamically and lack the dynamic arrangement ability.

[]()

Existing dynamic orchestration: DynamicFlowAdapter

 final Map<String, AbstractLogic<Object>> pool;
  final AbstractConnector<T, List<ItemBean>> connector;


  DynamicFlowAdapter({
    @required this.pool,
    @required this.connector,
    ReducerFilter<T> filter,
    Reducer<T> reducer,
    Effect<T> effect,
    @deprecated Object Function(T) key,
  })

The core input parameters provided by DynamicFlowAdapter are "pool" and "connector". Pool provides the adapter's component pool, and the connector provides component key and state. From the static display of the list component to the data source dynamic control page list UI. Multi-component, repeated display list is provided for convenience.

DynamicFlowAdapter also has some inconveniences. All component data processing is integrated into one connector, and the highlights of Fish-Redux data divide and conquer are difficult to be reflected. It is not very convenient for us to compile a list of complex dynamic pages.

Neither StaticFlowAdapter nor DynamicFlowAdapter can meet the characteristics of dynamic orchestration and data divide and conquer at the same time. We have further evolved Fish-Redux.

Fish-Redux evolution

The first version is based on the capabilities of Fish-Redux. We made a layer of scaffolding effective_redux, and packaged the DynamicFlowAdapter (component registration + data source processing) according to our appealed requirements. The data mapping component logic was completed and the corresponding dynamic orchestration ability was realized. .

1. There are some common basic templates, dynamic templates, list templates, etc. built into the scaffolding to support some urgent business needs;
2. Enhance the function of ListAdapter for fish redux, and put forward the concept of Section. To meet the needs of data display of different data collection types.

But after finishing the first version, some thoughts arose:

1. Whether the dynamic orchestration ability is also required by users who use fish redux
2. In response to page changes, the appearance of the page frame has been modified to increase learning costs, and developers are not used to it
3. Technology drives business development, whether business needs can compensate for technical framework capabilities, etc.

In the second version, we decided to deny part of the capabilities to fish redux. After some thoughts and comparisons with the existing Adapter functions, I summarized the part of the ability that we can deny to fish redux. And unified FlowAdapter, while providing dynamic orchestration capabilities.

Improved orchestration: FlowAdapter

Dependent = connector (data description) + component (UI description configuration)

Rethinking the core idea of Adapter: the transfer station of the Dependent collection, processing the data flow in the collection, and the refresh logic of the components. At the same time, the processed collection is converted into UI interface specific data.

Realization of dynamic orchestration: FlowAdapater no longer obtains the combined dependent list in a static form, and changes from the static parameter List to the dynamic callback obtained by FlowDependencies. We can make a series of extensions in FlowDependencies, such as dynamic layout of page display, AB function of components and so on.

Divide and conquer data features: The dynamically acquired List is a data collection of connector+component, which is no longer a single logical processing of data mapping UI, and the real data processing process is returned to each connector, maintaining the data of the components in the adapter Deal with the divide and conquer feature.

Of course, we have also done adapter regulation. In fact, we will find that the internal implementation logic of the two adapters introduced in the appeal remains inconsistent. The static adapter and dynamic adapter actually handle the leveling logic of the component set are different.

In response to this, we migrated the StaticFlowAdapter and DynamicFlowAdapter functions to our new version of FlowAdapter. Ensure consistent implementation of Adapter capabilities, consistent appearance, reduce learning costs, and uniformly optimize performance.

Show results

After fish redux completed the architecture upgrade, our details & release link made corresponding code changes.

Built-in template registration, according to the configuration information issued by the server to determine the order of page layout. Based on the framework to provide corresponding dynamic orchestration capabilities, we can achieve some of the business possibilities we proposed.

• [Dynamic Arrangement Capability] Our arrangement sequence, display data is determined by the configuration information data returned by the server. In other words, the display of the page is determined by the server. Our subsequent adjustments to the order of modules no longer depend on the client's local modification and package modification. At the same time, we have also made a plan for the bottom of the corresponding data field, and the standard page display order;
• [Component AB capabilities] The capabilities of component AB can be delivered to the server for pre-processing. At the same time, dynamic replacement codes can be added to the local code, and some customized processing can be done in buckets according to different configurations;
• [Dynamic template] In order to satisfy the product to quickly verify the feasibility of a certain business module, the dynamic template is added to test and verify directly online, without the need for the client to issue a version.

Detailed effect display: Based on the adjustment of the position of the price module, some attempts were made on the shelves. We can make some online adjustments quickly.

Outlook

This time, we have adjusted the adapter of fish redux, and changed the idea of orchestrating data acquisition and clarified the functions and responsibilities of the adapter. Optimized the adapter at the fundamental point to better adapt to business scenarios. This optimization and modification will be merged into the fish redux release later, bringing more convenience to everyone.

Based on the evolution of this framework, fish redux has brought us more thinking about different containers. We are not only satisfied with the adapter adaptation of ordinary lists, but we are also preparing for the display of fish redux for different containers. It can also be well implemented in waterfall scenes or other containers. Some adaptations to PowerScrollView will also be made at the fish redux level.

For some business solutions, dynamic templates, and AB capabilities, I also hope to export them to the expansion package of fish redux, which not only solves some problems at the framework level, but also in the form of a framework platform to make it easier for users. The ability to expand fish redux is also an important proposition for our follow-up.

Finally, everyone is welcome to actively try fish redux, make a voice in the community, ask questions or suggestions for improvement, and contribute code.

We believe that in the future, fish redux will be used in more scenarios and capabilities to appear on the screen, so that everyone can feel the beauty of fish redux.