2.4 蚂蚁财富的 bff 实践 - 汤尧(新) · ò h chair contributor v u-体 5技 ^部-...
TRANSCRIPT
![Page 1: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/1.jpg)
BFFD2 - 2016
![Page 2: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/2.jpg)
Chair contributor
-体 技 部- 富&保 前端 ⼈
@coolme200
Tags: Java, 前端, Node.js, ⼤数据,⾦融
![Page 3: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/3.jpg)
状 什么是BFF BFF
![Page 4: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/4.jpg)
状 什么是BFF BFF
![Page 5: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/5.jpg)
状
![Page 6: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/6.jpg)
iOS H5Android
状
![Page 7: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/7.jpg)
• API
• API
• UI
•
•
状
![Page 8: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/8.jpg)
![Page 9: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/9.jpg)
状 什么是BFF BFF
![Page 10: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/10.jpg)
Sam Newman API
BFFBackends for Frontends
什么是BFF
![Page 11: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/11.jpg)
•
• API
什么是BFF
![Page 12: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/12.jpg)
•
•
什么是BFF
![Page 13: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/13.jpg)
什么是BFF
![Page 14: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/14.jpg)
状 什么是BFF BFF
![Page 15: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/15.jpg)
Newman BFF
BFF
![Page 16: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/16.jpg)
H5 APP
API Gateway
BFF
Biz Service
Common Service
PC BrowserNative APP
BFF
![Page 17: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/17.jpg)
Node.js
![Page 18: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/18.jpg)
1.Node.js Java 2. App 3. 4.
BFF
![Page 19: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/19.jpg)
ConfigServerProvider
Java Consumer
Node.js Consumer
Java Node.js
Node.js Java
![Page 20: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/20.jpg)
• hessian
• Node.js Java
Node.js Java
Jar Consumer
![Page 21: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/21.jpg)
Node.js Java
![Page 22: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/22.jpg)
Node.js Java
$ tnpm run proxy
$ mvn install//
![Page 23: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/23.jpg)
Node.js Java
![Page 24: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/24.jpg)
Node.js Java
![Page 25: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/25.jpg)
Node.js Java
![Page 26: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/26.jpg)
IP
![Page 27: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/27.jpg)
App
![Page 28: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/28.jpg)
H5 APP
API Gateway
BFF
•
•
•
BFF API
![Page 29: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/29.jpg)
• 粒度
• 通⽤的功能, 可能会被多个 BFF ⽤到
• 提供含各种状 的 mock 真 数据,易于同步开
BFF API
![Page 30: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/30.jpg)
•
• mock server
•
•
BFF API
![Page 31: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/31.jpg)
mock API
??
系 并不如我 所 的 A 依 B 那么 , 有很多你不知道黑盒部分,随 会影响系 的 定性,致你的开 ⽆法正常 ⾏。
![Page 32: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/32.jpg)
状 什么是BFF BFF
![Page 33: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/33.jpg)
• 前端需要具 服 端技能
• 前端和 BFF 由同⼀⼈完成
• 快速的 ⽤ 布能⼒ (docker?)
![Page 34: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/34.jpg)
• 全 是 了更合理的分⼯• 做 BFF 可以拓展知 ⾯
• 提升沟通 能⼒
![Page 35: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/35.jpg)
⽀持 多 解决 快沟通 作 少
iOS Android H5
![Page 36: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/36.jpg)
坏
• 决定了架构的复 度
• 前期学 成本⾼,短期成 源瓶
![Page 37: 2.4 蚂蚁财富的 BFF 实践 - 汤尧(新) · ò h Chair contributor v u-体 5技 ^部- 0富&保 >前端 . 1⼈ @coolme200 Tags: Java, 前端, Node.js, ⼤数据,⾦融](https://reader031.vdocuments.site/reader031/viewer/2022012921/5e0c1a7b3ef19a69bd50fd80/html5/thumbnails/37.jpg)
THANK YOU