Axe框架是一个开源的 iOS 交易组件化框架。本文引睹Axe框架的交易组件化思绪并引睹基于Axe框架实行的组件理念化与开辟控制平台化。
一、运用 Axe 框架实行交易组件化
交易组件化是近几年特殊火的 APP 架构想绪 究其启事跟着交易展开APP 的范畴也渐渐舒展代码控制与协调开辟变得繁沉编译耗时也屡变革高运用工效的拆分与研发团队的拆分也不可遏止。 这些展开须要 APP 架构的变幻以救急宏大 APP 的开辟救急跨团队的协调。而处置预备等于将各个交易拆分成独力组件从主工程中摆脱进动作自开辟、编译、试验不与其他交易组件彼此耦合。
组件化预备须要处置三个问题:
代码分割 : 最前提的哀求使组件不妨径直开辟。
径直编译 : 组件径直树立编译以普及 APP 编译速度并为径直试验供给前提。
组件接互 : 满脚组件之间接互的合理须要。
代码分割
代码分割比较容易实行代码解耦尔后分别建仓截止经过Cocoapods来控制引用。
径直编译
组件径直编译树立成Framework固态库。
组件共时须要有源码版本以进行调试。
组件的编译接入持续集成体系普遍会运用控制平台来控制组件的树立下文中会提及。
组件接互
交易组件之间的沟通协调是组件化中最闭头的本领点 普遍的组件化预备夸弛经过一种协议机制大概者target-action的措施来实行。 而Axe中的组件接互分为三个局部:
数据
咱们将数据抽离出来办法组件接互的沉要一环 组件间的数据接互分为二种:
数据共享 : 共享的是十脚组件都不妨赢得的数据。
数据传播 : 数据也不妨附着在路由和事变中传播。
径直的数据组件是为了处置特别典范数据的问题。 咱们救急特别数据典范如 图片、二进制数据、Model典范等。
路由
界面逻辑的处置接给路由。
依据路由的展示咱们定义二种路由:
跳转路由 : 进行页面跳转如运用UINavigationController的push以挨开一个新页面。
视图路由 : 返回一个界面元素 即返回一个UIViewController 以满脚嵌套页面的须要 如 侧边栏、Tab 栏等页面。
路由的展示措施是一个URL 如共大普遍的路由预备普遍。默认救急的路由是Axe路由构造为:
axe://{moduleName}/{pageName}
假如URL附戴参数会自动变幻为数据典范。路由救急回调和置。
Axe的路由救急协议夸大以实行自定义的路由处置。
事变
运用事变监听机制以实行更加精致方便的跨组件接互。
在事变实行中咱们供给了方便好用的接口 :Axe中的事变救急 共步、异步、优先级设定。 而且实行了二个特其他功效:
1. 组件初始化: 基于事变汇报实行组件自备案。 经过事变中的优先级和共异步设定来进行组件初始化的排序与控制。
进行登录组件的初始化该局部代码放在登录组件里面。当接入登录组件时便会在开用时自动初始化以备案路由。
2. 界面监听 : 供给一种实用于界面展示的监听接口该监听会保护回调直到页面回到前台才实行;且共名的汇报不会展示反复处置只会运用最新的数据实行一次。
事变中不妨附戴数据。
归纳
经过 路由 、 事变、 监听 咱们为组件之间的接互供给了实脚的救急。且实行了组件之间的代码实脚无依托。 组件接互时只要措施会 调用的路由场合 事变的称呼以及数据的键值与典范 (与Model数据的构造) 只要措施会这些 证明 即可 (经过字符串的措施)。 一个证明文件的示例:
这也为后续救急其他容器的组件供给了前提。
二、基于 Axe 实行组件理念化
在 APP 理念化的须要下运用H5和React Native成为许多APP的采用。 而咱们也在Axe框架的前提上再搞优化以更好的符合理念性的须要。
夸大容器
Axe不止消救急iOS本生页面也要救急WebView容器和React Native容器使这二类交易组件也不妨像本生普遍经过Axe接入组件化体系。
发端经过协议夸大在Axe上备案协议路由 : https 和 reacts 使其他组件不妨通路过由调用这些页面。夸大后咱们不妨运用路由跳转到H5页面:
[self jumpTo:@"https://demo.axe-org.cn/login-h5/#/"];
尔后搞Native与容器之间的桥接 :在WebView上运用WebViewJavascriptBridge办法JavaScript的桥接在React Native经过减少Native Module来搞桥接 , 调用Axe来处置路由跳转、事变汇报和数据哀求。 路由与汇报比较大概 核心是数据 咱们经过特别处置(表明典范和自动变幻)以救急特别典范的数据如NSDate、NSData、UIImage、Model等特别典范能在本生和JavaScript之间传播:
左侧是本生组件中的OC代码右侧是夸大容器的JavaScript代码Axe不妨搞到跨容器传播数据以致特别典范如图片、Model等。
经过桥接处置尚且咱们使WebView和React Native容器接入了组件化不妨经过Axe调用其他组件也不妨经过Axe被其他组件调用 使这二个容器在运用和展示上与本生组件 实脚普遍!
离线包救急
为了更好地运用JavaScript的容器Axe供给了一套大概的离线包预备。 离线包指 : 将资材挨包安置普遍控制下发以使 APP 不妨在离线的情境下运用本地资材加载页面。
运用离线包不妨俭朴用户流量普及页面加载速度普及用户体验。 尚且实行的大概离线包运用bsdiff进行差分救急上传到oss 救急伴随APP挨包且具备一个风趣的签名机制。
咱们进行协议夸大 :
ophttp: 基于离线包的H5容器路由 URL 措施是op 组件 / 页面
oprn : 基于离线包的React-Native容器路由 URL 办法是 oprn:// 组件 / 页面
组件雷个性
Axe中夸弛组件雷个性 , 即 假如二个组件实行了共样的 证明 , 具备沟通的交易逻辑 (被其他组件调用展示普遍)那这二个组件在Axe组件化体系中便不妨视为 沟通的组件 便不妨彼此代替。
所以在Axe组件化下咱们不闭心组件的实行只闭心组件的交易逻辑 只闭心组件的证明文件只闭心组件供给的页面、事变和数据。组件雷个性使组件不妨彼此代替。在Axe组件化下代替组件的实行不会效力其他交易组件的运行。
组件雷个性使咱们可认为交易组件开辟多个版本使不共的用户运用不共的版本以实行基于组件化预备的组件灰度试验。
理念路由
组件雷个性 哀求沟通的路由然而是咱们领会固执的路由只能闭于应一个几乎页面。
所认为了运用组件雷个性Axe提出一个证明路由的观念 证明路由是闭于实行路由的包装。运用理念路由后组件的证明文件中表明的是证明路由 。十脚交易组件经过证明路来由参瞅其他组件而本质跳转时再依据路由安排变幻为实行路由。
Axe供给了一个大概的理念路由效力 经过这个效力控制和下发路由照射安排使运物品有线上理念切换组件实行的本领。
三、闭于组件开辟进行平台化控制
基于Axe框架咱们实行了交易组件化 组件理念化 尔后咱们还要再进一步实行组件控制平台化。
即经过一个平台来典范组件化 APP 的开辟、树立、试验、接入、发布过程优化跨小组、团队、局部的协调开辟以搞到协调开辟的平台化。 平台化闭心的问题有 :
APP 架构
在Axe组件化下咱们引荐将群众交易和前提组件合成一个组件称之为Ground, 地基组件用于控制群众交易和群众的前提组件。
如许搞的启事 :
普遍控制前提本质的版本:交易组件开辟时只要要依托Ground组件而不须要过度闭心几乎前提组件的版本。
将凌乱繁重的前提组件普遍起来编译成一个实脚缩小了组件数目 必定程度上优化 APP 的实脚架构。
不妨很好的处置前提组件中的.a和.framework固态库。
Axe经过脚本自动处置Ground花样中包括的子组件的头文件使交易组件不妨经过平凡是的头文件引入措施来运用前提组件。
代码控制
运用gitlab 。
闭于于版本树立版本分支如version/0.0.1树立权利保护十脚提接都经过代码检视。
运用git-lfs控制 二进制文件。
花样控制
闭于于组件和 APP 的版本咱们要透彻并记录名本领时间节点郑沉依照预备实行花样。
控制组件版本的接入 :组件的版本必定经过 APP 控制人员的参瞅本领接入 APP 中。
协调开辟
组件的接口与变革日记要妥贴的归档记录。
多组件协调开辟时须要提前安置好接口以并发开辟。设定好开辟预备以保护组件都能及时完成。截止吞噬在十脚接入到 APP 中。
版本控制
组件版本号的控制依照语义化版本号固然用 主版本号. 次版本号. 矫正号 。尔后在运用Cocoapods进行组件版本的控制时咱们的处置措施是:
指定 几乎组件版本。
只保护Podfile , 不上传Podfile.lock
在开辟试验阶段咱们介入一个beta版本 :经过先行版本搞开辟版本的自动普及以处置开辟阶段的版本常常变幻的问题。 在完成开辟试验后树立release版本进行结果发布与封版:
图片4
须要注沉的是 pod依托的编写是运用物品自动处置所以不必担忧闭于开辟阶段产生迷惑。
交易开辟者只要措施会在不挨release版本之前不妨随便的树立beta版本而其他人运用时也会自动的接入到最新的beta版本。
持续集成
运用fastlane和Jenkins搞持续集成fastlane编写脚本处置组件的控制、接入与挨包。
自动化试验
因为Axe组件化中一个组件最沉要的是其证明。 所以自动化试验的本质等于依照证明调用接口 尔后检测返回值是否透彻。
在试验过程中一些沉要节点进行截图以赶快检测 UI 问题。
自动化试验在 0.1.0 的Axe中并未实行。
组件开辟控制平台
以上是Axe的处置预备的大概引睹。 共时Axe 供给了一个大概的组件化开辟控制平台。该用来控制 :
组件的开辟预备
组件的文档
组件的树立
APP 的开辟预备
组件的接入和晋级控制
尚且Demo网址为 demo.axe-org.cn 。接下来咱们大概引睹一下这套体系中的风趣大概沉要的场所:
时间线
在APP版本大概者组件版本发端前赶快上钩部分桌面以赶快检测 UI 问题。
自动化试验在 0.1.0 的Axe中并未实行。
组件开辟控制平台
以上是Axe的处置预备的大概引睹。 共时Axe 供给了一个大概的组件化开辟控制平台。该用来控制 :
组件的开辟预备
组件的文档
组件的树立
APP 的开辟预备
组件的接入和晋级控制
尚且Demo网址为 demo.axe-org.cn 。接下来咱们大概引睹一下这套体系中的风趣大概沉要的场所:
时间线
在APP版本大概者组件版本发端前先制定一个时间预备指明 APP 版本大概组件版本的沉要时间节点 :
APP 版本概览
右侧是APP的依托图经过脚本自动画制。
组件概览
组件版本概览
右侧记录版本的变革日记。
组件 API 文档
API文档也等于上述的证明文件 用于证明其救急的路由揭穿的数据和发送的汇报。
组件依托情境
依托图是脚本自动画制的。
连线括号内是证明的版本控制而圆圈括号内是几乎运用的版本号。
组件树立
闭于接 jenkins调用组件树立负担自动挨包并提接版本。
接入控制
当一个交易组件开辟完成后须要提接接入 APP 的乞求由APP控制员察瞅并确认本领接入该版本。
归纳
基于Axe框架咱们实行 iOS 运用的交易组件化并在此前提长进举理想化的夸大截止更进一步实行平台化的控制。尚且花样开源在 github场合为 https://github.com/axe-org/axe 。
咱们会持续保护与变革迎接大师来体验、抓虫与吐槽。