Since the open source, fish-Redux has done a lot of validation on idle Fish core link. Since the initial baby details page and release page, the use of fish-Redux in free Fish has gradually increased. The use of the Fish-Redux framework greatly improves the efficiency of development in complex page scenarios. In particular, through the component reuse and state management capabilities provided by the framework, we significantly reduced code redundancy and simplified page complexity.

The Fish – Redux GitHub:github.com/alibaba/fis…

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

  • The page layout
  • Dynamic AB
  • Lack of flexibility

So we did a new architectural evolution based on the existing fish-Redux framework. Architecture flexibility is further enhanced through upgrades to existing adapter capabilities. Version 2.0 of Fish-Redux is here!

Fish-Redux status quo

Fish-redux has landed in large numbers on the Idle Fish core link. Fish-redux’s core earnings are as follows:

  1. Component reuse to idle fish commodity detail page development as an example. Based on core service type goods and transaction type goods. With the help of the Fish-Redux framework, we have derived more than 10 baby details pages, such as regular baby, rental baby, player number baby, etc. These different types of detail pages not only have their own separate business modules, but also most likely reuse common component modules.
  2. State Management We used Fish-Redux to efficiently manage a large number of page events and greatly improve the efficiency of component communication in the development of strong interactive scenarios such as publishing. Logical componentization is also guaranteed in various business scenarios.
  3. Code structure management Fish-Redux provides a good specification for file code. This ensures a high degree of consistency in both code style and project structure as we develop. Release link we participate in the development of many people, responsible for the corresponding module, for the corresponding component part of the development. Especially after the transfer of personnel, it can be quickly started, which greatly improves the efficiency of multi-person collaborative development.

The challenges facing Fish-Redux

Adpater, which is capable of dynamic choreography under the premise of maintaining the characteristics of Fish-Redux, can only support future business scenarios if it meets the appeal ability.

Here are some shortcomings of adapter:

There is a static orchestration: StaticFlowAdapter

StaticFlowAdapter({ @required List<Dependent<T>> slots, Reducer<T> reducer, Effect<T> effect, ReducerFilter<T> filter, }) (Dependent = connector + component)Copy the code

The FlowAdapter determines the page presentation order by the Dependent array. The display order of the page is directly determined by Solts, and the data flow between the self-components can be directly controlled. Using this advantage to write complex pages, the logic of various data divide and conquer can greatly improve the maintainability of the code. There are also some drawbacks to this format. We can’t modify slots dynamically, and we don’t have the ability to dynamically orchestrate slots.

Dynamic orchestration: DynamicFlowAdapter is available

 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,
  })
Copy the code

The core input parameters provided by DynamicFlowAdapter are “pool” and “connector”. Pool provides the adapter component pool, and Connector provides the component key and state. Switch from static display of list components to dynamic control page list UI of data sources. Multi-component, repetitious lists are provided for convenience.

DynamicFlowAdapter also has some inconvenience. All the component data processing is integrated into one connector, which makes it difficult to reflect the bright spot of fish-Redux data partition. It’s also not very convenient for us to write complex dynamic page lists.

Because neither static-FlowAdapter nor DynamicFlowAdapter could meet the dynamic orchestration and data divide-and-conquer characteristics, we evolved fish-Redux further.

The Fish – Redux evolution

Effective_redux. The DynamicFlowAdapter is wrapped (component registration + data source processing) to complete the data mapping component logic. The corresponding dynamic arrangement capability is realized.

  1. Scaffolding has built-in common base templates, dynamic templates, list templates, etc., to support some urgent business needs;
  2. Fish Redux made the ListAdapter function enhancement, put forward the concept of Section. To meet the needs of different data set types of data presentation.

But the first version led to a few thoughts:

  1. Dynamic choreography capabilities are also required for users using Fish Redux
  2. Whether modifying the appearance of the page frame for page changes increases learning costs and developers are not used to it
  3. Technology drives business development, whether business demand can complement technical framework capabilities, etc

For the second version we decided to reverse some of the abilities into Fish Redux. After some thinking and comparison of some existing Adapter functions, we summarized the current ability of fish Redux. The FlowAdapter is unified and dynamic orchestration is provided.

Improved orchestration: FlowAdapter

Dependent = Connector (data description)+ Component (UI description configuration)

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

Dynamic choreography implementation: FlowAdapater no longer obtains the Dependent List of the combination statically, and changes the static parameter List to the dynamic callback obtained by FlowDependencies. We can extend FlowDependencies to include dynamic layout of page presentation, component AB functionality, and so on.

Divide-and-conquer data feature: The dynamically acquired List is a data set of Connector + Component. Instead of a single logical processing for data mapping UI, the real data processing process is transferred to each Connector, maintaining the divide-and-conquer data processing feature of adapter components.

Of course, we also organized the adapter. In fact, the implementation logic of the two types of Adapters is not consistent. Static adapters and dynamic Adapters actually handle the leveling logic of a collection of components differently.

For this purpose, we migrated the StaticFlowAdapter, DynamicFlowAdapter functionality implementation to our new FlowAdapter. Ensure consistent Adapter capabilities, consistent appearance, reduce learning costs, but also to do some unified performance optimization.

Results show

After fish Redux completed the architecture upgrade, our Details & Publish link made corresponding code changes.

The built-in template registration determines the page layout order based on the configuration information delivered by the server. Based on the dynamic orchestration capabilities provided by the framework, we were able to achieve some of the business possibilities we proposed.

  • [Dynamic orchestration capability] Our orchestration order, display data is determined by the configuration information data returned by the server. That is, the presentation of the page is determined by the server. Our subsequent order adjustment between modules is no longer dependent on the client’s local modification for packet modification. At the same time, we also made the corresponding data a bottom of the scheme, the standard page display sequence;
  • [Component AB capability] The capability of component AB can be delivered to the server for pre-processing. Meanwhile, dynamic replacement code can be added to the local code to perform some customized processing according to different configurations.
  • [Dynamic template] The addition of dynamic template enables the product to quickly verify the feasibility of a certain service module. The test and verification can be performed directly online without the need for the client to issue the version.

Detailed effect display: based on the position adjustment of the price module, some attempts were made on the shelves. We can do some line adjustments very quickly.

Looking forward to

This time, we organized the Adapter for Fish Redux, changed the way of arranging data acquisition, and clarified the functions and responsibilities of the adapter. At its root, the Adapter has been optimized to better suit the business scenario. This optimization and modification will be incorporated into fish Redux release later, bringing more convenience to use.

Based on the evolution of the framework, fish Redux has brought us more thinking about different containers. We are not only satisfied with the adapter adaption of the normal list, but we are also preparing for the presentation of Fish Redux for different containers. It also works well in waterfall flow scenarios and other containers. Some adaptions to PowerScrollView will also be made at the Fish Redux level.

As for some business solutions, dynamic templates and AB capabilities, I also hope to export them to the expansion package of Fish Redux, not only to solve some problems at the framework level, but also to make it easier for users in the form of a framework platform. Expanding fish Redux’s capabilities is also an important topic for us to follow.

Finally, you are welcome to give Fish Redux a try and have a voice in the community, ask questions or suggest improvements, and contribute code.

We believe that fish Redux will be used in more scenarios and abilities on the screen in the future, so that people can feel the beauty of Fish Redux.