网易严选大前端建设方法论

技术价值
框架、版本无关
• 子应用运行时隔离 • 面向未来的技术演进
业务价值
多种场景实践
• 业务模块复用 • 跨产品需求
场景一：业务模块复用
业务模块复用-传统方案
• 代码复用 • 业务组件 • iframe
业务模块复用-微前端方案
场景二：跨产品需求
跨产品需求-传统开发模式
传统开发模式的痛点
JSONObject intputVo = interfaceInput.getInput(); PublicFieldDTO publicFieldDTO = interfaceInput.getPublicFieldDTO(); FunctionContextDTO functionContextDTO = interfaceInput.getFunctionContextDTO(); List<UserReachDTO> userlist = new ArrayList<>();
• 完整性差 流程被拆分开发，不利于开发理解 • 沟通成本高 参与人员多，沟通成本高 • 开发效率低 代码复用难，开发效率低 • 维护成本高 后期维护成本高，多处修改
跨产品需求-微前端开发模式
带来的转变
• 开发思维转变 系统维度->业务域维度 • 代码复用层次扩展 控件、业务组件 -> 页面、模块 • 避免技术腐化 技术栈无关的特性，未来可以持续迭代 • 效率提升 微服务化之后，降低了开发风险
中台建设
流程平台
审批流程需求-微前端开发模式
多个后端
问题分析
设计思路
流程平台架构设计
动作执行流程
规范动作执行的输入输出定义
@PostMapping("/users/assign") public AjaxResponse<UserBaseContainer> getUser(@RequestBody InterfaceInputDTO interfaceInput) {
if(intputVo.getLong("skuId").equals(1001L)) { UserReachDTO user1 = new UserReachDTO(); user1.setUid("hero@163.com"); user1.setUserName(" 英 雄 "); userlist.add(user1);
前端应用架构
微前端架构
严选B端产品特点
• 数量多 • 项目庞大 • 多技术栈、多版本 • 产品间关联性强 • 业务协同开发多
页面整体布局
微前端-请求分发
微前端-渲染页面
微前端-项目开发
方案特点：BFF+SPA+MPA
• 子应用彻底隔离 • 开发体验好，子应用完全独立 • 技术栈、版本无关 • 项目改造成本低，能快速落地
严选大前端CLI建设
基于Angular Schematics核心能力
聚焦文件处理
• 创建组件：Generate • 引入组件：Add • 组件升级：Update
应用场景-工程改造
Step 1： npm i @sharkr/schematic-cli –g
Step 2： srs add @shark/ng-cloud-add
}
UserBaseContainer userBaseContainer = new UserBaseContainer(); userBaseContainer.setUserList(userlist); return AjaxResponse.initSuccessResult(userBaseContainer); }
项目改造
• 主应用前端组件 路由/加载资源/导航缓存 • 主应用Node中间件 子应用接口转发，声明主应用 • 子应用Webpack插件 子应用前端资源打包生成配置（JS/CSS） • 父子应用通信组件 父子通信、路由跳转
工程价值
产品拆分、自由组合
• 独立开发、部署、运行 • 微服务化，组织灵活
工程改造-首次执行
工程中新增和修改的文件
工程改造-再次执行
GOOD LUCK ！！！ 所有检查点都通过，工程改造完成
文件处理工具价值
• 规范前端基建迭代 • 降低工程改造成本 • 推进基建快速落地
多层次解耦与复用
多层次解耦
多层次能力复用
配置化开发
扩展性
• 节点类型 5 • 事件类型 10 • 动作类型 10+ • 动作执行顺序 可调整 • 动作配置项 可沉淀
Leabharlann Baidu
流程平台价值
工单审批流业务
• 前后端解耦 • 易开发 • 易复用 • 易测试 • 易运维
效率工具
文件处理工具
传统的工程化
• 项目初始化 • 开发、联调 • Webpack构建 • CI/CD
网易严选大前端建设方法论
业务背景
• 前端开发资源 • 前端应用架构 • 中台建设 • 效率工具
多层次解耦与复用
前端开发资源
跨框架组件
前端开发资源
多框架-组件开发
框架、版本强耦合
跨框架-组件开发
Web Components，一致性 、隔离性、稳定性
跨框架-整体架构
长期价值
• 开发成本低 利用已有UI组件库 • 资源复用 基础库进行版本、资源管理 • 环境隔离 业务组件开发自由度高 • 持续升级 技术栈、版本无关