GMTC2018 <<多终端应用下的架构设计 >> 赵泽彬

2020-03-01 196浏览

  • 1.多终端应⽤用下的架构设计 赵泽彬 - 国双科技
  • 2.
  • 3.
  • 4.⽬目录 01 应⽤用特点及关键问题 02 解决思路路及实现⽅方案 03 实践效果及未来⽅方向
  • 5.01 特点与问题 Gridsum
  • 6.数据可视化应⽤用 ຅ୌ *93 ‫૲ݎ‬ ‫૲ݎ‬ ‫૲ݎ‬ :HE 0RELOH ŏ
  • 7.统⼀一构建，多端发布 发 布
  • 8.问题和挑战 知识复杂度⾼高 • 如何灵活表达知识信息
 • 如何在频繁的迭代中保持良好 的扩展性 研发效率低 • 复⽤用度低
 • 沟通协作成本⾼高
 • 各终端技术栈差异 客户满意度下降 • 各端交付速度不不⼀一致
 • 交付质量量低
  • 9.02 思路路与⽅方案 Gridsum
  • 10.如何使研发效率提升 终端类型数*100%
  • 11.01 扩展新终端类型可快速实现 02 降低不不同终端开发维护上的差异
  • 12.如何⽤用统⼀一的⽅方式描述业务知识？
  • 13.配置化实现      Web 构建 App 
  • 14.配置 - 设计要点 实体信息 通过项⽬目、仪表盘、组 件等实体描述知识。 层次结构 不不同实体之间具有层次结 构，实体属性上有“继承” 关系。 终端差异 不不同终端由于应⽤用关注点 的差异，⽐比如布局、样式。
  • 15.配置 - 终端应⽤用      
  • 16.如何有效降低不不同终端技术实现差异？
  • 17.多终端 - MVC View :HE $33 … ٖᗝᕟկପ XWLOV ᯈᗝ๐‫ۓ‬ Controller &RPPRQ4XHU\%XLOGHU 0RGHO ӱ‫ۓ‬ཛྷࣳ ᶼ॒ቘ 公共层
  • 18.多终端 - View 规范实现
 
 1. MVVM框架 2. 统⼀一状态管理理为Mobx 3. 内置组件模板渲染 公共层
 1. Model和ViewModel在公共层获取
 2. 终端中可定义⾃自⼰己特有ViewModel
 3. 依赖内置组件库实现逻辑处理理
  • 19.多终端 - Model       规范实现
 
 1. 提供各终端所需Model 2. 各终端公共ViewModel 2. Model范式化 3. 持久化数据处理理   依赖Controller
 1. 预处理理逻辑
 2. 配置服务
  • 20.多终端 - Controller 内容
 
 1. 内置组件库
 2. 配置解析服务
 3. Common query builder 3. 其他
  • 21.内置组件库  • ,0.+50 • (3.120*0-/4')-4160 #&$ #&!   "$ %!     % 
  • 22.代码如何管理理 多仓库
 
 优点 • 相互隔离 • 包依赖独⽴立 缺点 • Code Share NPM
 优点 • 可将公共层提取独⽴立模块共享 •多个功能并⾏行行开发，依赖公 共模块，造成冲突 •开发状态和发布状态版本区分 缺点 • 跨模块开发体验差 • 增加除关注应⽤用版本外，还需关注公共模块版本
  • 23.    基于Lerna  ⽬目录结构
 
 RepoRoot/
 package.json
 lerna.json
 common-lib/
 package.json
 web/
 package.json
 app/ package.json
 rigger/
 package.json 依赖
 在rigger/app/web的package.json的 dependencies添加对common-lib依赖
  • 24.03 效果与未来 Gridsum
  • 25.技术架构 ଫአ੶ ᕟկ੶ ‫੶ول‬ ૡᑕ੶ 6HUYHU ຅ୌ :HE L26 $QGURLG ZHE Vue Jquery Vue Router Jquery UI GS-UI gridstack mobx/mobx-vue …… PRELOH React Native mobx/mobx-react React Native Component හ mobx Normalizr ๐ ഝ ‫ۓ‬ ੶ Immuatable ੶ դ Gitlab Ꮁ Commitizen Git Flow Lerna ૡ webpack ᑕ ۸ Karma D[LRV &4%XLOGHU 8WLOV ᯈᗝᥴຉ ٖᗝ ᕟկପ &KDUWV 7DEOHV ਧ‫ګ‬ᕟկ (GLWRU Yarn Jasmine Babel PostCSS Sass vue loader ESLint StyleLint ፊ WD Web ၥ WD APP puppeteer 1RGH pdfkit Code push Express GraphQL C# Java Python
  • 26.开发流程  " ;25:83 /!&0 9347365 ,' ; ; )' # ; (  ,'  ; ;+* %# ;$ ; .-
  • 27.团队协作 ⾯面向Feature
 新Feature的开发，如果 需要在各个终端都实现 则统⼀一开发，同步交付 ⾯面向终端
 依赖终端原⽣生能⼒力力， 如：iOS、Android等 定期Review
 • 沉淀复⽤用 • 规范实现 • 扩展完善
  • 28.60% 代码复⽤用率 现状 150% 交付速度 40% 成本降低
  • 29.未来⽅方向 01 数据层进⼀一步下沉（GraphQL） 02 内置组件库视图统⼀一维护
  • 30.“如果事情有变坏的可能，不不管这种可能性有多 ⼩小，它总会发⽣生。” –Edward A. Murphy（墨墨菲定律律）
  • 31.
  • 32.
  • 33.