background
Use Flutter in depth the development process, we encountered a couple of serious business code, the code maintainability bad, such as into the mud. We need a unified application development framework to get rid of the plight of the moment, and this is a piece of virgin land vacant Flutter field.
FISH Redux solve the above problems is the upper layer application framework, which is assembled on a frame flutter Redux data management applications, especially for large and complex Construction applications.
Its biggest feature is a profile assembly, on the one hand a large page, and to view data for the dismantling layers of mutually independent Component | Adapter, responsible for assembling the upper, lower responsible for implementing, on the other hand the Component | Adapter Split mutually separate context View, Reducer, Effect other unrelated functions. So it will be very clean, easy to write, easy to maintain, and easy collaboration.
Fish Redux inspiration mainly from Redux, React, Elm, excellent frameworks such as Dva, while the Fish Redux standing on the shoulders of giants, will focus, divide and conquer, multiplexing, further isolating do.
Layered architecture diagram
Chart, the main bottom-up, divided into three layers, each layer barrier level to solve problems and contradictions, in order to expand below.
Redux
- Redux is a front-end data management framework from the community, the development of Native students who might be a little strange, we do a brief introduction.
Redux what to do?
- Redux is a framework used for debugging predictable and easy data management. All additions and deletions to change search the data and other operations by Redux to focus on responsible.
Redux is how the design and implementation?
-
Redux frame is a data management function formula.
传统 OOP 做数据管理，往往是定义一些 Bean，每一个 Bean 对外暴露一些 Public-API 用来操作内部数据（充血模型）。 函数式的做法是更上一个抽象的纬度，对数据的定义是一些 Struct（贫血模型），而操作数据的方法都统一到具有相同函数签名 (T, Action) => T 的 Reducer 中。 FP:Struct（贫血模型） + Reducer = OOP:Bean（充血模型） 同时 Redux 加上了 FP 中常用的 Middleware（AOP） 模式和 Subscribe 机制，给框架带了极高的灵活性和扩展性。 贫血模型、充血模型 参考： [https://en.wikipedia.org/wiki/Plain_old_Java_object](https://en.wikipedia.org/wiki/Plain_old_Java_object)
Redux shortcomings
-
Redux only concerned the core data management, we do not care what the specific scenario to use it, which is its advantages but also its disadvantages.
-
We face two specific problems in actual use in Redux
- Redux contradiction between centralized and partition Component.
- Redux layers of Reducer need to manually assemble, bring the tedious and error-prone nature of.
Fish Redux improved
Data management Fish Redux Redux by doing centralized observable. However, not only this, the traditional disadvantages in the use of Redux level in the scene for mid-latitude side flutter page development, we better through higher abstraction, made improvements.
A need to define a data component (StructEntryTable) and a Reducer. Meanwhile dependent parent child relationship exists between the components. Through this layer dependencies,
we solve the contradiction between the [centralized] and [partition], while the manual Reducer Combine the layers become automatically by the framework, which greatly simplifies the difficulty of using Redux.
We got the code effect and the partition of the ideal set.
follow community standards
- State, Action, Reducer, Store, Middleware and above ReduxJS concept of community is exactly the same. We will retain all the advantages of the original Redux's.
- If you want to have a closer understanding of Redux, please refer https://github.com/reduxjs/redux
Component
Encapsulation of components are shown and function of the local. Redux is based on the principle, we modify the function subdivided into functional data (Reducer) and non-modified functional data (adverse effects Effect).
So we got the three elements View, Effect, Reducer three parts, called components, are responsible for the display components, non-modified data behavior, behavior modification data.
This is a moment for, but also for the future split. At the moment it seems Redux-oriented, data management and others. In the future UI UI-Automation appears to be expressed and others.
UI expression of programmers is about to enter the era of the black box, R & D engineers will focus more on the behavior of non-modified data, modify data on the behavior.
Component is the partition of view, but also partition the data. Divide and conquer by layer by layer, we'll complex data page and cut into small independent modules. This will be conducive to the development of cooperation within the team.
About View
View is just a function signature: (T, Dispatch, ViewService) => Widget
which mainly contains information in three areas
-
It is entirely driven by a data view.
-
View event produced / callback, issued the "intention" by Dispatch, not the implementation.
-
Components dependence need to use the call through ViewService standardization.
比如一个典型的符合 View 签名的函数
About Effect
Effect modification is the definition of non-standard behavior of the data, which is a function signature: (Context, Action) => Object
It mainly includes four aspects information
-
View from the reception of "intent", including callbacks life cycle, and then make a specific implementation.
-
It may be an asynchronous processing functions, data may be modified in the process, so we do not advocate hold data, and to get the latest data by context.
-
It does not modify the data, if you want to repair, should send a Action to go Reducer processing.
-
It is limited to the return value bool or Future, corresponding to support synchronous functions and a processing flow coroutine.
比如：良好的协程的支持
About Reducer
Function signature Reducer is a fully compliant Redux specification: (T, Action) => T
number in line with the signed Reducer
We explicitly configured widget way to accomplish large components depend, registration of the adapter, this configuration dependent called Dependencies.
Therefore, there is such a formula Component = View + Effect (optional) + Reducer (optional) + Dependencies (optional).
A typical assembly
By abstracting Component, we get a complete partition, and more latitude multiplexing, better decoupling.
Adapter
Adapter also encapsulate the display and the functions of the local. It is born ListView high performance scene, which is a variation on the Component implemented.
-
Its goal is to solve three problems Component model in flutter-ListView scene
-
1) a "Big-Cell" on Component, unable to enjoy the performance optimization ListView code.
-
2) Component can not distinguish appear | disappear and init | dispose.
-
3) Effect of the life cycle of coupling and View, in the scene ListView does not comply with intuitive expectations.
概括的讲，我们想要一个逻辑上的 ScrollView，性能上的 ListView ，这样的一种局部展示和功能封装的抽象。 做出这样独立一层的抽象是， 我们看实际的效果， 我们对页面不使用框架，使用框架 Component，使用框架 Component+Adapter 的性能基线对比
-
-
. Reducer is long-lived, Effect is medium-lived, View is short-lived
we do comparison through continuous testing to an android machine, for example: -
FPS frame before using our details page, baseline 52FPS.
-
Using frames, use only under Component abstract, FPS drops to 40, suffered a "Big-Cell" trap.
-
After using frames, while using Adapter abstract, FPS raised to 53, back above the baseline, there is a small elevation.
Directory
Recommended directory structure would be like this
sample_page
-- action.dart
-- page.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart
components
sample_component
-- action.dart
-- component.dart
-- view.dart
-- effect.dart
-- reducer.dart
-- state.dart
Responsible for assembling the upper layer, the lower layer is responsible for implementing, while there will be a plug-in provides, for us to quickly fill.
In order to free the fish scenario as an example of the details of the assembly:
Between the components and the components are completely independent of the components and containers.
Communication Mechanism
-
Components | internal communications adapter
-
Components | internal communication between the adapter
 简单的描述：采用的是带有一段优先处理的广播， self-first-broadcast。 发出的 Action，自己优先处理，否则广播给其他组件和 Redux 处理。 最终我们通过一个简单而直观的 dispatch 完成了组件内，组件间（父到子，子到父，兄弟间等）的所有的通信诉求。
