Shulou(Shulou.com)06/03 Report--

It is believed that many inexperienced people are at a loss about how Flutter's FishRedux architecture evolves 2.0. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Flutter Fish-Redux choreography optimization

Since the open source of Fish-Redux, a lot of verification has been done on Xianyu's core link. From the initial baby details page, release page, the use of Fish-Redux in Xianyu gradually increased. The use of 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 greatly reduce code redundancy and simplify page complexity.

However, with the continuous improvement of page complexity, the existing capabilities have been unable to support the description of new business scenarios. Especially for

Page layout

Dynamic AB

Lack of flexibility

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

Current situation of Xianyu Fish-Redux

Fish-Redux has landed on a large number of Xianyu's core links. Fish-Redux 's core benefits are as follows:

1. Component reuse

Take the development of Xianyu's commodity details page as an example. It is based on the 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 ordinary baby, rental baby, player baby and so on. These different types of detail pages not only have their own independent business modules, but also reuse common component modules as much as possible.

two。 State management

In the development of publishing such a strong interactive scenario, we use Fish-Redux to manage a large number of page events efficiently, which greatly improves the efficiency of component communication. Logical 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 a high degree of consistency in our development, both in terms of code style and project structure. Release link we many people participate in the development, responsible for the corresponding module, for the corresponding component part of the development. Especially after the transfer of personnel, it can be used quickly, which greatly improves the efficiency of multi-person collaborative development.

Challenges facing Fish-Redux

Need to maintain the characteristics of Fish-Redux under the premise of exposing dynamic choreography capabilities of Adpater, to meet the appeal ability to support the business scenarios needed in the future.

Briefly introduce some shortcomings and shortcomings of adapter at present:

Static choreography is already available: StaticFlowAdapter

StaticFlowAdapter ({

@ required List slots,Reducer reducer,Effect effect,ReducerFilter filter

})

(Dependent = connector + component)

FlowAdapter the order in which pages are displayed is determined by the Dependent array. The display order of the page directly depends on the solts, and can directly control the data flow between the components. Make use of this advantage to write complex pages, a variety of data divide and conquer logic, greatly improve the maintainability of the code. This form also has some disadvantages, we can not dynamically modify the slots, lack of dynamic choreography ability.

Existing dynamic choreography: DynamicFlowAdapter

Final Map pool

Final AbstractConnector connector

DynamicFlowAdapter ({

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

})

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

There are also some inconveniences in DynamicFlowAdapter. All the component data processing is unified into one connector, so it is difficult to reflect the bright spot of Fish-Redux data divide and conquer. It is also not very convenient for us to write a list of complex dynamic pages.

Neither StaticFlowAdapter nor DynamicFlowAdapter can meet the characteristics of dynamic choreography and data divide and conquer at the same time, so we have made a further evolution to Fish-Redux.

Fish-Redux evolution:

The first version is based on the ability of Fish-Redux, we made a layer of scaffolding effective_redux, according to the needs of our appeal for DynamicFlowAdapter packaging (component registration + data source processing) to complete the data mapping component logic, to achieve the corresponding dynamic orchestration capability.

1. Some common basic templates, dynamic templates, list templates and so on are built into the scaffolding to support some urgent business requirements.

two。 The ListAdapter function of fish redux is enhanced, and the concept of Section is put forward. To meet the requirements for the display of different types of data sets

But after the first version, there was some thinking:

1. Users who use fish redux also need dynamic orchestration ability.

two。 Developers are not used to changing the appearance of the page frame to increase the learning cost.

3. Technology drives business development, whether business requirements can complement technical framework capabilities, etc.

In the second version, we decided to add some of our capabilities to fish redux. After some thinking and comparing with some existing functions of Adapter, this paper summarizes the ability part that we can supplement to fish redux at present. It also unifies FlowAdapter and provides the ability to dynamically orchestrate.

Improved choreography: FlowAdapter

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

Rethink the core idea of Adapter: the transit station of the Dependent collection, dealing with the data flow within the collection, and the refresh logic of the components. At the same time, the processed collection is converted into UI interface-specific data.

Image.png

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

Divide-and-conquer data characteristics: the dynamically acquired List is the data set 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, which maintains the data processing divide-and-conquer characteristics of the components in adapter.

Of course, we have also done the tidiness of adapter. In fact, we will find that the internal implementation logic of the two adapter introduced in the appeal is inconsistent, and static adapter and dynamic adapter really deal with the flattening logic of the component collection is different.

In view of this, we migrate the implementation of StaticFlowAdapter,DynamicFlowAdapter functions to our new version of FlowAdapter. To ensure that Adapter capabilities are consistent, the appearance is consistent, reduce learning costs, but also can uniformly do some performance optimization.

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

The built-in template registration determines the arrangement order of the page according to the configuration information sent by the server. Based on the corresponding dynamic orchestration capabilities provided by the framework, we can achieve some of the business possibilities we have proposed.

[dynamic choreography ability] our orchestration order and display data are determined by the configuration information data returned by the server. In other words, the display of the page is determined by the server. The subsequent adjustment of the order between modules no longer depends on the local modification of the client and the package modification. At the same time, we have also done a background scheme corresponding to the data, and the standard page display order.

[component AB capability] the capability of the component AB can be delivered to the server for pre-processing. At the same time, dynamic replacement code can be added to the local code to do some customized processing according to different configurations.

[dynamic template] the addition of dynamic template in order to quickly verify the feasibility of a business module, test verification is done directly on-line, and the client version is not required.

The effect of the details is shown: some attempts have been made to get on and off the shelves based on the position adjustment of the price module. We can quickly make some online adjustments.

This time we aim at the adapter of fish redux to do neatness, for the change of thinking of choreographing data acquisition, we have more clearly defined the functional responsibilities of adapter. The adapter is optimized at the root to better adapt to the business scenario. This optimization and modification will be merged into fish redux release, which will bring you more convenience.

Based on the evolution of this framework, it brings us more thinking about fish redux for different containers. We are not only satisfied with the adapter adaptation of ordinary lists, but we are also preparing for the presentation of fish redux for different containers. There can also be a good landing in a waterfall flow scene or other containers. Some adaptations to PowerScrollView will also be made at the fish redux level.

For some business solutions, dynamic templates, AB capabilities I also expect to output to the fish redux expansion package, 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. The capability expansion of fish redux is also an important proposition for our follow-up.

After reading the above, have you mastered how Flutter's FishRedux architecture evolved 2. 0? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.