- 本月热门
-
互联网+时代的人才培养 -
秒开-安全，快速，可靠 by 许霞@百度 -
Docker架构私有云的机遇和挑战 by 王振威 -
初创公司构建数据分析平台 by 桑文锋@SensorsData -
刀尖上的舞蹈—DDoS攻防对抗 by 朱家睿@阿里巴巴 -
创业公司快速发展转型期研发体系构建 by Logan Wang@Mobvista -
Java JDK 9-变化与未来 by 范学雷 -
Docker应用：超大规模容器调度系统的设计与实现 The Power of Native by Allen Sun@DaoCloud -
内建安全的软件开发 by 刘庆华@ThoughtWorks -
支持百度万人开发的工具装备及百度工程效率提升实践 by 夏仲璞
第1页
不只是组件库
React 和 Ant Design 在蚂蚁金服的实践
偏右 | afc163
蚂蚁金服前端工程师
React 和 Ant Design 在蚂蚁金服的实践
偏右 | afc163
蚂蚁金服前端工程师
第2页
不只是组件库
React 和 Ant Design 在蚂蚁金服的实践
偏右 | afc163
蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组
React 和 Ant Design 在蚂蚁金服的实践
偏右 | afc163
蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组
第3页
偏右 | afc163
蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组 长期负责前端基础类库 & 工具研发
蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组 长期负责前端基础类库 & 工具研发
第4页
研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道
第5页
传统研发模式
+ ++ +
后端
前端
设计师
产品经理
测试
沟通成本高 不适合中台研发节奏
资源瓶颈
+ ++ +
后端
前端
设计师
产品经理
测试
沟通成本高 不适合中台研发节奏
资源瓶颈
第6页
业务团队
++
后端
产品经理
测试
沟通成本高
不适合中台研发节奏
资源+ 瓶颈
前端
设计师
++
后端
产品经理
测试
沟通成本高
不适合中台研发节奏
资源+ 瓶颈
前端
设计师
第7页
+沟本通高成+ 发不中+节台适研奏合
资源颈瓶
+沟本通高成+ 中不发+台适节合研奏
资颈源瓶
+沟本通高成+ 不中发+适节台研合奏
资颈源瓶
+沟本通高成+ 不发中+节适台研奏合
资颈源瓶
+沟本通高成+ 不发中+节台适合研奏
资颈源瓶
+沟本通高成+ 不中发+节适台合研奏
资源颈瓶
资源颈瓶
+沟本通高成+ 中不发+台适节合研奏
资颈源瓶
+沟本通高成+ 不中发+适节台研合奏
资颈源瓶
+沟本通高成+ 不发中+节适台研奏合
资颈源瓶
+沟本通高成+ 不发中+节台适合研奏
资颈源瓶
+沟本通高成+ 不中发+节适台合研奏
资源颈瓶
第8页
成本高通 高本成通 高通成本
+不适合中台研发节奏高本成通沟++ +高奏节发研台中合适不本成通沟++ +发研台中合适不节奏通本高成沟++ + + + + + + +资源瓶奏节发研台中合适不颈++ +奏节发研台中合适不源资瓶颈++ +瓶颈资不适合中台研发节奏源++ + + + + + + +颈瓶源资+ +资源瓶颈+ +资源瓶颈+ + + + + + +
++ ++ ++ ++ ++ ++
+不适合中台研发节奏高本成通沟++ +高奏节发研台中合适不本成通沟++ +发研台中合适不节奏通本高成沟++ + + + + + + +资源瓶奏节发研台中合适不颈++ +奏节发研台中合适不源资瓶颈++ +瓶颈资不适合中台研发节奏源++ + + + + + + +颈瓶源资+ +资源瓶颈+ +资源瓶颈+ + + + + + +
++ ++ ++ ++ ++ ++
第11页
移动浪潮来袭 PC 前端开发何去何从？
第12页
工程平台 运营平台
服务治理
数据平台
运维系统
反馈平台
客户中台
企业管理
CRM
客服中心
工程平台
服务治理
数据平台
运维系统
反馈平台
客户中台
企业管理
CRM
客服中心
工程平台
第13页
企业中台战略 冰山主要在水面下
第14页
如何在资源紧缺的情况下支持大量中后台产品 兼顾研发效率和用户体验？
“ ”中央都决定了，你们来做页面
“ ”中央都决定了，你们来做页面
第15页
“ ”中央都决定了，你们来做页面
+
全栈开发
产品经理
+
全栈开发
产品经理
第16页
“ ”中央都决定了，你们来做页面 +
全栈开发
产品经理
全栈开发
产品经理
第17页
全栈研发模式
+
全栈开发
产品经理
前端 & 设计基础设施
+
全栈开发
产品经理
前端 & 设计基础设施
第18页
资源型团队
服务型团队
服务型团队
第19页
+
基础前端工程师 + 业务前端工程师
+
设计师 + 技术产品前端工程师
基础前端工程师 + 业务前端工程师
+
设计师 + 技术产品前端工程师
第20页
研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道
第21页
Ant Design
一个中台设计语言
一个中台设计语言
第22页
蚂蚁金融云 设计规范
广泛的中台产品 设计语言
组件 设计 模式 工具 培训 原则 沉淀
广泛的中台产品 设计语言
组件 设计 模式 工具 培训 原则 沉淀
第23页
蚂蚁金融云 设计规范
广泛的中台产品 设计语言
组件 设计 模式 工具 培训 原则 沉淀
广泛的中台产品 设计语言
组件 设计 模式 工具 培训 原则 沉淀
第24页
50+ 基础组件
实用主义
小而美
统一 交互
动画
实用主义
小而美
统一 交互
动画
第27页
+
设计和技术结合 用同样的语言对话
设计和技术结合 用同样的语言对话
第28页
下拉选择 Select
下拉菜单 Dropdown
下拉菜单 Dropdown
第29页
主色
color-1
阴影 @shadow-1
@brand-
color-1
阴影 @shadow-1
@brand-
第30页
逻辑化的设计规则
公式化 色彩
亲密性 距离
公式化 色彩
亲密性 距离
第31页
Normal
Hover
Active
Hover
Active
第32页
shade(@primary-color, 80%)
tint(@primary-color, 80%)
tint(@primary-color, 80%)
第36页
服务模式
专
专业前端+设计重度参与
精品模式
关注用户体验 关注产品表现力
兼
工程师／PD 为主＋设计辅导
规范模式
遵循通用设计规范 关注研发效率 兼顾用户体验
专
专业前端+设计重度参与
精品模式
关注用户体验 关注产品表现力
兼
工程师／PD 为主＋设计辅导
规范模式
遵循通用设计规范 关注研发效率 兼顾用户体验
第38页
研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道
第39页
Arale
旧的技术栈
Alice
Sea.js
spm
技术老化 维护动力不足
缺少社区
旧的技术栈
Alice
Sea.js
spm
技术老化 维护动力不足
缺少社区
第40页
Arale
Alice
Sea.js
spm
技术老化 维护动力不足
缺少社区
Alice
Sea.js
spm
技术老化 维护动力不足
缺少社区
第41页
拥抱 React 和开源社区 前端技术潮流 持久的生命力 社区红利
第42页
拥抱 React 和开源社区 前端技术潮流 持久的生命力 社区红利
打造适合全栈开发的前端基础设施
打造适合全栈开发的前端基础设施
第43页
前端技术潮流 持久的生命力
社区红利
打造适合全栈开发的前端基础设施
社区红利
打造适合全栈开发的前端基础设施
第44页
ES2015
第46页
UI 组件
react-component
antd
react-component
antd
第47页
UI 组件
react-component
antd
react-component
antd
第48页
定位 样式 配置 文档 扩展性
react-component 提供底层功能 基础参考样式 强大、复杂 高阶，复杂 高
antd 完善的套件 统一的设计规范
精简 精美，面向初级用户
低
react-component 提供底层功能 基础参考样式 强大、复杂 高阶，复杂 高
antd 完善的套件 统一的设计规范
精简 精美，面向初级用户
低
第49页
UI 组件
第50页
工作流 ant-tool
第51页
ant-tool
下一代蚂蚁前端开发工具
下一代蚂蚁前端开发工具
第52页
HMR
脚手架
代理
数据 MOCK
构建
代码 规范
离线包 开发
数据流 管理
UI 测试
脚手架
代理
数据 MOCK
构建
代码 规范
离线包 开发
数据流 管理
UI 测试
第53页
脚手架
HMR
代理
数据 MOCK
构建
代码 规范
离线包 开发
数据流 管理
UI 测试
HMR
代理
数据 MOCK
构建
代码 规范
离线包 开发
数据流 管理
UI 测试
第55页
可插拔的 npm package
第56页
使用入口
第57页
应用框架
企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方
企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方
第58页
应用框架
企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方
企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方
第59页
API Server
URL
routing
Data react
View
dispatch Action
URL
routing
Data react
View
dispatch Action
第60页
react redux
react-routerredux
react-redux
css-modules redux-saga
isomorphicfetch
reselect
react-routerredux
react-redux
css-modules redux-saga
isomorphicfetch
reselect
第61页
URL
routing
react-router reacrt-edrouuxter-
API Server
isomfeotrcphhicasynacit+aw
Data
resdaguax-
dispatch
react reselect
Action
View mocsdsu-les
routing
react-router reacrt-edrouuxter-
API Server
isomfeotrcphhicasynacit+aw
Data
resdaguax-
dispatch
react reselect
Action
View mocsdsu-les
第63页
前端技术学院
培训
教程
评分
辅导员
培训
教程
评分
辅导员
第64页
业务线
全栈开发
全栈开发
全栈开发
全栈开发
全栈开发
辅导员
全栈开发
全栈开发
全栈开发
全栈开发
全栈开发
辅导员
第65页
前端技术学院 培训 + 教程 + 评分 + 辅导员
第66页
研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道
第67页
$ npm install antd Ant Design 的 React 实现
+
+
第68页
4700+
提交数
贡献者数量
1400+
Issue 和 Pull request 数量
1w+
npm 每月下载量
70/193
覆盖蚂蚁中后台系统
2w+
官网每日访问量
提交数
贡献者数量
1400+
Issue 和 Pull request 数量
1w+
npm 每月下载量
70/193
覆盖蚂蚁中后台系统
2w+
官网每日访问量
第69页
企业内部如何做开源？
第70页
开源 ≠ 开放源码 出口转内销 一视同仁
关注社区 避免自嗨
关注社区 避免自嗨
第71页
设计规范文档
ant.design
前端使用文档
ant.design
前端使用文档
第72页
文档 > 代码
第74页
演示比 API 更常用 提供 Changelog 和升级文档
提供开发者说明
提供多版本文档
提供开发者说明
提供多版本文档
第75页
“ ”多下水版道本是文档一座是城开源市的良心。 — 偏雨果右
第76页
“ ”下多水版本道文是一档是座城开市源的良心。
第77页
开发资源
核心小组
+ 内部众包
核心小组
+ 内部众包
第79页
Issues
问题反馈
需求讨论
意见征集
任务管理
不接受未提 Issue 的需求
问题反馈
需求讨论
意见征集
任务管理
不接受未提 Issue 的需求
第80页
问题反馈
需求讨论
意见征集
任务管理
不接受未提 Issue 的需求
需求讨论
意见征集
任务管理
不接受未提 Issue 的需求
第81页
其他实 现
社区贡献
兼容性
多语言 支持
服务端 渲染
可用性
特性建 议
代码风 格
脚手架
社区贡献
兼容性
多语言 支持
服务端 渲染
可用性
特性建 议
代码风 格
脚手架
第83页
中台业务产品 技术产品 & 规范
Ant Design, antd, Roof, G2 etc.
体验技术部
技术服务
Ant Design, antd, Roof, G2 etc.
体验技术部
技术服务
第84页
antm
移动端
TypeSc ript
未来
业务模 式库
…
服端务 交互
国际化
移动端
TypeSc ript
未来
业务模 式库
…
服端务 交互
国际化
第85页
Question is welcome
第90页
Semantic Version
第91页
开发版本：beta 稳定版本：stable
第92页
开发版本：beta 稳定版本：stable
第93页
开发版本：beta 稳定版本：stable
develop-1.0.0 master
develop-1.0.0 master
第95页
Commit 关联 issue