字节跳动的现代 Web 开发实践

1. 字节跳动的「现代 Web 开发」实践杨扬 (dexteryy) @ ByteDance Web Infra

2.

3. Agenda 01 02 「App 工厂」的前端开发问题 Web 开发的「范式转移」 03 字节跳动 Web 开发的「引擎升级」

4. 01 「App 工厂」的前端开发问题

5. Legacy Web Stack React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

6. 脚手架的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

7. 脚手架 common/* server/* npx create-xxx-app client/* npx xxx-cli public/* cp -r xxx-template-repo scripts/* xxx init *.config.js package.json ……

8. A A A A B B B B C C C C

9. A A+d-c A+f A+d-j B B+e-c B-g B+k-g C C+d C+h+i C+l+m A+n+o B-g+p C+I+q

10. 项目模板的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

11. 项目模板的问题 TS TS TS TS TS TS TS SPA SPA MPA MPA MPA MPA MPA+SPA Static Web Static Web Node.js Framework Node.js Framework Node.js Framework Node.js Framework Node.js Framework Redux Redux SSR SSR SSR SSR BFF BFF BFF Redux Redux I18n 业务 SDK I18n 业务 SDK

12. 项目模板的问题活动⻚面移动界面 PC 网站中后台桌面应用微前端 TS TS TS TS TS TS SPA SPA MPA SPA SPA SPA Node.js Framework Static Web Node.js Framework Static Web Static Web Redux 业务 SDK Electron 业务 SDK I18n Redux BFF SSR 业务 SDK 业务 SDK SSR BFF I18n I18n Redux

13. 项目模板的问题业务方向 A 场景类型 D 组件库 G 应用架构 J 解决方案 M 运行方式 P 业务方向 B 场景类型 E 组件库 H 应用架构 K 解决方案 N 运行方式 Q 业务方向 C 场景类型 F 组件库 I 应用架构 L 解决方案 O 运行方式 R …… …… …… …… …… …… ……

14. Webpack 包装的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

15. Webpack 包装 xxx dev xxx.config.js webpack-merge webpack-chain xxx build xxx-plugin Webpack Loaders Webpack Plugins webpack-dev-server webpack-dev-middleware webpack.config.js webpack webpack-cli

16. 问题1：业务项目仍包含大量配置 If you, like me, are working on JavaScript tools, you’re a gatekeeper to the largest programming community in the world. This is scary. — Dan Abramov ,《The melting pot of JavaScript》

17. 问题2：编译工具演进

18. 第二纪元第三纪元 …… Babel tsc NextGen Language Webpack Rollup Bundler Deno Snowpack Parcel esbuild Vite …… tsdx swc wmr Rome Collapsed Layers 1.0 Polyglot ESM first Collapsed Layers 2.0 Unbundled Development Faster Faster Collapsed Layers 3.0?

19. 问题3：dev 和 build 远远不够搭建设计编码测试调试构建运行集成发布低码架构框架 UT VT 协议自包含工作流工作流一体化协议运行时 IT 模拟规范性能预览运维预装建模智能化 E2E 还原性能 …… …… 兜底定制一体化低码自动化多模式多版本 …… …… ……

20. 前端工程化的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

21. 前端工程化的问题前端工程需求不止「代码初始化」和「代码层面的基建」搭建设计编码测试调试构建运行集成发布低码架构框架 UT VT 协议自包含工作流工作流一体化协议运行时 IT 模拟规范性能预览运维预装建模智能化 E2E 还原性能 …… …… 兜底定制一体化低码自动化多模式多版本 …… …… ……

22. 「现代 Web 工程」 / 「前端工程」 = 工程的「代码层面」 + 工程的「平台层面」创建「现代 Web 工程」 / 「前端工程」 = 代码初始化 + 平台初始化搭建设计编码测试调试构建运行集成发布低码架构框架 UT VT 协议自包含工作流工作流一体化协议运行时 IT 模拟规范性能预览运维预装建模智能化 E2E 还原性能 …… …… 兜底定制一体化低码自动化多模式多版本 …… …… ……

23. React 的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

24. Component-based 统一收敛到 React 技术栈 Why React? Virtual DOM 从 Vue 迁移到 React 社区生态围绕 React 做基建 State Mangement 应用规模 SSR Hooks API Server Component 设计演进技术趋势 …… HTML -> JS OOP -> FP ……

25. React has by far the most experience in abstraction design. Where React leads, other frameworks follow. — Shawn Wang (swyx)

26. 绝对数量： React == @babel/preset-react >>>>>>>>>>>>>>>>>>>>>>> CRA > Vue >> Next.js > Vue CLI >> Nuxt.js > Vite 增速势头： @babel/preset-react >>> React >> CRA == Next.js > Vue == Vue CLI > Vite > Nuxt.js

27. 全球 JS 开发者：1000万国内 JS 开发者：100万

28. React 的问题 React Is a Library, or a View Framework, Not a Web/App Framework. * Chrome Dev Summit 2019

29. Node.js 框架的问题 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

30. In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications. This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast, testable, and extensible frontend applications. However, while plenty of superb libraries, helpers, and tools exist for Node (and server-side JavaScript), none of them eﬀectively solve the main problem of - Architecture. Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications. — Kamil Mysliwiec, NestJS Philosophy

31. 服务器端应用架构 != 客户端应用架构 Routes Controller Routes Render Model View Input BFF Web Model DB Action Hooks Redux FSM …… View Render V + VM V + P Subscribe ViewController

32. Separation of Concerns (SoC)

33. 没解决前面的问题 • • Webpack 包装的问题 • 大量配置 • 工作流 • 简化部署 • …… 前端工程化的问题 • …… 反而增加新问题 • • • 一套业务逻辑分散在客户端和服务器端 • 相同业务逻辑在客户端和服务器端重复前后端分离？ • 服务器端需求通常只是： Web（含 SSR）和 BFF 没有降低服务器端开发⻔槛 • 难以支持「前端开发者」成为「产品开发者」

34. Web Client BFF Microservices Web Web Client BFF Native Client BFF Web 中台 / Headless CMS Web Client BaaS Functions Big Data & Distributed Infrastructure Web Monolith App

35. IaaS 和「后端 PaaS」 React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「后端 PaaS」 Serverless 「后端云」可视化搭建跨端技术

36. 前端应用后端应用 Web Client BFF 微前端 Web 微服务和﹁后端﹂ BaaS DBaaS PaaS CaaS（容器云） FaaS 容器和编排技术虚拟机、网络虚拟化物理机、物理网络、IDC（数据中心） CDN

37. 前端应用 A 前端部署需求前端应用 B 产品级 Web Server 简化部署路由分发部署场景微前端上下文注入简化运维微前端分发前端应用 C 前端应用 D BFF 分发 Diﬀerential Serving 调试 SSR 兜底 SPR（SSR 缓存机制） ESR / NSR ISG（递增生成） IaaS 和「后端 PaaS」：是后端技术的平台化，受到后端研发场景的局限 UX +++++++ DX +++++++ UX ++++ DX +

38. 前端应用 A 前端部署需求定制和运维基于 Nginx 的业务部署环境前端应用 B 业务后端负责开发和运维业务 Go Server 前端应用 C 业务前端负责开发和运维业务 SSR Server 前端应用 D …… IaaS 和「后端 PaaS」：是后端技术的平台化，受到后端研发场景的局限 UX ++++ DX ++ UX ++++ DX +

39. 前端应用后端应用 BFF Web 微服务和﹁后端﹂ BaaS 微前端 Web Client ？ DBaaS PaaS CaaS（容器云） FaaS 容器和编排技术虚拟机、网络虚拟化物理机、物理网络、IDC（数据中心） CDN

40. 02 Web 开发的「范式转移」

41.

42. 传统 Web 开发现代 Web 开发 LAMP JAMstack Ruby on Rails 12-Factor App MEAN / MERN Paradigm Shift SHAMstack 范式转移 STAR App Meta-framework

43. 服务器端 MVC 框架传统 Web 开发 LAMP Routes Controller Ruby on Rails Routes Render 12-Factor App Model View BFF MEAN / MERN Web DB

44. Codebase Dependencies 传统 Web 开发 LAMP Ruby on Rails 服务器端工程标准 Build, release, run Dev/prod parity Config 12-Factor App …… MEAN / MERN

45. 传统 Web 开发 LAMP Ruby on Rails 12-Factor App MongoDB Application Database / IaaS / 后端 PaaS MEAN / MERN Express Node.js Framework, Web+BFF Server Angular/React View Framework Node.js CLI tools

46. 现代 Web 开发 JAMstack JS CSR APIs BFF, Content Mesh Markup SSR/SSG Static Hosting Serverless APIs + JS BFF, Content Mesh Markup SSR/SSG Serverless SHAMstack STAR App Meta-framework CSR

47. SPA Component-based CSR Serverless Functions BFF, Content Mesh BaaS SSR/SSG 中台（Headless CMS） Serverless GraphQL Isomorphic / Neo-Isomorphic MPA 前端 PaaS * 客户端应用代码的运行被「前置」，尽可能优先在编译环节运行，剩余代码优先在服务器端环节运行

48. 现代 Web 开发 JAMstack SHAMstack STAR App Design System View 层模式 TypeScript 类型安全、智能编程 Apollo Model 层模式 React FP 范式 Meta-framework

49. 现代 Web 开发 JAMstack JAMstack SHAMstack STAR App Meta-framework = STAR App CSR View 层模式 BFF, Content Mesh 类型安全、智能编程 SSR/SSG Serverless + Model 层模式 FP 范式

50.

51. 传统 Web 开发？现代 Web 开发 Paradigm Shift 范式转移？

52. 框架、UI 传统 Web 开发现代 Web 开发服务器端框架客户端框架 HTML（文档） OOP、消息传递 Paradigm Shift 范式转移 JS（编程语言） FP、单向数据流

53. 架构传统 Web 开发现代 Web 开发前后端两套程序一套程序前后端分离？ Web/BFF Server Paradigm Shift 范式转移前后端一体化 Serverless, Content Mesh

54. 抽象传统 Web 开发现代 Web 开发原始的初级的抽象层更高的成熟的抽象层人工编写 DX 和 UX 不可兼得 Paradigm Shift 范式转移智能生成 DX 和 UX 同时最大化

55. 部署传统 Web 开发现代 Web 开发 Static Web Static Web Node.js App Paradigm Shift SSR, SPR SSG, ISG 范式转移 BFF Micro-frontend Hybrid / Packaged App

56. 平台传统 Web 开发现代 Web 开发 IaaS 和后端 PaaS 前端 PaaS Paradigm Shift 范式转移前端配置化一体化云研发低码提效

57. 03 字节跳动 Web 开发的「引擎升级」： Modern Web Stack 和 Modern Web App (MWA)

58. Legacy Web Stack React Node.js 框架 Webpack 包装前端工程化项目模板脚手架 IaaS 和「旧式 PaaS」 Serverless 「后端云」可视化搭建跨端技术

59. Modern Web Stack 低码搭建跨端技术微前端技术 …… 可复用模块技术标准可复用模块生态现代 Web 应用（MWA）技术标准云研发平台 Serverless 「前端云」（「前端 PaaS」）工程方案

60. oofy：字节前端研发体系低码中台：Starry（星夜）桌面跨端： Jupiter Electron 移动跨端： Lynx 「工具库 / UI 组件 / 业务模型」（Jupiter 框架） Goofy 模块中心「MWA」 / 「API 服务」（Jupiter 框架） Goofy 研发工作台（Goofy Studio）微前端： Garfish …… 前端部署平台（Goofy Deploy） Goofy 工程方案市场

61.

62.

63. 代码层面工程？代码 dev build 本地终端环境和 VSCode Git 仓库平台层面构建平台流水线（Pipeline）平台 PaaS LB …… 工程（概念）

64. 工程代码代码层面仓库迭代工作流（CI Workflow）平台层面云研发环境本地研发环境工程（实体）发布工作流（CD Workflow）发布结果 / 运行状态 Studio

65. 工程 A 工程 B 工程 C 工程 D 创建工程工程方案 1 工程方案 2 工程方案 3 工程的「模板」创建工程方案工程类型 X 工程类型 Y 工程方案的「标准」

66. 工程 A 工程 B 工程 C 工程 D 创建工程默认工程方案业务工程方案自定义工程方案创建工程方案默认工程类型自定义工程类型

67. Web 项目模板 A Web 项目模板 B Web 项目模板 C Web 项目模板 D Web 项目模板 E Web 项目模板 F TS TS TS TS TS TS SPA SPA MPA SPA SPA SPA Node.js Framework Static Web Node.js Framework Static Web SSR 业务 SDK SSR 业务 SDK 业务 SDK Static Web Electron Redux 微前端 BFF I18n I18n I18n Redux Redux 收敛默认 MWA 工程方案 BFF MWA 工程类型

68. MWA Modern Web App 继续抽象 JAMstack 框架收敛 Node.js Web 框架抽象自建 JAMstack 架手架现代 Web 开发范式自建 Node.js Web 应用脚手架微前端项目模板 … 其他 Web 项目模板传统 Web 开发范式 React, Node.js, Webpack, … HTML + CSS + JS JavaScript Renaissance 刀耕火种

69. MWA 大小（复杂）： 1 + 1 + 1 + 1 < 1 能力（收益）： 1 + 1 + 1 + 1 > 4 Modern Web App 继续抽象 JAMstack 框架收敛 Node.js Web 框架抽象自建 JAMstack 架手架现代 Web 开发范式自建 Node.js Web 应用脚手架微前端项目模板 … 其他 Web 项目模板传统 Web 开发范式 React, Node.js, Webpack, … HTML + CSS + JS JavaScript Renaissance 刀耕火种

70. 默认工程类型 API 服务 MWA 工具库自定义工程类型 UI 组件 Monorepo 自定义纯前端业务模型自定义 Node.js 自定义

71.

72. 默认 MWA 工程方案 GHome 工程方案 MWA 工程类型

73. MWA Modern Web App

74. Demo: Hello MWA src/App.jsx package.json 自带产品级 Web Server 零代码启用 SSR 或 SSG 以客户端框架为中心一键运行以 JS 为中心一键部署预览版默认零配置，约定优于配置本地还原产品环境效果样板代码最小化 …… CSS 最佳实践 CSS-In-JS 开箱即用 ES6+ & TS 最佳实践下一代 CSS 开箱即用一键测试（IT / UT）支持各种 CSS 开发方式集成内部 SDK 配置和使用 Design System

75. 单入口约定式路由 SPA src/App.tsx src/landing-page/pages/home.tsx src/landing-page/pages/articles/[title]/.tsx 多入口（MPA）自控式路由 SPA + 自定义入口 + 自定义 HTML src/landing-page/App.tsx src/admin-app/App.tsx Router API (React Router) src/admin-app/App.tsx src/admin-app/index.ts Head API (React Helmet) config/html/head.html

76. Demo: Hello MWA src/App.jsx package.json jupiter.config.js Studio

77. HTML Requests Goofy Gateway 本地还原产品环境效果路由分发支持私有化部署自动 Polyfill Jupiter Server (Web) 一键部署预览版小流量、… 第一方 Serverless 平台 Diﬀerential Serving SSR 自动兜底 SPR（SSR 缓存机制） …… Jupiter Server (SSR) Web FaaS V8 Worker (ESR) V8 Worker (NSR)

78. Compile-time SSG （静态网站生成） ISG （增量网站生成） Server-side Runtime SPR （无服务器预渲染） SSR （服务器端渲染） Client-side Runtime CSR （客户端渲染） ESR / NSR （边缘渲染） Server Component Neo-Isomorphic Isomorphic 运行前置 Universal JS

79. SSG SSR CSR CSR SSR SSG

80. 「new」命令 ✅ 启用「Unbundled 开发」功能 ✅ 启用「一体化 BFF」功能

81. + Studio ✅ 启用「Unbundled 开发」功能 ✅ 启用「一体化 BFF」功能

82. ESM First Unbundled Development 「dev esm」命令「dev」命令 853ms 4033ms

83. `jupiter dev esm` + Package Delivery Network (代码云分发) PDN

84. Demo: Hello MWA api/users/[uid]/info.ts 「BFF 函数」 BFF SDK 任意 REST API GET https://localhost:8080/api/users/u00001/info/ POST https://localhost:8080/api/users/u00001/info/ src/App.jsx package.json

85. Demo: Hello MWA api/users/[uid]/info.ts src/App.jsx BFF SDK SSR 环境中自动优化（内网访问 BFF） BFF 在 Serverless 环境中自动优化 package.json

86. HTML Requests BFF Requests Goofy Gateway 本地还原产品环境效果支持私有化部署 Jupiter Server (Web) 一键部署预览版第一方 Serverless 平台 Jupiter Server (SSR) BFF Server Web FaaS V8 Worker (ESR) V8 Worker (NSR)

87. ﹁三位一体﹂应用静态 Web + 通用业务需求（路由分发、自动 Polyfill、…）一体化 BFF MWA 增加 server 目录移除 src 目录增加 src 目录移除 src 和 server 目录移除 server 目录增加 src 和 server 目录一体化 SSR/SPR/ESR/NSR/SSG NWA (Node.js Web App) 独立 API 服务 BFF 函数 RPC 自定义 Web Server 自定义 SSR Server BFF 函数+Node.js 框架 WebSocket GraphQL

88. Universal JS MWA Universal App 静态Web 动态Web SSR/SPR/ESR/NSR SSG BFF API 微前端 Electron Lynx 小程序 PWA 运行/部署模式移动⻚面 PC网站中后台 SPA MPA 前后端一体化应用 Node.js Web 应用 Node.js API 服务微前端子应用桌面应用 Lynx⻚面常⻅场景

89. 开箱即用、以客户端为中心的应用架构兼容 Redux 生态自动生成 Reducer、Action、Type BaaS, DBaaS, 中台, 微服务, … 全局状态管理 Ducks Modular Redux …… Input Models …… BFF Functions Model BFF Action createModel SSR Server View Web Server Web useModel useLocalModel useLoader Render V + VM V + P ViewController Routes

90. 引入框架和框架依赖「运行时」抽象 ESLint + Prettier 最佳实践 ESLint 全量规则集自动配置 VSCode 代码可视化和低码编辑 IDE 自动生成代码（autofix）框架编译器自动生成代码编译产物「编译时」抽象「部署时」抽象开发机里的源码（提交到仓库）「编写时」抽象编写过程中的源码（IDE 里）引入平台上的其他系统 Serverless 平台和客户端里的应用系统 UX（开发结果） DX（开发成本）消灭 DX 和 UX 之间的跷跷板实现 DX 和 UX 同时最大化

91. MWA 团队数有效开发者有效项目数半年增⻓ 432 2272 1500 120% 周活开发者日活开发者日活项目半年增⻓ 1051 693 388 60%

92. Modern.js 现代 Web 开发者问卷调查 + 开源计划 Web Infra 招聘信息公众号

93.