Refresh Mechanism
Data Refresh
-
Local modify data, automatically triggers a shallow copy upper layer data, the upper layer service code is transparent.
-
Copy of the data layers of
-
On the one hand is Redux data modification strict follow.
-
The other is to follow a strict data-driven show.
-
View refresh
-
Flat notice to all components, component by shouldUpdate determine whether they need to be refreshed
advantage
Centralized management of data
- Data management through a centralized Redux do observable. We will retain all the advantages of the original Redux, while on the merger Reducer, becomes the agent automatically by the framework, which greatly simplifies the use of Redux cumbersome degrees.
Partition management component
- Components of view of both the partition, but also partition the data. Divide and conquer by layer by layer, we'll complex data page and cut into small independent modules. This will be conducive to the development of cooperation within the team.
View, Reducer, Effect isolation
- The assembly split into three non-dependent function stateless. Because it is not a function of the state, it is easier to write, debug, test, and maintenance. At the same time it brings more combinations, reuse and innovation possible.
Declarative configuration assembly
- Components, assembled by the adapter to complete the configuration consisting of declarative. Including its View, Reducer, Effect, and it depends on the child.
Good scalability
-
The core framework to maintain its three core concerns, do not do things outside the core focus, while maintaining the upper flexible scalability.
- Even printing frame without any line of code, we may observe the change in the data flow, by standard components Middleware.
- Outside the framework of the three-core, add mixin also be Component Adapter or dart through the language features, modular and flexible to customize and enhance their ability to use the upper.
- And other open middleware framework, such as auto exposure, high availability, are transparent and between the intermediate frame, the assembly consisting of the upper layer.
Small fine, simple, complete
- It is very small, only contains more than 1,000 lines of code.
- It is simple to complete several small function, has been assembled to run.
- It is complete.
You can look, you can see more Android development technology and advanced data sharing ~ dry
