马云家出了一款开发框架Fish Redux Android IOS跨平台热拔插收藏

Fish Redux 是一个基于 Redux 数据管理的组装式 flutter 应用框架, 它特别适用于构建中大型的复杂应用。

它的特点是配置式组装。 一方面我们将一个大的页面,对视图和数据层层拆解为互相独立的 Component|Adapter,上层负责组装,下层负责实现; 另一方面将 Component|Adapter 拆分为 View,Reducer,Effect 等相互独立的上下文无关函数。

所以它会非常干净,易维护,易协作。

Fish Redux 的灵感主要来自于 Redux, Elm, Dva 这样的优秀框架。而 Fish Redux 站在巨人的肩膀上,将集中,分治,复用,隔离做的更进一步。

马云家出了一款开发框架Fish Redux Android IOS跨平台热拔插收藏

Fish Redux

ish-redux 是一个不断演进的框架,甚至是在不断的回炉重造,在这个过程中

  • 第一个版本是基于社区内的 flutter_redux 进行的改造,核心是提供了 UI 代码的组件化,当然问题也非常明显,针对复杂的业务场景,往往业务逻辑很多,无法做到逻辑代码的分治和复用。
  • 第二个版本针对第一个版本的问题,做出了比较重大的修改,解决了 UI 代码和逻辑代码的分治问题,但设计上打破了 redux 的原则,丢失了 Redux 的精华。
  • 在第三个版本进行重构时,我们确立了整体的架构原则与分层要求,一方面按照 reduxjs 的代码进行了 flutter 侧的 redux 实现,将 redux 完整保留下来。另一方面针对组件化的问题,提供了 redux 之上的 component 的封装,并创新的通过这一层的架构设计提供了业务代码分治的能力。第三版 完成了 Redux, Component 两层的设计,其中包含了 Connector,Dependencies,Context 等重要概念。3.1 解决集中和分治的矛盾的核心在于 Connector3.2 这一层的组件的分治是面向通用设计的。通过在 Dependencies 配置 slots,得到了可插拔的组件系统。
  • 在第三个版本 Redux & Component 之外,提供了面向 ListView 场景的分治设计 Adapter。解决了在面向 ListView 场景下的逻辑的分治和性能降低的矛盾。what's-adapter

目前,fish redux 已经在闲鱼线上稳定运行,未来,期待 fish redux 给社区带来更多的输入。

直接使用 flutter 会面临的问题?

flutter 是 google 推出的新一代跨平台渲染框架. 它帮助开发者解决了跨平台,高性能,富有表现力和灵活的 UI 表达,快速开发等核心问题。 但是如果开发大应用,还需要解决以下问题。

数据流问题通信问题可插拔的组件系统展示和逻辑解耦统一的编程模型和规范

我们可以类比 flutter 和 React,事实上在中大型应用中 React 会面临的绝大多数问题,flutter 也同样面临考验。

数据流问题

目前社区流行的数据流方案有: 单向数据流方案,以 Redux 为代表 响应式数据流方案,以 Mobx 为代表 其他,以 rxjs 为代表 那么哪一种架构最合适 flutter ? 我们追随了 javascript 栈绝大多数开发者的选择 - ReduxJs 感谢 ReduxJs,我们是几乎 100%的还原了它在 dart 上的实现。所以我们也继承了它的优点:[Predictable],[Centralized],[Debuggable],[Flexible]。

通信问题

直接使用 flutter,在 Widgets 之间传递状态和回调,随着应用复杂度的上升,会变成是一件可怕而糟糕的事情。 通过 fish redux,依托于集中的 Redux 和分治的 Effect 模块,通过一个极简的 dispatch-api,完成所有的通信的诉求。

可插拔的组件系统

fish redux 通过一个配置式的 Dependencies,来完成灵活的可插拔的组件系统。同时有这一配置的存在,它解放了我们手动拼装 Reducer 的繁琐工作。 参考:

what's-connectorconnectordependenciescomponentadapterwhat's-adapter

展示和逻辑解耦

fish redux 从 elm 中得到了非常多的设计灵感。 将一个组件,拆分为相互独立的 View,Effect,Reducer 三个函数,我们优雅的解决了展示和逻辑解耦的问题。 通过这样的拆分,我们将 UI 的表达隔离于一个函数内,它让我们更好的面向未来,一份 UI 表达它可能来自于开发者,可能来自于深度学习框架的 UI 代码生成,可能是面向移动终端,也可能是面向浏览器。它让我们有了更多的组合的可能。 同时函数式的编程模型带来了更容易编写,更容易扩展,更容易测试,更容易维护等特性。

Fish Redux 使用指南

为啥要使用Fish redux

1,年前就被闲鱼大佬安利,种草已久

2,想要对比Flutter Redux,学习体会它带来的优越性

3,参与并支持一下国产,现在Flutter生态还在早期

准备工作

1,Redux.js 文档

2,Fish Redux 文档

3,Pub使用文档

萌新(没接触过Redux):建议按顺序看一遍,磨刀不费砍柴功,扎实的理论基础是很有用处的

熟练玩家(Demo用过Redux):建议把Fish Redux文档的简介和Component看下,尤其是Component,这是它独特的地方

老司机(项目中用过Redux.js或Flutter Redux):可以重点看下Component中的Effect,Dependencies,Page,还有Adapter

在看文档时,可以把Fish Redux项目Clone下来,先把Example改下跑跑看,再对着源码理解下文档中的概念。

重要概念

当然以下概念还是需要理解的:

Action

Action定义一种行为,可以携带信息,发往Store。换言之Store发生改变须由Action触发,Fish redux 有以下约定:Action 包含两个字段type和payload;推荐写法是在action.dart里定义一个type枚举类和一个ActionCreator类,这样有利于约束payload的类型。

Reducer/Effect

这两个函数都是用来处理数据的函数,Reducer是纯函数响应Action对Store数据进行改变。Effect用来处理来自视图的意图,如点击事件,发起异步请求,这些有副作用的操作。

Page

可以看成是一个容器,它用来配置聚合State,Effect,Reduce,View,Dependencies等

  • 一个页面内都有且仅有一个 Store(意思是会有好多个Store,这是区别于Flutter Redux的)
  • Page 继承于 Component,所以它能配置所有 Component 的要素(意思是比Component多了Middleware和initState)
  • Page 能配置 Middleware,用于对 Redux 做 AOP 管理(意思是可以无侵入的实现一些如log打印,性能分析这样的通用功能。中间件定义是可插拔,可叠加,但不会改变事件流程)
  • Page 必须配置一个初始化页面数据的初始化函数initState(页面有初始数据是必须的吧)

Adapter(可选)

这个不是必须,但确实很屌,很好用,使用和Android的老配方差不多,妙在效果拔群。有追求的可以看下历史和原理,当然还有源码。

有这些储备,那么可以开始写代码了

接入

1,创建一个flutter project,按照文档加入依赖

2,按照定义(当然也可以对着Example)分别创建Action,State,Effect,Reducer,View,Page这几个文件,并写套路代码。

3,运行代码观察效果


分享到:


相關文章: