GMTC2018 《VUE组件库建设实践》 林溪

2020-02-27 205浏览

  • 1.全球大前端技术大会 Vue 组件库建设实践
  • 2.
  • 3.
  • 4.个人简介 林溪 • 饿了么前端架构师 • 百度外卖 • 百度地图 组件化 可视化 性能优化 Reason
  • 5.CONTENTS ⽬目录 前⾔言: 组件和抽象 1. 组件库设计原则 2. 组件库⼯工程化最佳实践 3. 总结展望
  • 6.组件和抽象 组件是⼀一种编程抽象，⽬目的是复⽤用 通用型组件库 业务型组件库
  • 7.抽象 DRY原则 全球大前端技术大会 Don’t repeat yourself 《程序员修炼之道》 从小工到专家 Andrew Hunt David Thomas
  • 8.抽象 三次原则 Rule of three 全球大前端技术大会 《重构》 改善已有代码的设计 Martin Fowler
  • 9.1 组件库设计
  • 10.组件设计 《敏捷软件开发》 原则、模式与实践 全球大前端技术大会 • 内聚性 粒度 • 耦合性 稳定 高内聚，低耦合
  • 11.粒度 CRP 共同复用原则 The Common Reuse Principle, CRP SRP 单一职责原则 全球大前端技术大会 CCP 公用封闭原则 The Common Closure Principle 一个组件不应该包含多个引起它变化的原因
  • 12.一个组件应不应该引用另一个组件？ 全球大前端技术大会 ？ 依赖的弊端 耦合 高维护成本 不稳定性 代码的可维护性大于复用性
  • 13.稳定 SDP 稳定依赖原则 The Stable-Dependencies Principle X Y Z HMN A B C 稳定性： A > B > C 全球大前端技术大会 选择器 菜单 弹出层
  • 14.稳定 SAP 稳定抽象原则 The Stable-Abstractions Principle 自动完成 输入框组件 弹出层 一个稳定的组件应该是抽象的 全球大前端技术大会
  • 15.父子组件如何依赖？ 全球大前端技术大会 IoC 好莱坞原则 Hollywood Principle Don’t call us，we‘ll call you 子组件的初始化和调用由父组件容器负责 CoC 约定大于配置原则 Convention over Configuration
  • 16.设计禁区 • 越界操作 • 副作用 • 侵入性 • 环形依赖 • 属性繁多 全球大前端技术大会
  • 17.设计规范先行 统一视觉 样式 • 色彩 • 布局 • 字体 • 图标 统一交互 动效 • 时长，缓动 • 移动路径 • 形变，编排 全球大前端技术大会 Material Design 光效、表面质感、运动感 鲜明、形象、有意义 有意义的动画效果
  • 18.样式分离 需求： • 主题定制 • 样式差异化 全球大前端技术大会 多种主题 主题定制工具 交互动画扩展
  • 19.辅助平台／工具 全球大前端技术大会 文档 脚手架 示例 迭代
  • 20.2 组件库⼯工程化最佳实践
  • 21.组件管理理⽅方案 需求： 全球大前端技术大会 多组件 多人参与 社区参与 私密性
  • 22.Lernahttps://lernajs.io/多包管理工具 全球大前端技术大会 优点： 一键安装依赖 自动更新依赖 独立版本管理 非Npm包
  • 23.国际化 i18n 45 种语言支持 全球大前端技术大会 af 荷兰语 ar 阿拉伯 hu 匈牙利语 th 泰语 In 印度尼西亚 cs-CZ 捷克 ko 朝鲜 sk 斯洛文尼亚 tr 土耳其 de 德语 lv 拉托维亚 pl 波兰语 sk 斯洛伐克 fi 芬兰 ru 俄罗斯 pt-br 葡萄牙语 vi 越南 ms 马来 he 希伯来 西亚
  • 24.1 制作语言文件 2 替换文字 全球大前端技术大会 3 运行时转换 直接mixin函数t Vue国际化vue-i8n
  • 25.测试⽅方案 全球大前端技术大会 Karma 驱动 Mocha 测试框架 chai 断言库 Sinon Mock Istanbul 覆盖率
  • 26.Karma 全球大前端技术大会 karma start karma config 浏览器 框架 reporters 预处理器 webpack Test case UI case chai run BDD 报告 通过率 覆盖率 Coveralls 提交覆盖率报告
  • 27.Jest Jest 一站式的测试方案 • DOM API • 断言库 • Mock库 • 快照 • 覆盖率 全球大前端技术大会 vue-test-utilshttps://vue-test-utils.vuejs.org/zh/shallowMount mount render renderToString
  • 28.主题⽅方案 实现： 提取全局变量 合理继承、衍生 全球大前端技术大会 自定义主题： 修改主题样式 覆盖主题样式 组件显示传值，内置样式处理https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=CE93D8
  • 29.组件库构建⽅方案 Webpack 动态生成 入口文件 版本号 复制 Lint 全球大前端技术大会 构建umd模块规范输出 构建commonjs2模块规范 输出 对每个组件，构建 commonjs2模块规范输出 组件之外的公共代码构建 构建语言文件，umd模块 规范输出 构建主题样式 浏览器/Node通用 Node
  • 30.ES 模块规范输出 Tree-shaking Rollup 输出ES模块： • 使用Babel转换成ES2015规范代码 • 添加module字段 全球大前端技术大会
  • 31.Github 集成 Travis CI 持续集成 全球大前端技术大会 • travis-ci.org 开通服务 • coveralls.io 开通服务 • 配置 .travis.yml 提交 代码 Travis CI 运行 设置环 境变量 启动 测试 组件库构建 组件提交master 主题提交分支 文档网站 构建提交 gh-pages 提交 覆盖 率 成功
  • 32.⽂文档⽅方案 docsifyhttps://docsify.js.org多语言 git pages 全文检索 插件扩展 全球大前端技术大会
  • 33.翻译⽅方案 crowdinhttps://crowdin.com逐句翻译 翻译推荐 进度管理 审核机制 全球大前端技术大会
  • 34.3 总结与展望
  • 35.总结 • 组件库还是要有的 • 合理理的设计 • 周围⽣生态很重要 • 造好轮⼦子是⼀一个脏活累活
  • 36.组件库⼯工具新探索 实时案例展示https://github.com/QingWei-Li/vuep.run
  • 37.实时案例展示 Vue组件 vue-template-compiler template script styles Custom Blocks 显示 Babel 转换 设置 Iframe HTML 分析加 载依赖 重新组装 Vue组件 html
  • 38.可视化配置 鼠标拖拽 可视化配置属性 生成代码https://github.com/lin-xi/playground
  • 39.可视化配置 组件配置文件 组件列表 属性组件
  • 40.可视化配置 拖拽 组件 组件 操作 层级组件描述树 渲染 属性表单生成 配置属性 组件 生成代码
  • 41.组件配置自动生成 文档自动生成 主题配置工具
  • 42.
  • 43.
  • 44.
  • 45.全球大前端技术大会 Q&A 谢谢！