陆金所 lu.com lufax 前端 frontend arc

1. 互联⽹网⾦金金融前端进化论
LU Galaxy Team Ufo Qiao

2. ● 业务挑战
● 前端发展历史
● 组件化模块化、⼯工程化
● 微服务化
● 未来思考
● 那些值得说的前端事

3. 业务挑战

4. ⽤用户量量(万)
2014Q2 2014Q3 2014Q4 2015Q1 2015Q2 2015Q3 NOW
2651
1429
1000
800
500
300200
⽤用户量量
⽤用户量量

5. 交易易量量
万 万亿

6. 开发⼈人员量量
⼗十⼈人 百⼈人

7. 需求数量量（平均值）
5个/⽉月 100个/⽉月

8. 发版频次（Native版本、Reg、OnlineQuick）
1个/季 15个/⽉月

9. 移动占⽐比（平均值）
0x% 85%

10. ➢需求增加约20倍
➢交易易量量增加约上万倍
➢流量量增加约⼏几⼗十倍
➢发版频次增加约40多倍
开发⼈人员的增⻓长远远跟不不上

12. 只能架构进化

13. 以史为鉴回顾前端与移动进化史

18. 陆⾦金金所前端架构历史回顾

19. ⽼老老框架⼀一（Hybrid）
Mobile-hybrid-resource
最早的业务框架，主要承载了了财富汇，彩虹，稳赢安e等⾦金金融产品及部分设置⻚页⾯面
优点：AMD，zepto，传统⽹网⻚页、简单需求的开发速度快、⼊入⻔门简单
问题：⽂文件布局混乱、可读性差，⽆无复⽤用性、安全性差

20. ⽼老老框架⼆二（MSite）
M-web
养⽼老老险、好⻋车主、⾦金金管家、⼀一帐通等业务
优点：NVWA、RequireJS、Backbone、MVC、模板
问题：打包完3M Size、⽆无组件、紧耦合、复⽤用性差、类似需求重复开发
⽆无法增量量打包

21. 中框架
Html5-framework
优点：AMD、underscore ，⻚页⾯面部分可复⽤用，⽬目录结构清晰
解决了了⽂文件布局混乱、可读性差，⽆无复⽤用性、安全性差等问题
问题：打包扩展性差，业务代码上千⾏行行、维护性差、复⽤用性弱

22. 次新框架
Html5-hybrid
⽤用于CGI、LC、智能宝、信托等产品线
优点：引⼊入React、ES2016、PostCSS，模块化，解决需要维护⼏几千⾏行行代码的问题
，使⽤用SPA⻚页⾯面体验提⾼高，组件化
问题：但是不不⽀支持online，不不⽀支持BU隔离、模块⽆无法⾃自由对接、没有服务化、
单点打包，打包耗时，⽆无法增量量打包

23. 我们是P2P公司?

24. “⽆无法满⾜足BU化……”
“⽆无法满⾜足快速迭代发版”

25. 需要同时维护四套框架
开发很苦逼
⽼老老板不不满意
业务很紧张
学习成本⾼高

26. • 分层分域 - 纵向分层、横向分域
• 基础架构 - 两地三中⼼、异地灾备/多活、同城双活、⺴络区域、专线
• 系统 -系统层次、依赖原则
• 运维平台 -域名规划、泳道部署、运维监控
• 数据库 -按域划分、⾃动化运维、秒级监控、数据总线
• 平台中间件 -配置中⼼、消息、JOB、缓存、SOA、DAL、CAT、NAS/TFS、系统监控等
• 平台线-安全、⽤户、产品、交易、⽀付、账户、资产、我的账户、合同、营销、推荐、⼲告等
• 产品线 -P2P、保险、B2C、基⾦、宝宝类、主账户、⾼端、股票、⼆级市场
• 持续交付 -需求管理、CodeReview、UT框架、⾃动化测试框架、⾃动部署/发布⼯具、蓝绿发布/⾦丝雀验
• 流程/规范 -规范：⽂档管理、代码管理、域名管理、域/应⽤管理、代码规范等 流程：需求评审、架构评审、代码移交、上线发布、应⽤申请、变更管理等
⼤大背景

