2018年多终端应用下的架构设计.pdf

1、多终端应用下的架构设计目录应用特点及关键问题01解决思路及实现方案02实践效果及未来方向03特点与问题Gridsum01数据可视化应用?统一构建，多端发布发布问题和挑战 如何灵活表达知识信息 如何在频繁的迭代中保持良好的扩展性知识复杂度高研发效率低 复用度低 沟通协作成本高 各终端技术栈差异客户满意度下降 各端交付速度不一致 交付质量低思路与方案Gridsum02如何使研发效率提升 终端类型数*100%扩展新终端类型可快速实现01降低不同终端开发维护上的差异02如何用统一的方式描述业务知识？配置化实现?Web构建App配置-设计要点实体信息通过项目、仪表盘、组件等实体描述知识。终端差异不同终端

2、由于应用关注点的差异，比如布局、样式。层次结构不同实体之间具有层次结构，实体属性上有“继承”关系。配置-终端应用?如何有效降低不同终端技术实现差异？多终端-MVC公共层?ViewController?多终端-View规范实现1.MVVM框架 2.统一状态管理为Mobx 3.内置组件模板渲染公共层1.Model和ViewModel在公共层获取2.终端中可定义自己特有ViewModel3.依赖内置组件库实现逻辑处理多终端-Model规范实现1.提供各终端所需Model 2.各终端公共ViewModel 2.Model范式化 3.持久化数据处理依赖Controller1.预处理逻辑2.配置服务?内容

3、1.内置组件库2.配置解析服务3.Common query builder 3.其他多终端-Controller内置组件库?代码如何管理多仓库优点 相互隔离 包依赖独立 缺点 Code ShareNPM优点 可将公共层提取独立模块共享 缺点 跨模块开发体验差 增加除关注应用版本外，还需关注公共模块版本多个功能并行开发，依赖公共模块，造成冲突 开发状态和发布状态版本区分基于Lerna目录结构RepoRoot/package.json lerna.json common-lib/package.json web/package.json app/package.json rigger/packag

4、e.json依赖在rigger/app/web的package.json的dependencies添加对common-lib依赖?效果与未来Gridsum03技术架构?mobxNormalizrImmuatable?VueGS-UIVue RouterReact NativeReact Native Componentmobx/mobx-reactJqueryJquery UIgridstackmobx/mobx-vue?GitlabGit FlowCommitizenLerna?webpackYarnBabelSassKarmaJasminePostCSSvue loader?ESLintStyleLintWD Web WD APP?puppeteerpdfkitExpressC#JavaPythonGraphQLCode push开发流程?团队协作面向Feature新Feature的开发，如果需要在各个终端都实现则统一开发，同步交付定期Review 沉淀复用 规范实现 扩展完善面向终端依赖终端原生能力，如：iOS、Android等现状60%代码复用率150%交付速度40%成本降低未来方向数据层进一步下沉（GraphQL）01内置组件库视图统一维护02Edward A.Murphy（墨菲定律）“如果事情有变坏的可能，不管这种可能性有多小，它总会发生。”