专题演讲嘉宾:张泽亚

字节跳动 高级前端工程师

来自飞书文档团队,在飞书文档前端工程化建设及架构治理中有较多实践。

by 张泽亚

字节跳动
高级前端工程师

飞书文档是一个非常复杂的 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 应用的架构演进思路
  • 巨石工程中通用问题的解决思路
  • 工程化工具建设配合架构演进,提升团队效率的方法

交通指南

广州万富希尔顿酒店

Hilton Guangzhou Baiyun
地址:广州市白云区云城东路515-517号
  • 微信咨询

  • 电话咨询

    联系电话:+86 15600537884

微信联系我们

票务经理