At present, cross-platform, high-performance rendering engine has gradually become a hot spot in the big front-end field. As one of its stars, Flutter has a good chance of becoming the next mainstream cross-end solution. The Idle Fish technology is based on Flutter Deep Farming, which is the open source application framework for Flutter behind 200 million users: Fish Redux. Let’s take a closer look at Fish Redux, its functional programming model, predictable state management, pluggable component architecture, and optimal performance.

In addition, this evening, Idle Fish engineer will be a guest at Ali Technology studio to talk with you about mobile development and Fish Redux, welcome to watch.

Open source address

https://github.com/alibaba/fish-redux

At 19:30 PM, March 6th (Wednesday), welcome to Alibaba Technology Live Broadcast room to learn more about the open source Flutter application framework: Fish Redux and sneak peek together!

In this live stream, you will learn about Flutter and its application framework; The design principle of application framework and the thought of hierarchical architecture; Idle Fish Fish Redux application framework practice and other wonderful content.

Live viewing:

 

  • Direct viewing: Scan the QR code of the image above, or click “Read the original article” at the end of this article, in the browser (remember! Open the live stream link, bookmark it, set your alarm and watch it on Time on Wednesday, March 6.

  • Dingding Group viewing: Use “Dingding” to search for the exchange group number 23379655 and join the Flutter group. You can not only watch the live broadcast, but also interact with guests and colleagues in the industry.

Fish Redux is an assembled Flutter application framework based on Redux data management, especially suitable for building large and complex applications. Its biggest feature is configuration assembly, it will be very clean, easy to write, easy to maintain, easy to collaborate.

Fish Redux is mainly inspired by excellent frameworks such as Redux, React, Elm and Dva. Standing on the shoulders of giants, Fish Redux takes centralization, divide-and-conquer, reuse and isolation to the next step.

Hierarchical architecture diagram

The architecture diagram is composed of three layers from the bottom to the top. Each layer is used to solve problems and contradictions at different levels. The following layers are developed successively.

Redux

Redux is a data management framework from the front-end community, which may be a little strange to Native developers. Let’s give a brief introduction.

What does Redux do?

Redux is a framework for doing [predictable][centralized][easy to debug][flexible] data management. Redux is in charge of adding, deleting, modifying, and reviewing data.

How was Redux designed and implemented?

Redux is a functional data management framework. Traditional OOP does data management by defining beans, and each Bean exposes some public-API to manipulate internal data (congestion model). Functional approach is a more abstract latitude, the definition of data is some structs (anemia model), and the methods of data operation are unified into Reducer with the same function signature (T, Action) => T.

At the same time, Redux added the Middleware (AOP) pattern and Subscribe mechanism commonly used in FP, bringing high flexibility and expansibility to the framework. Anemia model, hyperemia model references at the end of the link.

The downside of Redux?

The Redux core is all about data management, not about what scenarios to use it in, which is both its strength and its weakness.

There are two specific problems in our actual use of Redux:

  • The contradiction between Redux centralization and Component divide-and-conquer.

  • Reducer of Redux requires layers of manual assembly, resulting in complexity and error-prone.

Fish Redux improvements?

Fish Redux does centralized observable data management with Redux. However, the disadvantages of traditional Redux at the usage level have been improved by better and higher abstractions in the scenario of end-to-end Flutter page latitude development.

A component needs to define a data (Struct) and a Reducer. At the same time, there is a parent dependent child relationship between components. Through this dependency relationship, we solved the contradiction between “centralization” and “divide and conquer”, and at the same time, the manual Combine of Reducer was automatically completed by the framework, greatly simplifying the difficulty of using Redux. We get the ideal concentration and divide and conquer code.

Follow community standards

The concepts of State, Action, Reducer, Store, and Middleware are exactly the same as community ReduxJS. We will keep all the advantages of Redux in its original form.

For a closer look at Redux, see the link at the end of this article.

Component

A component is a partial presentation and encapsulation of functionality. Based on the principle of Redux, we divided functions into Reducer and non-reducer functions.

Therefore, we have obtained three parts, View, Effect and Reducer, which are called the three elements of the component, responsible for the display of the component, the behavior of non-modified data and the behavior of modified data respectively.

This is a split for now, as well as for the future. In Redux’s case, it’s data management and more. In the future of UI-Automation looks to be UI expression and others.

The expression of THE UI is entering the era of black box for programmers, and developers will focus more on the behavior of non-modifying data, the behavior of modifying data.

Components divide and conquer views as well as data. By layer by layer, we slice complex pages and data into independent modules. This will facilitate collaborative development within the team.

On the View

A View is simply a function signature:

(T, Dispatch, ViewService) = > widgets,

It mainly contains three aspects of information:

  • Views are completely data-driven.

  • Events generated by views, callbacks, and “intents” issued through Dispatches are not implemented.

  • Need to use component dependencies, etc., through ViewService standardization call. For example, a typical function that conforms to the View signature.

About the Effect

Effect is the standard definition of non-modifying data behavior. It is a function signature: (Context, Action) => Object, which contains four main pieces of information:

  • Receive the “intent” from the View, including the corresponding lifecycle callback, and then execute it.

  • Its processing may be an asynchronous function, and the data may be modified in the process, so we don’t advocate holding data, but retrieving the latest data through context.

  • It does not modify data. If it needs to be modified, an Action should be sent to the Reducer.

  • Its return value is limited to bool or Future, corresponding to the flow that supports synchronous functions and coroutines. For example: good coroutine support.

About the Reducer

Reducer is a function signature that fully conforms to Redux specification :(T,Action) => T, a Reducer that meets the signature.

At the same time, we register the Dependencies of components and adapters in an explicit configuration called Dependencies.

So here’s the formula:

Component = View + Effect(optional) + Reducer(optional)

A typical assembly:

With Component abstraction, we get full divide-and-conquer, multi-latitude reuse, and better decoupling.

Adapter

Adapter is also a partial presentation and encapsulation of functionality. It is designed for ListView high performance scenarios and is a variation of the Component implementation.

1. It aims to solve three problems of the Component model in the flutter-ListView scenario:

  • Putting a “big-cell” in a Component does not benefit from the performance optimization of ListView code.

  • Component cannot distinguish appear | disappear and init | the dispose.

  • The coupling of the Effect lifecycle to the View is not intuitive in the ListView scenario. In a nutshell, we want a logical ScrollView, a performance ListView, an abstraction of local presentation and functionality encapsulation. To make such a separate layer of abstraction, let’s look at the actual effect. Instead of using a framework for the page, we use the framework Component and use the baseline performance comparison of the framework Component+Adapter.

2.Reducer is long-lived, Effect is medium-lived, View is short-lived. We do the comparison through continuous testing, taking an Android machine as an example.

3. FPS of our details page before using frame, baseline is 52FPS.

4. With frames and only Component abstractions, FPS drops to 40 and suffers the “big-cell” trap.

5. With frames and Adapter abstractions, FPS improved to 53, back above baseline, with a slight improvement.

Dictionary

The recommended directory structure would look like this:

Copy the code

The upper layer is responsible for assembly, the lower layer is responsible for implementation, and a plug-in will be provided for us to fill in quickly. An example of assembly using the detail scenario of idle fish:

Components are completely independent from each other, and components from containers.

Communication Mechanism

  • Component | communications within the adapter

  • Communication within | adapter between components

Simple description: Use self-first broadcast with a segment of priority processing. Emitted actions are handled first by themselves, otherwise they are broadcast to other components and Redux. Finally, we completed all communication demands within and between components (parent to child, child to parent, brother to brother, etc.) through a simple and intuitive dispatch.

Refresh Mechanism

Data refresh

1. Partial data modification automatically triggers shallow copies of upper-layer data and is transparent to upper-layer service codes.

2. Copy layers of data:

  • On the one hand, strict follow for Redux data modification.

  • On the other hand, it is also strict follow for data-driven display.

View refresh

Flat notifications to all components, which use shouldUpdate to determine if they need to refresh.

advantages

1. Centralized data management: Centralized observable data management through Redux. We retained all the original advantages of Redux, and at the same time, the Reducer merge was automatically completed by the frame agent, greatly simplifying the complexity of using Redux.

2. Divide-and-conquer management of components: Components divide and conquer views as well as data. By layer by layer, we slice complex pages and data into independent modules. This will facilitate collaborative development within the team.

3.View, Effect, Reducer isolation: Split components into three stateless independent functions. Because they are stateless, they are easier to write, debug, test, and maintain. At the same time, it brings more possibilities for combination, reuse and innovation.

4. Declarative configuration assembly: Components and adapters are assembled through free declarative configuration. Includes its View, Reducer, Effect, and its dependent children.

5. Good scalability: The core framework maintains its core three-layer focus, does not do things outside the core focus, and maintains flexible scalability for the upper layer.

  • The framework doesn’t even have a single line of printed code, but the standard Middleware allows you to watch data flow and components change.

  • In addition to the core three layers of the framework, the Dart language features can be used to add mixins to Component or Adapter to flexibly combine them to enhance the customization and capabilities of their upper layers.

  • The integration of frameworks with other middleware, such as automatic exposure and high availability, is transparent to each other and is freely assembled by the top layer.

6. Small, simple and complete:

  • It is very small, containing just over 1000 lines of code.

  • It is simple to use, complete a few small functions, complete assembly, can be run.

  • It’s complete.

Fish Redux has been deeply applied in multiple scenarios in Alibaba Xianyu technology team, and we look forward to working together with partners in the industry to improve it.

If you are interested in mobile development, welcome to join the Fish Redux developer exchange group, watch the live broadcast tonight, and communicate directly with the Xianyu technology team!

Reference:

https://en.wikipedia.org/wiki/PlainoldJava_object

https://github.com/reduxjs/redux

You might like it

Click on the image below to read it

In order to save parents’ circle of friends, Dharma Hospital created a “rumor crusher”

Ali open source iOS coprogram development framework CooBJC

It was the engineer’s longest confession of love

Focus on “Ali Technology”

Grasp the pulse of cutting-edge technology