AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

不只是组件库React和Ant Design蚂蚁金服的实践 by 偏右

发布者 FEer   简介 前端技术
发布于 1463620754250  浏览 5142 关键词 前端 
分享到

第1页

不只是组件库

React 和 Ant Design 在蚂蚁金服的实践

偏右 | afc163

蚂蚁金服前端工程师



第2页

不只是组件库

React 和 Ant Design 在蚂蚁金服的实践

偏右 | afc163

蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组



第3页

偏右 | afc163

蚂蚁金服前端工程师 2011 年加入支付宝 体验技术部终端技术组 长期负责前端基础类库 & 工具研发



第4页

研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道



第5页

传统研发模式



+ ++ +



后端



前端



设计师



产品经理



测试



沟通成本高 不适合中台研发节奏

资源瓶颈



第6页

业务团队



++



后端



产品经理



测试



沟通成本高

不适合中台研发节奏

资源+ 瓶颈



前端



设计师



第7页

+沟本通高成+ 发不中+节台适研奏合

资源颈瓶

+沟本通高成+ 中不发+台适节合研奏

资颈源瓶



+沟本通高成+ 不中发+适节台研合奏

资颈源瓶

+沟本通高成+ 不发中+节适台研奏合

资颈源瓶



+沟本通高成+ 不发中+节台适合研奏

资颈源瓶

+沟本通高成+ 不中发+节适台合研奏

资源颈瓶



第8页

成本高通 高本成通 高通成本

+不适合中台研发节奏高本成通沟++ +高奏节发研台中合适不本成通沟++ +发研台中合适不节奏通本高成沟++ + + + + + + +资源瓶奏节发研台中合适不颈++ +奏节发研台中合适不源资瓶颈++ +瓶颈资不适合中台研发节奏源++ + + + + + + +颈瓶源资+ +资源瓶颈+ +资源瓶颈+ + + + + + +

++ ++ ++ ++ ++ ++



第11页

移动浪潮来袭 PC 前端开发何去何从?



第12页

工程平台 运营平台



服务治理



数据平台



运维系统



反馈平台



客户中台

企业管理



CRM

客服中心

工程平台



第13页

企业中台战略 冰山主要在水面下



第14页

如何在资源紧缺的情况下支持大量中后台产品 兼顾研发效率和用户体验?

“ ”中央都决定了,你们来做页面



第15页

“ ”中央都决定了,你们来做页面

+



全栈开发



产品经理



第16页

“ ”中央都决定了,你们来做页面 +



全栈开发



产品经理



第17页

全栈研发模式



+



全栈开发



产品经理



前端 & 设计基础设施



第18页

资源型团队



服务型团队



第19页

+

基础前端工程师 + 业务前端工程师



+

设计师 + 技术产品前端工程师



第20页

研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道



第21页

Ant Design

一个中台设计语言



第22页

蚂蚁金融云 设计规范



广泛的中台产品 设计语言



组件 设计 模式 工具 培训 原则 沉淀



第23页

蚂蚁金融云 设计规范



广泛的中台产品 设计语言



组件 设计 模式 工具 培训 原则 沉淀



第24页

50+ 基础组件



实用主义



小而美



统一 交互



动画



第27页

+

设计和技术结合 用同样的语言对话



第28页

下拉选择 Select

下拉菜单 Dropdown



第29页

主色



color-1

阴影 @shadow-1



@brand-



第30页

逻辑化的设计规则



公式化 色彩



亲密性 距离



第31页

Normal



Hover



Active



第32页

shade(@primary-color, 80%)



tint(@primary-color, 80%)



第36页

服务模式





专业前端+设计重度参与

精品模式

关注用户体验 关注产品表现力





工程师/PD 为主+设计辅导

规范模式

遵循通用设计规范 关注研发效率 兼顾用户体验



第38页

研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道



第39页

Arale



旧的技术栈



Alice



Sea.js



spm



技术老化 维护动力不足

缺少社区



第40页

Arale



Alice



Sea.js



spm



技术老化 维护动力不足

缺少社区



第41页

拥抱 React 和开源社区 前端技术潮流 持久的生命力 社区红利



第42页

拥抱 React 和开源社区 前端技术潮流 持久的生命力 社区红利

打造适合全栈开发的前端基础设施



第43页

前端技术潮流 持久的生命力

社区红利

打造适合全栈开发的前端基础设施



第44页

ES2015



第46页

UI 组件

react-component



antd



第47页

UI 组件

react-component



antd



第48页

定位 样式 配置 文档 扩展性



react-component 提供底层功能 基础参考样式 强大、复杂 高阶,复杂 高



antd 完善的套件 统一的设计规范

精简 精美,面向初级用户





第49页

UI 组件



第50页

工作流 ant-tool



第51页

ant-tool

下一代蚂蚁前端开发工具



第52页

HMR



脚手架



代理



数据 MOCK



构建



代码 规范



离线包 开发



数据流 管理



UI 测试



第53页

脚手架



HMR



代理



数据 MOCK



构建



代码 规范



离线包 开发



数据流 管理



UI 测试



第55页

可插拔的 npm package



第56页

使用入口



第57页

应用框架

企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方



第58页

应用框架

企业级产品开发需要企业级的前端应用架构 所有的代码都有该去的地方



第59页

API Server



URL



routing



Data react

View



dispatch Action



第60页

react redux



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



第63页

前端技术学院



培训



教程



评分



辅导员



第64页

业务线



全栈开发



全栈开发



全栈开发



全栈开发



全栈开发



辅导员



第65页

前端技术学院 培训 + 教程 + 评分 + 辅导员



第66页

研发模式 变迁 中台设计语言 React 技术栈 antd 开源经营之道



第67页

$ npm install antd Ant Design 的 React 实现

+



第68页

4700+

提交数

贡献者数量



1400+

Issue 和 Pull request 数量

1w+

npm 每月下载量



70/193

覆盖蚂蚁中后台系统

2w+

官网每日访问量



第69页

企业内部如何做开源?



第70页

开源 ≠ 开放源码 出口转内销 一视同仁

关注社区 避免自嗨



第71页

设计规范文档



ant.design



前端使用文档



第72页

文档 > 代码



第74页

演示比 API 更常用 提供 Changelog 和升级文档

提供开发者说明

提供多版本文档



第75页

“ ”多下水版道本是文档一座是城开源市的良心。 — 偏雨果右



第76页

“ ”下多水版本道文是一档是座城开市源的良心。



第77页

开发资源



核心小组



+ 内部众包



第79页

Issues



问题反馈



需求讨论



意见征集



任务管理



不接受未提 Issue 的需求



第80页

问题反馈



需求讨论



意见征集



任务管理



不接受未提 Issue 的需求



第81页

其他实 现



社区贡献



兼容性



多语言 支持



服务端 渲染



可用性



特性建 议



代码风 格



脚手架



第83页

中台业务产品 技术产品 & 规范

Ant Design, antd, Roof, G2 etc.

体验技术部



技术服务



第84页

antm

移动端



TypeSc ript



未来



业务模 式库





服端务 交互



国际化



第85页

Question is welcome



第90页

Semantic Version



第91页

开发版本:beta 稳定版本:stable



第92页

开发版本:beta 稳定版本:stable



第93页

开发版本:beta 稳定版本:stable



develop-1.0.0 master



第95页

Commit 关联 issue



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。