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-掘金

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.123.1. UTC+08:00, 2024-03-28 16:57
浙ICP备14020137号-1 $访客地图$