陈成—GMTC 蚂蚁金服的前端框架和工程化实践 20190620

2020-03-01 385浏览

  • 1.蚂蚁金服的前端框架和工程化实践 陈成（云谦） 高级前端技术专家
  • 2.在此键入姓名 在此键入tittle
  • 3.在此键入姓名 在此键入tittle
  • 4.自我介绍 杭州 wife, 2 kids 淘宝 5 年年 ⽀支付宝 6 年年 spm awesomejavascript atool- babelbuild plugindora import roadhog dva umi fatherhttps://sorrycc.com
  • 5.目录 • • • • • • 框架发展历史 为什么我们能成？ 框架大图 拳头功能 专题深入 未来和规划
  • 6.框架发展历史 从刀耕火种的时代跨入工业化时代
  • 7.框架时间线 Arale 2015.6 2015.9 2016.2 2017.8 2017.12 2018.6 2019.11 Roof Redux Dva Umi Bigfish Umi +Bigfish Umi Sea.js SPM React atool-build dora Koi roadhoghttps://www.yuque.com/afx/blog/those-days
  • 8.跨入新时代
  • 9.框架现状 • • • umi 对外开源 bigfish 对内服务 公式： • • bigfish = umi + umi-plugin-bigfish 类似案例： • chair 和 eggjs
  • 10.框架数据在蚂蚁 1100+ 80%+ 100+ 1500+ 内部应⽤用数 新增产品覆盖率 插件数量量 内部使⽤用者
  • 11.为什么我们能成？ 人、业务、流程、开源
  • 12.技术、人、插件体系
  • 13.为什么我们能成？ • 每个人都可以参与贡献，根据自己的业务提取适用于自己业务的插件，反哺 umi/ Bigfish 框架 • • 100 多人的内部开发群 5 层架构 • 低贡献成本
  • 14.Bigfish 的五层架构
  • 15.插件生命周期图 • 编译时 • • 运行时 • • node 浏览器 编辑时 • ui 辅助
  • 16.写一个插件
  • 17.插件市场
  • 18.
  • 19.紧贴业务、打通流程 通过 appType 和 deployMode 两个维度对接所有应⽤用和部署类型。
  • 20.开源 • • • • 代码质量 bugfix 额外的代码贡献 umi core developer group
  • 21.框架大图 umi、Bigfish、配套设施、外部服务、开发者、设计师 …
  • 22.
  • 23.👊 拳头功能 资产市场、微前端、场景完备性
  • 24.资产市场
  • 25.资产市场 - 区块演示
  • 26.资产市场 - 区块方案迭代 2018.12 2019.6 来源 区块 1.0 区块 2.0 • • • • • • • • angular theme market • 飞冰 页面级 支持 mock、dva model 等 重复添加 无限嵌套 区块集 结合布局 umi ui
  • 27.资产市场 - 打通上下游
  • 28.微前端
  • 29.微前端
  • 30.微前端
  • 31.微前端 - 关键技术
  • 32.微前端 - 关键技术实现
  • 33.微前端 - 开源 乾坤 + umi-plugin-qiankun
  • 34.微前端 社区你能找到的最完善的微前端架 构实践，没有之⼀一。 -- 有知
  • 35.场景完备性
  • 36.场景完备性 - SSR • 通用方案 •https://prerender.io/• react-snap • react-snapshot • 缺点：动态路由 • 标准方案 • umi 内置支持，配置ssr:true 实现 • 缺点：依赖 node • 进阶方案 • prerender • 通过 umi-plugin-prerender 实现 • 缺点：动态路由 ⽀支持 SSR ⽀支持 Prerender
  • 37.专题研究 路由、编译提速、性能优化、补丁方案、编辑器插件、测试、监控体系
  • 38.路由
  • 39.路由 - 按需编译的实现 • next.js • 动态 entry • umi • 临时文件
  • 40.编译提速 • 目标 • 提升开发效率，目标是秒开（10s 内） • 常规优化 • dll、hard-source、cache-loader、happypack、external • 硬件升级、简化配置、按需编译、webpack@5、Plug'n'Play • 进阶优化 • auto-external、uglify hash cache • “变态”优化 • 不一定是 webpack，codesandbox、stackbliz • rust、systemjs、cloud ide、esm in browser
  • 41.性能优化 • • • • • • • • • 按需加载 一键切换框架（preact、nerv、anu.js 等） 公共文件提取策略 SSR 和 Prerender Prefetch 和 Preload Modern Mode Critical CSS 补丁方案 …
  • 42.性能优化 - 补丁方案 • 组件不打补丁 • 常规方案 • 通过 targets 配置同时处理 babel 和 postcss 的兼容问题 • 极限方案 • 手动指定补丁 + eslint 插件限制 • 终极方案 • 在线补丁（类 polyfill.io） + 特性检测
  • 43.编辑器插件 • • • • • 路由自动补全 路由文件跳转 dva 的 action 提示、跳转、补全和引用查看 国际化字段提示 …
  • 44.编辑器插件 Dva Action 点击跳转 路路由⾃自动补全
  • 45.测试 • 测试金字塔 • 单测 • UI 测试 • e2e • 集成测试 • 基本方案 • Jest + test-react-library + puppeteer • 进阶 • 测试的录制和回放 • 基于路由的自动化测试方案
  • 46.监控体系
  • 47.监控体系
  • 48.未来和规划 分分合合，统一 Umi 和 Bigfish，今年里程碑
  • 49.框架终态
  • 50.发布计划 • 2019.5 • 微前端 • ant-design-pro 发布 4.0 • 2019.6 • SSR + Prerender • 2019.8 • dva@3 • umi ui • 2019.11 • umi@3 • antd@4
  • 51.在此键入姓名 在此键入tittle
  • 52.在此键入姓名 在此键入tittle
  • 53.THANKS THANKS！ THANKS！