结合目跨团队之间协作，进行研发资源共享的痛点，介绍基于 webpack module federation 的前端组件化共享方案，打造一个前端组件共享工作流，最后实现前端组件资源共享以及中心化管理。

演讲提纲：
1. 业务背景

• 组件化现状以及团队资源共享协作方式
• 统一的设计系统

2. 组件共享方案

• CV 大法
• NPM 包共享
• CDN + webpack externals
• webpack module federation

3. Module Federation

• MF 设计目标
• MF 使用方式
• MF 基本原理
• MF 优势以及解决了什么问题（对比 NPM）
• 创建基于 MF 的组件化工作流

4. 基于 MF 的组件共享工作流

• 搭建中心化组件管理平台
• 本地开发工作流（编译、上传、声明文件）
• 组件预览以及检索使用
• 线上资源管理以及发布控制
• 工作流线上实践

5. 总结与展望

• 组件共享工作流带来的收益
• 问题与方向

你将获得：

• 认识和了解 webpack 5 新特性 Module Federation 
• 如何基于 Module Federation 打造一套组件共享工作流
   

华为云官网是华为云的门户页面，对于页面的视觉与交互体验有较高的要求，结合华为云官网动态、强拟物、3D 影像等主流设计风格，我们在 Web 页面上使用了包含 js 动效，WebGL、WebGPU 等多种 Web 动效技术，极大地提升了门户页面的视觉与交互体验效果。

演讲提纲：
1. 背景介绍

• 业界及华为云官网的主流设计趋势及数字孪生，元宇宙的兴起
• 目前云官网的一些动效，Web3D 等的落地场景展示

2. 动效应用

• 前端动效基本概念
• 前端动效实现原理讲解
• 通用前端动效插件封装

3. Web3D 技术的探索与应用

• 视觉效果提升
  • 玻璃、金属等高品质材质效果提升
  • 3D 模型动态视觉效果提升
• 性能优化
  • 大数据量模型渲染优化
  • WebGPU，WebAssembly 等的应用
• VR 与 AR 技术的探索

4. 总结

• 华为云官网未来前端动效与 Web3D 技术的探索方向

你将获得：

• 学习到前端通用动效封装原理
• 学习 Web3D 开发中的视觉效果提升与性能优化方法

前端技术发展到今日，通过前辈们不断地探索，挖掘出了多种技术方向，涌现出了不同的解决方案。我们作为受益者可以通过工程化、视觉化、模板区块化、微应用化等多重技术方案赋能于企业，赋能于产线，而面对日益剧增的业务迭代需求，频繁的结果交付，让人力需求剧增，投入成本巨大，这一现象是在企业成型后技术部需要面对的第一个问题，面向这种情况“降本增效”这一个话题似乎就成为了多数企业技术部门提倡的核心要素。

作为“无所不能”的前端工程师“降本增效”我们当仁不让，说起“降本增效”大家第一个想法就是“低代码/无代码”，回溯过往低码化的热潮是从 2015 年左右开始出现，当时大家统称它为“下一代前端研发利器”，经过几年的时间沉淀似乎低码又慢慢淡出了人们的视线，我们可以思考现如今低码的发展，不难发现多数都应用在具象的业务场景之中，对此人们开始对“低码化”褒贬不一。有人认为没有用处，没法具体给研发人员提效，反而增加了大量的定制化工作，觉得是“毒瘤”。有人又认为它解决了业务线具体的生产需求，这种情况在兴盛体验技术部内也同样存在。

这种情况是否无解和无法改善？当然不是。起初的“低码化”就是为了解决具象问题而衍生出来的产物，只不过在前端技术不断发展的今日对于“低码化”的期待过于看高，人们多数想通过一套方案解决所有问题。所以“低码”并不是所谓的一无是处，它需要找准场景在进行合理发展。在放眼望去，整个技术圈中人们又开始在其他领域探索着更好的解决方案带来更高的价值，比如“AI”、“深度学习”等技术，它们在不同行业也一步一步稳扎稳打地投入真实场景并得以很好的应用，慢慢的“前端智能化”这一话题也开始涌现出来，现市面上我们可以看到“Imgcook”、 “Codefun”、“Deco”作为先驱者在不断探索可能，他们基于设计稿与代码生成之间进行相关研究与输出，为研发人员降低还原成本。

