06 2019 SEEConf 蚂蚁金服前端框架探索之路 云谦 2019,1

前端狗

2019/01/19 发布于 技术 分类

文字内容
1. 蚂蚁⾦金金服前端框架探索之路路 云谦
2. 陈成(云谦、sorrycc) 杭州 wife, 2 kids 淘宝 5 年年 atool- babelbu ild aw es om eplu gi nspm javascript import dora ⽀支付宝 ~6 年年 roadhog dva umi https://sorrycc.com
3. ⼤大纲 1. 蚂蚁前端框架简史 2. 介绍 umi 3. umi 如何⽀支持蚂蚁业务 4. 关于前端框架建设的建议 (WHY,10min) (WHAT,15min) (HOW,10min) (BONUS,5min)
4. 蚂蚁前端框架简史 每⼀一代的框架都是为解决“公司当下的业务问题和痛点”⽽而⽣生的
5. 业务的两⼤大痛点: ① 研发效能:研发时缺这缺那,各种不不顺⼿手 ② ⽤用户体验:上线后产品⽤用户体验不不佳 前端框架是为了了解决公司的业务痛点
6. R 2015 2015 2016.2 2018
7. R 拥抱社区很重要,社区才是“⼤大腿”。 oof
8. 1. 类 baobab,选错阵营 2. 没有跟上社区发展 R oof
9. redux ⼤大框架不不变,变的是每个环节⾥里里的⼩小⽅方案。
10. redux 百花⻬齐放对团队来说是个“灾难”,要收放有度。
11. 1. 过于开放,⼀一个项⽬目⼀一个技术栈 2. 繁琐,⼿手写 redux 不不是每个⼈人都能忍的 redux
12. dva 5 个 API,7 个概念。
13. dva
14. 1. 定位模糊,数据流还是框架? 2. 技术收敛只做了了⼀一半,除了了数据流,其他都很粗糙 3. 只有社区版,没有针对内部需求做定制化 dva
15. umi
16. 介绍 umi 每个框架都应该思考⾃自⼰己的“核⼼心竞争⼒力力是什什么”
17. umi 的核⼼心竞争⼒力力是什什么? 相⽐比社区的 next.js、after.js、gastby 等有啥优势? 插件机制 基于路路由 HTML 是⼀一等公⺠民 插件即社区,你总不不可能⼀一 路路由即⼊入⼝口,有⼊入⼝口就有很 HTML 是串串联流程的粘合剂, 个⼈人把所有功能都写了了吧。 多可能。 可在插件⾥里里定制极其重要。
18. 插件机制 next.js gastby redux vue-cli postcss webpack eslint babel 插件即社区,你总不不可能⼀一个⼈人把所有功能都写了了吧。
19. 插件⽤用于满⾜足不不同⼈人、场景的不不同需求。
20. 插件⽤用于封装复杂逻辑,简化使⽤用。 插件机制
21. 插件机制 实现 PWA 需要⼏几步?
22. 插件机制
23. devServer config env middleware plugins compile runtime umi ui 插件机制 command dev 路路由 build JavaScript test CSS generate HTML block webpack … entry router file entry
24. 插件不不仅作⽤用于“编译时”,还作⽤用于“运⾏行行时”。 插件机制
25. 路路由 = ⻚页⾯面 把握⼊入⼝口,真的可以做很多 事。 基于路路由
26. … ⾃自动埋点 按需加载 标题切换 菜单⽣生成 按需挂载数据流 ⾯面包屑 按需编译 代码分割 基于路路由 切换动效
27. HTML 的⻆角⾊色 连接前端和后端,让 umi 可以⽆无缝 接⼊入各种后端。 1. 不不使⽤用 html-webpack-plugin 2. 可在插件⾥里里定制 3. 修改 publicPath、base、 cssPublicPath、hash、manifest 等 HTML 是⼀一等公⺠民
28. Java Node 静态站点 离线包 其他⾃自定义 HTML UMI 打通 HTML 环节后,就可以⼀一“件”接⼊入各种应⽤用场景。 HTML 是⼀一等公⺠民
29. 除此之外,umi 还有什什么? 约定式路路由、umi-pugin-react、区块市场、umi ui、等等
30. 约定式路路由 ⽂文件系统即路路由,减少冗余配置。
31. 区块市场 让你可以从 0 搭建⼀一个 ant-design-pro 。
32. umi-plugin-react 插件集 ⼀一个个插件配太繁琐,给你⼀一个插件集统计配。
33. 更更多 umi 特性 umi test 完善的路路由⽀支持 umi g umi library 约定⼤大于配置 内置性能优化 duck directory umi ui 静态站点导出 抱社区⼤大腿 umi config ⼀一键兼容 ie9
34. 场景 Java 输出 dev Node build 静态站点 test 离线包 block RN ui generate rm config UMI 实现 插件市场 umi-core 依赖 ⼩小程序 Vue react reactrouter 其他内部库和插件 babel postcss 外 50 个 内 47 个 webpack 区块市场 jest rollup
35. umi 如何⽀支持蚂蚁业务 对内,做好 build + dev + test 还远远不不够
36. 协同 服务 应⽤用治理理
37. Bigfish
38. Bigfish = umi + umi-plugin-bigfish
39. sofa (java) 离线包 (⽆无线离线包) site (静态站点) chair (node) bigfishweb assets (静态资源) h5 (⽆无线 web) Bigfish 插件 市场 UMI antd umi-core dva react reactrouter 其他内部库 和插件 外 50 个 内 47 个 组件市场 区块 市场 精品 区块 监控 培训 AntV 数据洞洞察 智能建站 babel postcss webpack jest rollup
40. 内部框架不不仅是前端的 build、dev、test, 更更重要的是和流程、内部服务的打通
41. deployMode appType bigfishweb assets sofa chair offline online console h5 site 通过 appType 和 deployMode 两个维度对接丰富的应⽤用和部署类型。 custom
42. 通过 appType 和 deployMode 两个维度对接丰富的应⽤用和部署类型。
43. ⼀一键埋点
44. 精品区块市场
45. 关于前端框架建设的建议 你需要做由数以百计的决策
47. 前端决策树 https://github.com/sorrycc/ f2e-decision-tree
48. 基于 umi 实现⾃自⼰己的框架
49. 让我们来回顾⼀一下 1. 从时间的⻆角度看为什什么会有 umi 框架 2. umi 是什什么,他有哪⼏几个核⼼心竞争⼒力力 3. umi 如何服务社区 4. umi 如何服务内部⽤用户 5. 如何基于 umi 搭建框架,解决⾃自⼰己公司的业务问题
50. THANKS