SFE前端中后台架构
如果无法正常显示，请先停止浏览器的去广告插件。
1. SFE前端中后台架构
中后台基于微应用的渐进式低代码演进之路
2. 吉星
这些年我在干啥?
l 09年入行前端
l 14年入职阿里负责B2B广告业务前端
l 17年进入口碑负责商家前端
l 19年“创业”负责商家SaaS业务前端
3. 01 初试SaaS单品
02 全面SaaS提供
03 行业SaaS演进
微应用初立：基础架构解决多版本多渠道的问题
微应用升级：结合场景化和中后台响应式为研发提效
微应用再出发：基于场景的低代码方案解决行业化问题
4. 01. 全渠道 CRM 产品的研发背景及挑战
渠道1
渠道2
渠道3
前端挑战
数据
消息
基础版
l 这么多渠道，如何稳定高效投放？
l 这么多版本，如何快速高质量交付？
会员
营销
高级版
增值版
基础
门店|机构|权限|员工
l 大KA有个性化诉求，如何优雅的支持？
5. 01. 以微前端为基础的微应用架构方案
产品码
权限码
组合
页面
模块
应用
包含
组合
版本
投放
l 权限码控制权限
渠道
组合投放
微应用
JS资源
开发
发布
CSS资源
应用配置
版本/路由/埋点/业务等
发布
灰度规则
百分比
白名单
计算
灰度引擎
渠道-主应用
CDN
开发
应用版本
l 产品码组合版本
l 多版本多渠道投放
l 微应用投放到主应用
AppB
v3.2.0 l 微应用独立配置规则发布
AppB
v2.4.1 l 主应用灰度规则引擎计算单个子应
…
用版本
访问
以微前端为基础的微应用作为基础架构方案，实现多版本组合，多渠道投放，独立发布
用户
6. 01. 微应用方案能力概览
7. 01. 微应用方案生命周期及扩展能力
8. 01. 微应用分发管控能力
开始
新建迭代
构建部署
线上发布
结束
平台说明
发布异常
回滚
基础依赖
场景
支持
微应用
域内
微组件
域外
集成现有能力为主，在构建分发上支持
jenkins等开放能力
管控支持
多环境部署
线下多环境/预发/灰度/线上
灰度发布
白名单/百分比/逻辑计算
流程审批
封网管控/发布审批/回滚审批
管控
支持
场景支持
团队管理
基础
依赖
重点解决管理诉求和研发中的流程保障诉
求，满足多环境要求和发布三板斧
应用管理
迭代管理
租户/团队/成员 主/子应用/组件/小程序|渠道等 多分支/多主干
账号权限 流程管控 构建分发
钉钉|BUC
ACL/钉钉审批流
Def/jenkins
基于微前端诉求的管控都能满足，同时能支
持外部公司根据需要拓展
9. 01. 微应用 1.0— 实现 PC 端业务模块的独立研发迭代聚合
导航菜单微应用
app-config.js 数据报表微应用
app-config.js
应用名称 应用名称
版本号 版本号
路由信息 路由信息
埋点配置 埋点配置
权限配置 权限配置
PC-Web微应用
头部导航
投放
app-list.json
基础配置微应用
app-config.js 营销活动
app-config.js
应用名称 应用名称
版本号 版本号
路由信息 路由信息
埋点配置 埋点配置
权限配置 权限配置
支持
左侧菜单
投放
我们给出了一个多样性城市的建设策略，未来各街区的建设互不干扰，灵活独立
应用主区域
10. 接下来，我们的要求是快
11. 02. 全新一代的餐饮 SaaS 系统
背景：产品全面 SaaS 化
挑战：前端支持的效率挑战
新业务开发
开发新的管理页面
新系统要投
放老业务
商品管理
（复杂CRUD)
（表单）
投放改造即可!
数据报表
（报表）
投放
营销管理
新老系统业务互相投放，可以基于微应用技术做
Mobile
报表和营销
场景耗时长
进销存
重复性场景，能否有更高效的开发方式，可视化
搭建的低代码方案能解决问题吗？
（简单CRUD）
PC
混合模式
新开发+老页面投放
老业务集成
集成老页面
业务需要双
端开发
是否有能一次开发，双端适配的研发方案，这样
产品、UED、前端都不需要多次投入了
12. 02. 表单类场景配置化开发
H5Data
配置开发
编码开发
插件库
入口
注册
前置校验
模板库
开发
投放
代码配置
场景化
排版|布局
Mobile
联动|校验
协议
Schema定义|解析渲染|生命周期
埋点
插件机制
逻辑扩展
接口联调
接口适配|请求发送
组件配置
小程序|PC|H5
当业务明确的情况下三端视图
都是用同一份配置进行描述
逻辑函数化
将日常逻辑适用函数的方式来
进行组织，做到可复用，可测
试
逻辑
性能|稳定性
视图配置化
投放
Mobile
组件库
视图
设计原则
模板
逻辑扩展|视图配置
表单引擎
布局|校验|联动|数据处理|埋点
提炼抽象过往耗费时间过长的环节、复杂逻辑，提供配置化方案实现少量代码的开发的效果
接口标准化
明确业务模型的输入输出，重
复开发的业务不在重新定义接
口标准
13. 02. 报表场景配置化开发
代码示例
设计说明
能力大图
业务支撑
订单|收款|经营分析|…
内容组件
Filter|chart|Table|Card
容器组件
Page|Tab
弹层组件
Mask|Popup
报表引擎-Core
Schema解析渲染|事件机制|钩子扩展
数据层-API
数据获取|数据修改|数据管理|网关适配
CRUD、表单类、报表类比作居住社区、商业区、公园景观等街区的话，
我们为这类街区做了预制方案，让街区的建设变的更快
14. 02. 中后台响应式实现一码多端实现
工程能力
研发能力
业务组件
渠道分发
用户选择|商品选择|门店选择|…
子应用|Web站点|H5站点|离线包
稳定性
性能体验
接口|jsError|主动上报 性能监控|代码Shaking
构建能力 预览调试
微应用|离线包
路由处理
权限管控
页面跳转|应用跳转|模态窗
权限组件|权限码
数据处理
全局数据|请求库
PC|模拟器|真机
技术支撑
设计对齐
场景对齐
CRUD/大数据编辑/复杂信息选择
布局容器
模态窗|分区|分栏
交互动作
弹窗|页面新开|…
基础组件
表单项|提示反馈|…
设计规范
主题|字体字号|间距|…
提供设计规范、统一的工程能力和研发能力做支撑
移动优先的设计方案，PC响应式投放
15. 02. 微应用 2.0— 实现可配置开发响应式多端投放
场景抽象成配置，结合双端响应式组合成微应用投放
业务场景双端微应用
线包
离
5
H
报表微应用
Mobile
开发配置
开发
表单微应用
CRUD微应用
双端
响应式
微前端
应
用
Web
CRUD、表单类、报表类比作居住社区、商业区、公园景观等街区的话，
我们为这类街区做了预制方案，让街区的建设变的更快
开发模式：代码开发 + 配置开发
渠道投放： PC-Web+H5 离线包
16. 接下来，我们希望有更多人和我们一起来建设城市
17. 低代码呢，在哪里？
18. 03. 低代码建设的思考
渐进式低代码建设
用户群体渐进式
从专业技能的要求来渐进式实现人群的推进：
专业前端->专业开发->掌握开发技能人群->产品运营人群->商家
场景覆盖渐进式
从解决问题的范围来渐进式推进：
低代码应该从业务中来，到业务中去
低代码应该全链路端到端的解决问题
低代码不等于可视化
局部模块->部分页面->业务场景->单个应用
技术建设渐进式
充分利用现有能力来渐进式推进：
ProCode配置化->公共服务提供->配置（搭建）平台提供
19. 03.SaaS 业务前端支撑能力图
20. 03. 微应用 3.0— 多角色进行定制化开发（规划中）
前后端一体双端应用
SaaS平台
报表微应用
ProCode
表单微应用
投放
CRUD微应用
供应链
…
CRUD微应用
Web
开发&ISV&商家
小程序装修
Mobile
LowCode
双端
响应式
经营参谋
行业PaaS
随着城市建设的要求越来越高，我们希望在街区建设的能力上有更多的人
参与进来，非前端的，合作伙伴的，升值商家自己
21. Thanks!
22. 联系我们
MorJS小程序多端框架
https://mor.eleme.io/
交流群，过期请访问掘金
SFE-掘金