作为社区电商企业，行业的发展和竞争也给我们这一批技术人员带来了巨大的研发压力，出现了各式各样的需求，为此我们在团队内部衍生出来了一套基于智能化与低码融合的技术平台，为设计与研发带来了一个新层面上的变化，本次我将分享在兴盛优选我们是如何通过《智能化与低码化融合方案》解决现有问题提升交付速率与质量的。

演讲提纲：
1. 低代码在兴盛优选的应用场景与诉求

• 兴盛是如何布局低代码产品以及在不同场景下低码产品的形态
• 低代码引擎“Marvel-惊奇”的核心架构剖析
  • “惊奇”的前世今生
  • 物料解析引擎的核心架构设计与实现原理
  • 编辑器-三剑客（拖拽引擎，画布引擎，设置器引擎）核心架构设计与实现原理
  • 事件驱动器及变量工厂的核心实现原理
  • 渲染引擎核心实现原理及应用部署接入方案

2. 前端智能化-设计研发协作平台的核心架构剖析及场景设计

• Figma 设计稿的解析与标注生成器的实现原理
• 通过标注数据如何生成代码片段以及与低代码平台的一键桥接能力的核心实现原理
• 基于深度学习的组件识别方案
• 自动化 UI 视觉走查的核心架构设计及其实现原理

3. 总结和展望

你将获得：

• 企业级低代码引擎的实现原理以及低代码产品如何在企业内部合理布局落地
• 基于“类 AI”模式下的智能标注系统以及设计智能走查的核心实现原理
• 如何将智能化方案与低码化方案做融合形成一键桥接生成的能力以及其核心实现原理
   

飞书文档是一个非常复杂的 Web 应用，在业务发展迭代的过程中，遇到了很多典型的架构、工程、效能问题，这里主要跟大家介绍大型 Web 应用在架构演进过程中遇到的问题与解决方案。

1. 业务背景介绍

• 什么是飞书文档
  • 云文档、Doc、sheet、bitable
  • 套件打通、群公告、妙享、feed、任务
  • All in one
• 难点与挑战
  • 早期架构图示
  • 文档载体众多，单页应用规模庞大，百万行代码
  • 依赖管理复杂，业务之间互相依赖，耦合重
  • 集成与发布流程复杂，稳定性要求高

2. 架构演进详解

• 架构图示
  • 架构如何分层
  • 简要说明特点，如 MPA + 微前端，架构中存在的设计模式与反模式（依赖注入，开闭原则）
• 流程规范 & 基础设施
  • 流程规范（代码规范、目录规范、import 规范、合码规范等）
  • 基础设施（CI pipeline、命令行工具、pnpm）
  • 编译构建（编译缓存、esbuild 构建、webpack 插件）
• 从微前端到微组件
  • 通过 MPA + 微前端来解决巨石工程的通病
  • MPA + 微前端帮助我们解决了什么问题，带来的收益
  • 引入了哪些新的问题（依赖管理、版本管理、性能劣化）
  • 如何解决这些问题
• CI/CD
  • 建设统一的版本迭代机制，保障前端的集成与发布流程
  • 持续集成（单测、CI 卡点、线下环境、自动化冒烟、集成测试）
  • 发布部署（灰度发布、多环境部署）
  • 统一 DevOps 平台
  • 前端监控（包体积、性能、js 异常、请求）

3. 未来展望

• 当前问题
  • 业务&基座&公共模块之间的耦合
  • CI/CD 流程人工参与，需要自动化
  • 如何防止劣化
• 演进方向
  • 架构图示（简述架构分层逻辑）
  • 优劣势分析（单模块开发，模块内聚，效率高，自定义加载调度，性能优势）
• 前端工程化
  • 性能实验室
  • 自动化版本管理
  • 沉浸式开发体验（VSCode 插件、浏览器插件、飞书机器人）

你将获得：

• 大型 Web 应用的架构演进思路
• 巨石工程中通用问题的解决思路
• 工程化工具建设配合架构演进，提升团队效率的方法