27. 进化第五套？

28. 开⾜足⻢马⼒力力⾼高速公路路换轮胎
业务⾼高速增⻓长过程中,如何继续保持前端的安全和稳定?

29. 新框架要求？
快速发
版
⾼高性
能 BU化
组件
安全
扩展解耦 热修复
监控
统⼀一

30. Learn Once, Write Anywhere
Write Once, Run Anywhere

32. 前端与第三⽅方系统的关系
狭义前端与后端的关系
⼴广义前端与后端的关系
HTML5与Native的关系
前端与⽤用户的关系
先搞清关系

35. 然后在琳琅满⽬目的框架和架构中做抉择

37. 选什什么架构？
为业务服务，制定的合理理且可以落地的技术规范准则
Architecture

39. React是lib，以 JavaScript 为中⼼心 = 简约
Ember: {{# each}}
Angular 1: ng-repeat
Angular 2: ngFor
Knockout: data-bind="foreach"
React: 直接⽤用 JS 就好啦 :)
Angular是框架，以 HTML 为中⼼心 = 全⾯面

40. •Angular 2: 566k (766k with RxJS)
•Ember: 435k
•Angular 1: 143k
•React + Redux: 139k

41. Ken Thompson and Dennis Ritchie
KISS（keep it simple, stupid）
Unix Philosophy

42. “微时代：我们要的就是轻快稳”

43. 粒度思考(颗粒化)

44. LUUI：陆⾦金金所UI组件库
UI级粒度的复⽤用

45. lUUI
正在开源的路路上

46. LUBC：陆⾦金金所BC组件库
业务级别微粒度的复⽤用

47. ProjectBanner
ProjectRow
KYC
PanelDoc
Logo

48. Module：陆⾦金金所模块库
模块级别微粒度的复⽤用

49. 单品模块对接投资模块案例例

50. 投资流程模块
Cash类单品模块
B2C类单品模块
.
.
.
more
投资流程

51. 持有中模块对接赎回模块案例例

52. 赎回流程模块
零活宝持有中模块
.
.
.
more
智能宝持有中模块
赎回流程

53. 业务组件
UI组件 UI组件
UI组件 ……
UI组件
UI组件
Page
业务组件
UI组件 UI组件
UI组件
业务组件
UI组件
UI组件
UI组件
UI组件
Model
Backend Services
APP Task Services
通知数据更更改Render
发起数据请求Ajax
数据更更改

54. • 组件、业务模块、CoreJs全部集中于单体系统
坑
• 与Native Task强耦合
• 和后端系统API强耦合，⼤大量量Adapter js
• 局部问题，影响全局

55. 能否获得MPA和SPA的双重好处？
SPA微型化，功能模块化?
多个SPA互相组合为服务单元?
服务单元能否相互组合为业务流程?
业务流程能否通过约定组合为业务线?
怎么与Native和后端服务解耦?
思考题:
Offline+Online双活？

56. • UI组件独⽴立拆分到LUUI
可以这样解决吗?
• BC组件独⽴立拆分到LUBc
• 核⼼心框架独⽴立拆分到LUBase
• 按照BU拆分业务项⽬目，BU可以独⽴立完成功能开发
• 净化业务Task，Task趋于通⽤用化、Native轻依赖
• 后端系统之间解耦依靠接⼝口规范，前端友好

57. vs
MPA vs SPA⻥鱼与熊掌不不可得兼?

58. Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA
Micro SPA

59. 1. Html、js、css打⼊入APP⽂文件，需要Native发版
2. 避免了了⽹网络传输静态资源⽂文件，快速加载
1. H5代码部署在服务器器，发版便便利利，迭代快速
2. ⽤用户体验逊⾊色⼀一些
Native
H5
Offline
Native
H5
Online
Offline vs Online⻥鱼与熊掌不不可得兼?

60. Native Local H5 Online H5

61. FAAS
Frontend as a Service
微服务时代，陆⾦金金所微服务的⼤大背景下，前端怎么⾛走？

62. 没架构
Monolithic
分布式
SOA
前后端分离
微服务

63. ✓ 分布式服务系统
Martin Fowler
✓ 按照业务⽽而不不是技术来划分
✓ 做有⽣生命的产品⽽而不不是项⽬目
✓ 智能的服务个体和弱通信低耦合
✓ DevOps
✓ 容错
✓ 快速进化
每个⼈人对微服务都可以有⾃自⼰己的理理解

65. MONOLITHIC：不不拆分系统,系统紧耦合

66. 分布式：系统横向分层

67. MicroService：纵向分业务,再横向切,系统间纵向依赖.

68. • 根据BU业务线竖向划分
前端微服务
• 每个独⽴立服务可独⽴立部署且相互隔离
• 服务之间通过轻量量级API进⾏行行通信
• 服务需保证可靠性和可⽤用性

69. 服务颗粒化
（UI级粒度、BC业务组件粒度、Page⻚页⾯面级粒度、module模块级粒度、流程级粒度）
责权单⼀一化
（做好⾃自⼰己）
运⾏行行隔离化
（其他服务挂了了，不不影响⾃自⼰己）
管理理⾃自动化
（Devops，⾃自动化打包，部署）

70. HTML5-HYBRID
BC UC BUILD TOOLS CORE-JS
接⼝口层
Bundle
MAPP-WEB
Native(IOS,Android)
HYBRID
前端源码

71. LU-M-FE
LUBASE
LUUI LUBC
M-P2P-WEB
LU-M-P2P
P2P
M-B2C-WEB
LU-M-B2C
B2C
M-FUND-WEB
LU-M-FUND
FUND
M-INSURANCE-
WEB
LU-M-
INSURANCE
INSURANCE
M-CASH-WEB
LU-M-CASH
CASH
M-TRADING-
WEB
LU-M-TRADING
TRADING
M-LIST-WEB
LU-M-LIST
LIST

73. B2C业务线Service
其他业务线
公共Static资源

74. 陆⾦金金所前端Landscape

75. LU H5 Framework
UC(UI组件) NavBar FooterBtn Dialog Tab Toast Button List Panel ……
Hybrid
Bridge JS
CORE
A
pp
lic
ati
on
M
an
ag
er
LUUI Frontend Microservice
Code Once, Run Anywhere
陆⾦金金所Hybrid Architecture Diagram
Native
WebView
增
量量
更更
新
L
U-
M-
F
E
⼯工
程
化
管
控
BU
保险 基⾦金金 现⾦金金管理理 主帐户B2C P2P ⼆二级市场 ……⾼高端理理财
BC(业务组件) DataAreaHeader Footer ……Contract KYC ListArea BannerPanelBC
RouterCache UtilsHTTPClient Actions
PushView
FixedBtn
PullUp
PullDownGesture
Page Input Page Trading Pages ……Investment Page Reddem Page Result PageDetail Page
Reddem Module ServicesTrading Module
双
重
打
包
灾
备
双
活
BrowserSync
HotLoader
Mocha
Gulp
BrowserCat
JSLint
StyleLint
PostCSS
Webpack
Babel
ES2015

76. H5Native
基础架构
业务展示
产品列列表 分类筛选 我的帐户 功能设置
IOS Android
任
意
⻔门
⼀一
帐
通
旺
财
平
安
银
⾏行行
m-bu-web
赎回流程⼆二级⼦子⻚页产品详情 持有详情 变现流程投资流程
m-trading-web m-list-web
m-public-web
NASLUBASELUUI LUBC STATIC
基础服务层
Mobile-appi-bu-appi-trading-app My-app
⽹网络服务 缓存服务
native m-list-web
mapp-web
产品系统
list-app
Product-app
Product-svc
Lsearch-app
核⼼心基础系统
User-app
User-srv
Payment-app
交易易系统
Trading-app
Settle-app
Payment-app
Redis NAS/DFS DB MQ Schedule
资产系统
Assert-app
Plan-app
Payment-app
对外GW
Pars-gw
Paapi-gw
Coop-app
Iicp-gw
Pahealth-gw
业务application
接⼊入层

78. 那些值得提的前端事

79. Optimize
Packages
Manage Preprocessors
NPM
Bower
HTML
JavaScript
CSS Sass,Less,Stylus,PostCSS
HAML,Jade,Markdwon,Slim
ES2015,TypeScript,CoffeScript
Dedupe
Uglify
CommonsChunk
HotLoder
If(debug){
Hotloader…
}else if(online){
ToOnline...
}else if(App){
ToHybrid…
}

80. Before…

81. 单线程，⼀一共打包4个项⽬目
⼀一次打包需要15分钟，慢

82. 2.7.0
hybrid
Build Result
mobile-hybrid-resource UglifyJS
html5-framework
html5-hybrid/src
lumi

83. • 项⽬目分离： 分布式build
• 增量量：没有修改的代码⾃自动过滤
• 多线程：happypack
• 复制：node_modules
升级⽅方案

84. After…

85. Split+Cache+Multi Thread+Copy
只需80s! 速度增强10倍以上

86. mobile-hybrid-resource html5-framework html5-hybrid/src
build 2.7.0 hybridlumi copy
npm run packOld npm run packNew

87. Projects
• luui
• lubase
• lu-m-* (BU) 我们的BU Web⼏几⼗十套

88. Before…

89. 编译吗? No, 其实只是做了了翻译
重复打包
打包缓慢
没有版本控制
打包结果尺⼨寸太⼤大

90. luui/lubase src
luui/lubase lib
npm link
luui lubase
/usr/local/lib/node_modules
BU
lu-m-b2c lu-m-cash
lu-m-p2p lu-m-fund
…lu-m-stock
link & import
Build with
luui/lubase
source code

91. 升级⽅方案
• 隔离 luui&lubase
• 共享 external libs
• 分离 Business Components

92. After…

93. 第三⽅方libs独⽴立
加载速度⼤大幅度提升
更更⼩小更更轻

94. lubc
luui
lubase
lubc.js/lubc.css
luui.js/luui.css
lubase.js
CDN
deploy
BU Lu-m-cash
External Resource
Lu-m-p2p Lu-m-b2c Lu-m-insurance Lu-m-fund ……

95. 按需打包,按需加载
webpack
AMD,CommonJS,CMD,UMD

96. webpack code splitting
ensure,代码侵⼊入

98. Tree-shaking
期待webpack2的正式版

99. 服务相互组合后带来复杂的⻚页⾯面跳转问题

100. 同⼀一系统⻚页⾯面返回？

101. 同⼀一系统⻚页⾯面正常返回！

102. 不不同系统公共⻚页⾯面返回？

103. 同⼀一系统⻚页⾯面⾮非正常返回！

104. 同⼀一系统公共⻚页⾯面返回？

105. 同⼀一系统跨域⻚页⾯面返回！

106. 质量量提升

108. CAT JS Error⾸首⻚页

109. CAT详细错误

110. JS Error实现原理理
• 当js出错时，会⾃自动调⽤用window.onerror⽅方法
• 通过该⽅方法的⼏几个参数可以拿到js错误的堆栈调⽤用数据
• 将堆栈数据格式化后传给CAT接⼝口，从⽽而在CAT监控端展示出来

111. 增量量更更新
灾备双活

116. 未来

117. 未来哪些技术值得我们思考?

118. WebComponents
progressive web app
TypeScript
Electron
函数式编程
React Native
http2.0
前端安全

128. A-Frame 0.2.0 – The Extensible VR Web

129. WebVR
WebVR is an experimental JavaScript API that provides access
to Virtual Reality devices, such as the Oculus Rift, HTC Vive,
Samsung Gear VR, or Google Cardboard, in your browser.

134. What is a Progressive Web App?
A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the
web's low friction at every moment.

140. Next.js is a minimalistic framework for server-rendered React applications

141. Isomorphic JavaScript
JavaScript applications which run both client-side and server-side.
Isomorphic JavaScript frameworks are the next step in the evolution of
JavaScript frameworks. These new libraries and frameworks are
solving the problems associated with traditional JavaScript
frameworks.

142. 点 线⾯面
体?

143. Thanks all of you

144. Q&A

145. THANKS