专场出品人：梁伟盛
腾讯文档Doc前端负责人
2015年加入腾讯以来，曾担任NOW直播和腾讯直播的前端负责人，目前是腾讯文档Doc团队的前端负责人。拥有超过10年的前端开发经验，对于前端性能优化、前端监控以及架构等方面有着深入的理解和实践经验。
在我的职业生涯中，我曾担任过多个技术大会的联合举办人、出品人和讲师，与业界同行分享我的经验和见解。我热衷于探索和学习新技术，致力于提升前端开发的效率和质量。
专场：大前端架构实践
大前端架构实践是指在大型前端项目中，为了满足不断增长的业务需求、技术复杂度和用户体验要求，对前端架构进行优化、升级和创新的实践过程。这些实践涉及到前端架构设计、技术选型、团队协作、性能优化、安全防御等多个方面。在本专场中，我们将分享一些经过实践检验的大前端架构实践方案，希望通过我们的分享，能让大家在应对大前端业务和技术架构复杂性时，更加从容地应对挑战，实现高效、稳定的大前端开发。
张雷
剪映 前端开发工程师
校招加入字节后，先后在飞书表格和剪映 Web 团队工作。目前在剪映前端架构基建团队负责前端全链路观测的建设。对大型前端项目的架构设计，工程化建设，性能优化，监控上抱有较多经验。
剪映 Web 产品形态繁多，复杂度高，历史债重。为了更好地开发维护，复用代码以及管理依赖，同时也是顺应组织形态，我们整合分散的仓库，以大仓形式组织代码。随之而来的关键问题便是如何设计仓库及项目的架构，以应对数百万行的庞大代码量。此次分享将从职责划分，依赖注入，配置化，链路观测等方面介绍 剪映 Web 的大仓架构实践经验。
内容大纲
1. 仓库目录及职责划分
介绍 剪映 Web 仓库内的代码目录划分规范及职责
2. 依赖注入实践和改造
介绍 剪映 Web 项目中通过分层依赖注入来实现单向依赖架构，以及异步依赖注入、闲时依赖注入等功能的实现与具体应用
3. 积木体系
逻辑驱动 UI。通过领域服务和功能贡献点实现：
3.1 启动流程任务化
使用任务式的启动流程支持新业务的快速搭建
3.2 功能插件化
使用 contribution 等方式组合代码、配置服务，使得各种基础产品能力可以低成本地自由组合，从而差异化地推向不同地区、不同用户领域
3.3 UI 配置化
引入 workbench 框架实现不同编辑器的差异化 UI；使用配置服务支持新的 SPA 业务
4. 监控上报 - 全链路可观测
4.1 介绍链路观测及其在前端可解决的问题
4.2 主要差异及实现
4.3 介绍接入实例
4.4 介绍数据消费方式及问题排查实例
内容大纲
1. 仓库目录及职责划分
介绍 剪映 Web 仓库内的代码目录划分规范及职责
2. 依赖注入实践和改造
介绍 剪映 Web 项目中通过分层依赖注入来实现单向依赖架构，以及异步依赖注入、闲时依赖注入等功能的实现与具体应用
3. 积木体系
逻辑驱动 UI。通过领域服务和功能贡献点实现：
3.1 启动流程任务化
使用任务式的启动流程支持新业务的快速搭建
3.2 功能插件化
使用 contribution 等方式组合代码、配置服务，使得各种基础产品能力可以低成本地自由组合，从而差异化地推向不同地区、不同用户领域
3.3 UI 配置化
引入 workbench 框架实现不同编辑器的差异化 UI；使用配置服务支持新的 SPA 业务
4. 监控上报 - 全链路可观测
4.1 介绍链路观测及其在前端可解决的问题
4.2 主要差异及实现
4.3 介绍接入实例
4.4 介绍数据消费方式及问题排查实例
听众收益
1. 了解大型前端项目的代码组织方式及通用的整体架构
2. 了解如何通过依赖注入、插件化等方式提升代码复用率和开发效率
3. 了解前端项目如何使用链路观测保障稳定性
剪映 Web 大仓架构实践
陈鸿威
bilibili 移动技术部 资深开发工程师
曾在新加坡工作，负责面向东南亚及中东市场的直播类 App 开发。2020 年加入 B 站，负责 iOS 端流量相关业务，参与和主导了轻量化 Inline 框架的开发、搜索和首页业务的重构以及编译时依赖注入和启动编排框架 Gripper 的开发。
随着时间的累积，客户端代码的历史愈长，其脆弱和易出错的程度就愈发显著。每一次迭代都可能在代码的逻辑结构中增加新的维度，一旦这些维度超过人脑的处理极限，代码维护就会变成一种黑盒操作，其中输入与输出不再保持一致性，代码的成功执行变成了一种难以推理的偶然事件。在哔哩哔哩，我们希望通过探索和实践单向数据流，使开发过程聚焦于单一且有明确方向的维度。这不仅是对潜在问题的有效简化，更是一种面向未来的开发策略。
内容大纲
1. 背景介绍
1.1 编程迭代的必要性与挑战：探讨持续的代码迭代如何导致系统的脆弱和易错性，并说明为什么这是一个关键问题；
1.2 历史代码的复杂性问题：分析随时间累积代码，每轮迭代可能引入更多复杂性，致使维护成本上升。
2. 主要问题
2.1 代码实施的多样性：如何不同开发者采用不同的实现方法可能导致维护上的困难；
2.2 副作用的管理：说明功能实现过程中依赖的副作用如何隐藏潜在问题，并容易产生bug；
2.3 数据处理的安全性：探讨在追求开发速度时，可能采取的捷径和其对数据处理安全性的影响；
2.4 UI处理的不统一性：分析在多点修改UI可能引入的同步问题和线程安全问题。
3. 解决策略
3.1 采用函数式编程：借助函数式编程减少副作用，并提升代码的可预测性；
3.2 实施类REDUX的单向数据流：通过类REDUX框架来管理状态，确保数据流的一致性和可追踪性；
3.3 促进单元测试的可行性：说明如何通过上述策略简化单元测试过程，增强代码质量。
4. 展望未来
4.1 数据与UI的分离：讨论数据与UI分离的趋势如何为声明式UI的未来做好准备；
4.2 符合Kotlin Multiplatform (KMP)的设计哲学：探索如何通过KMP设计哲学促成跨平台代码的共享与一致性。
1. 背景介绍
1.1 编程迭代的必要性与挑战：探讨持续的代码迭代如何导致系统的脆弱和易错性，并说明为什么这是一个关键问题；
1.2 历史代码的复杂性问题：分析随时间累积代码，每轮迭代可能引入更多复杂性，致使维护成本上升。
2. 主要问题
2.1 代码实施的多样性：如何不同开发者采用不同的实现方法可能导致维护上的困难；
2.2 副作用的管理：说明功能实现过程中依赖的副作用如何隐藏潜在问题，并容易产生bug；
2.3 数据处理的安全性：探讨在追求开发速度时，可能采取的捷径和其对数据处理安全性的影响；
2.4 UI处理的不统一性：分析在多点修改UI可能引入的同步问题和线程安全问题。
3. 解决策略
3.1 采用函数式编程：借助函数式编程减少副作用，并提升代码的可预测性；
3.2 实施类REDUX的单向数据流：通过类REDUX框架来管理状态，确保数据流的一致性和可追踪性；
3.3 促进单元测试的可行性：说明如何通过上述策略简化单元测试过程，增强代码质量。
4. 展望未来
4.1 数据与UI的分离：讨论数据与UI分离的趋势如何为声明式UI的未来做好准备；
4.2 符合Kotlin Multiplatform (KMP)的设计哲学：探索如何通过KMP设计哲学促成跨平台代码的共享与一致性。
听众收益
1. 以 B 站为镜，探索自己客户端开发中的问题，并借鉴 B 的思路来解决；
2. 了解单向数据绑定的思想和实践方案，为自己的实践建立基础。
bilibili 客户端单向数据流的探索和实践
陈成
蚂蚁集团 高级前端技术专家
花名云谦，Github 账号为 sorrycc，阿⾥ &蚂蚁 15 年+⽼前端，是 Umi、Dva、babel-plugin-import 等开源库的作者，⽬前在蚂蚁集团负责中台前端框架 Bigfish 和基于 Rust 构建⼯具 Mako 的开发⼯作。此外，还有维护了发布了 100 多期的「MDH 前端周刊」和发布了 400多篇⽂章的「前端⽇更知识星球」。个⼈在 React、框架开发、性能优化及前端⼯程化等领域相对⽐较专业，期待和您的交流。
现代前端开发动则⼤⼏千到⼩⼏万的模块数，⽽基于 js 实现的 webpack已不能满⾜⽇常开发的需要，严重影响开发效率。我们⾃去年开始研发了基于 Rust 的构建⼯具 Mako，已在内部落地数百个项⽬，并将于今年 6 ⽉底开源。此次分享会介绍我们的实现思路，以及对于构建速度和产物性能领域的解法。
内容大纲
1. 背景介绍
2. 从 0 实现 Rust 构建⼯具
2.1 从 Toy Version 开始
2.2 构建的基本流程
2.3 两个 Stage：Build 和 Generate
2.4 Runtime 的设计
2.5 ⽂件处理：CSS、JavaScript、Assets
2.6 构建器进阶
3. 提升构建器速度的 N 种⽅法
3.1 聊下 Benchmark
3.2 构建器提速的⽅法论
3.3 Rust 语⾔和内存层优化
3.4 并发的充分利⽤
3.5 利⽤缓存、MFSU 等提升热启动和热更速度
3.6 提速除了 Rust 层，Node 和框架层也很重要
3.7 其他（Less 提速、按需编译、极速热更、桶⽂件优化、如何定位卡点问题等）
4. 提升产物性能的⽅法
听众收益
1. 了解如何⽤ Rust 从 0 开始实现⼀个构建⼯具 Mako
2. 了解 Mako ⽤于优化构建速度的⼗多种⽅法
1. 了解如何⽤ Rust 从 0 开始实现⼀个构建⼯具 Mako
2. 了解 Mako ⽤于优化构建速度的⼗多种⽅法
3. 了解 Mako 如何优化产物性能
Mako：用Rust 实现极速的构建工具
刘天航
剪映 前端开发工程师
入职以来参与过 B 端及 C 端场景下的多个性能优化专项，在性能优化领域上有较多经验。目前在剪映前端视频与图像编辑器团队推进多种业务场景下的性能优化建设。
剪映 Web 当前存在多种形态的产品与繁多的能力，而如何通过系统性的方案高效应对大型项目在快速业务迭代下的复杂性是我们持续面对的挑战。本次分享将从剪映 Web 性能的监控，优化与防劣化的角度出发，介绍我们在面对这一挑战中的探索与方案。
内容大纲
1. 剪映 Web 的业务背景与性能挑战
内容大纲
1. 剪映 Web 的业务背景与性能挑战
2. 性能问题的监控与度量
2.1 启动性能
2.2 运行时性能
3. 场景化性能问题的优化模式与基建支持
3.1 多业务形态下的业务能力模块化与启动调度
4. 基于 Contribution 与 Service 的能力拆分
5. 启动流程的任务化与加载管理
5.1 资源加载的优化框架
6. 缓存，预加载与延迟加载
7. 资源加载的模块化与性能优化
7.1 感知性能优化
8. 剪映 Web 的防劣化机制
8.1 研发阶段的防劣化：包体积劣化监控与自动化性能测试
8.2 线上监控：监控与问题分析机制
2.1 启动性能
2.2 运行时性能
3. 场景化性能问题的优化模式与基建支持
3.1 多业务形态下的业务能力模块化与启动调度
4. 基于 Contribution 与 Service 的能力拆分
5. 启动流程的任务化与加载管理
5.1 资源加载的优化框架
6. 缓存，预加载与延迟加载
7. 资源加载的模块化与性能优化
7.1 感知性能优化
8. 剪映 Web 的防劣化机制
8.1 研发阶段的防劣化：包体积劣化监控与自动化性能测试
8.2 线上监控：监控与问题分析机制
听众收益
1. 了解一种大型项目的性能优化体系
2. 了解一些性能问题的挑战以及解决的模式
剪映 Web 大型前端项目的性能优化与防劣化体系
刘畅
钉钉 终端技术前端负责人 高级技术专家
当前担任钉钉终端技术前端负责人，主要负责钉钉基础产品的前端架构与能力建设。2014年加入阿里巴巴，先后负责过国际化、电商、即时通信和协同办公等多业务的研发工作，在前端性能优化、中后台、低代码、跨平台、端云协同等技术领域有着丰富的架构经验。
随着AI技术的不断进步和日渐普及，我们正在目睹人机交互方式由传统的命令输入和图形界面，向更自然、更直观并且更智能的模式转变。在这一背景下，我将在本次分享中，我将介绍钉钉在全面智能化战略下，通过智能容器和卡片升级自然语言人机交互体验，高效便捷地连接AI能力、业务场景和用户的实践经验。
内容大纲
- 1. AI时代人机交互的演变
- 2. 钉钉的场景与挑战
- 3. LUI+GUI方案的探索
4. 业务场景中的实践案例
听众收益
- 1. 从数字化走向智能化人机交互的发展趋势
- 2. 钉钉智能容器和互动卡片的技术实践
3. 智能化场景的业务实践
AI时代人机交互的探索与实践
刘德峰
腾讯文档 PDF&白板前端负责人
毕业于福州大学，工作九年，在腾讯六年。从腾讯文档对外发布之初就一直深耕文档领域，先后参与过表格、文档开发，目前是 PDF 和白板项目负责人。带领小团队从 0 到 1 打造 PDF 项目和攻坚白板项目。对 PDF 等版式文件规范有比较深的了解。对性能优化和前端整体链路有方方面面的实践经验。
1. 简单介绍白板是什么，使用场景等，让观众知道接下去要说的内容是关于什么方面的
2. 在线白板的协同架构和数据抽象，通过抽象不同白板元素的数据结构和预留拓展空间，实现数据层和协同层，做编辑原子化操作和冲突处理，实现协同编辑
3. 介绍白板的渲染引擎，介绍在 pixi.js 和 skia 做技术选型的分析思考，秒速 pixi.js 在阴影和模糊性能以及清晰度的问题，和自交图形切三角等问题
4. 介绍渲染引擎的能力和碰撞问题
5. 介绍一些算法，如布尔运算、路径拆圆角、连线寻路、嵌套矩阵变化、路径光滑算法等
6. 介绍性能优化，如四叉树局部渲染等
2. 在线白板的协同架构和数据抽象，通过抽象不同白板元素的数据结构和预留拓展空间，实现数据层和协同层，做编辑原子化操作和冲突处理，实现协同编辑
3. 介绍白板的渲染引擎，介绍在 pixi.js 和 skia 做技术选型的分析思考，秒速 pixi.js 在阴影和模糊性能以及清晰度的问题，和自交图形切三角等问题
4. 介绍渲染引擎的能力和碰撞问题
5. 介绍一些算法，如布尔运算、路径拆圆角、连线寻路、嵌套矩阵变化、路径光滑算法等
6. 介绍性能优化，如四叉树局部渲染等
听众收益
1. 前端协同白板的架构设计
2. 实现在线白板涉及的图形学知识和技术细节
3. WebGL 在前端的落地实践
4. 前端性能优化
腾讯文档智能白板
赵旭阳
小红书 资深前端工程师
2020 年加入小红书，先后在 Web Infra、自研小程序、社区业务担任前端开发工程师。主导了小红书研发框架升级、自研小程序编译、小红书 Web 端等项目。在 Web 工程化和性能优化上有丰富的实践经验。
小红书网页版为桌面端用户提供了更加便捷的内容消费体验，与App端在使用场景上优势互补。本次分享将会剖析小红书在网页版性能优化方向的完整实践思路，包括如何结合业务指标建设一套完整的性能度量体系和优化思路，通过科学运用 QoS-QoE 模型和 A/B 实验能力明确优化方向并验证效果和收益。
内容大纲
1. 小红书网页版业务背景
2. 体验度量指标建设思路
2.1 基础指标
2.2 首刷指标
2.3 流畅度指标
3. 如何科学进行性能优化
3.1 科学运用 A/B 实验
3.2 QoS - QoE 模型实践
3.3 性能防劣化与归因
4. 首刷场景性能优化实践
4.1 首刷场景全链路耗时分析
4.2 本地缓存优化带来的「负收益」
4.3 预请求、Redis 缓存优化
4.4 流式渲染优化
听众收益
1. 学习如何搭建体验度量体系和指标
2. 了解如何系统分析性能问题的方法
3. 了解如何科学论证性能优化效果和收益果和收益
小红书网页版性能优化实践
SECon组委会是由业界多位资深技术专家发起，负责组织技术指导委员会，并和委员会的专家一起挖掘全球软件工程领域的创新技术，同时依托智盟创课国内领先的人才能力提升服务供应商，组织专业的会务服务团队，全面推进会议的顺利落地，保证参会者体验。
商务合作：木子 15122643988
票务联系：丽媛 18600050529
E-mail：speaker@secon.com.cn
关注SECon公众号
添加SECon小助手，获取
会议最新资讯
