软件系统在持续交付需求的同时也需要进行架构的维护和迭代，这样才能确保长期的研发效率和稳定性。时至今日，很多 Web 应用已经持续迭代了五年甚至十年之久，随着前端技术每天都在快速更迭，大型项目的架构升级则尤为困难。如何对大型 Web App 进行技术更新和迁移，是很多前端工程师逐渐或正在面临的技术难题。

百度搜索首页和结果页承载着几乎所有的搜索产品，尤其是结果页在机制和业务体量上都很庞大，数十万行代码承载着十几个产品线的运行时。搜索前端团队在近一年中，进行了代码模块拆分、组件化和 SSR、Node.js 架构迁移等技术更新和重构，也开源了部分关键技术和工具链代码。我们希望能够分享在这一过程中积累的大型项目重构经验和方法，也把一些有用的小工具回馈给社区。

演讲提纲：

1. 背景和问题

• 代码量大，耦合重，职责不清晰
• 工具链旧，开发效率低，交付效率差

2. 思路和方法

• 架构的目标
• 重构的策略

3. 落地和执行

• Molecule 和业务模块化
• 组件化重构和 Node.js

4. 总结和后续计划

听众收益：

1. 获得组件化、SSR、Node.js 在搜索前端的实践经验，了解百度搜索前端的基本架构；
2. 从具体的方案设计一直到实践路径，帮助理解大型前端项目的技术重构和升级的经验、方法和原则。

听懂我的演讲，需要具备这些知识储备：

1. 前端模块化
2. 组件化方案（Vue、Angular 等基础）
3. 代码重构
4. 服务端渲染

这些年来，高德地图 App 从“导航工具”转变为日活过亿的国民级出行服务平台。从工具 App 到平台 App，背后的技术如何转变？在瞬息万变的“互联网 + 用户体验”时代，我们又该如何“多、快、好、省”的满足复杂的业务诉求？大前端与动态化为我们提供了哪些新的可能？

本次分享我将通过三个主题 —— “产品与技术演进”“大前端架构技术”“工程化实践”为大家提供如何在一个非常重 Native 的应用上实现动态化的新思路，并对“大前端”在地图类应用的未来，展开一些畅想。最终在满足产品战略和用户诉求的同时，做到在“大象背上跳舞”。

演讲提纲：

1. 产品与技术演进

• 从工具到平台的演进
• 大象背上跳舞：大前端（动态化）的魔力
• 思考：如何让产品战略技术战略“相互结合”

2. 大前端架构技术

• 前端技术选型：自研 FOX 框架、业务分层设计理念
• 为什么要自研动态 UI 引擎 AJX
• 支撑大前端的主要成员 —— 平台 PaaS 能力
• 思考：哪些业务更适合前端？

3. 工程化实践

• “五个独立”运维平台：开发、编译、测试、发布、运维
• AJX 卡片平台：UED + 技术的融合
• AJX 工具链：自研 IDE 与编译，为研发“提质提效”
• 思考：工程如何赋能业务

4. 未来之路

• 从“手机”到“车机”
• 从“插件化”到“动态化”
• 从“主要场景动态化”到“全面动态化”
• 终局思考：Native 的进化

听众收益：

1. 了解动态化技术，如何与自身的“产品战略”相结合，做到“有抓手，可落地”
2. 了解动态 UI 的前端框架和底层技术，以及如何与 Android/iOS 代码“打好配合”
3. 了解动态化架构的工程化思路，以及如何赋能研发、业务
4. 了解动态化可能的演进方向，抛砖引玉，开阔思路

前沿亮点：

1. 自研 FOX 前端框架
2. 自研动态 UI 引擎
3. 平台 PaaS 能力、工程化实践，与前端的结合

知识储备：

1. 初步了解动态化（RN、Weex）的基础知识，深度参与过的更佳
2. 对 Android/iOS 研发有一定了解
3. 有架构相关经验的更佳

大前端技术的根源是 Web 开发技术和 GUI 软件开发技术，如今这两者正在加速融合，前端开发和 Web 开发中出现的范式转移都已经累积到接近革命的程度。最近几年我在多个公开场合围绕“现代 Web”概念做过讨论，在本次分享中，我会在之前讲过的《理解现代 Web 开发》《现代 Web 开发的现状与未来》基础上，更进一步明确定义“现代 Web 应用”，讨论它的能力和开发方式，以及字节跳动“Web 开发引擎”团队在这方面所做的实践。

演讲提纲：

1. Web 开发演化史

• LAMP
• Ruby on Rails
• 12-Factor App
• MEAN
• JAM
• SHAM
• STAR

2. Web 开发在字节跳动

3. 什么是 MWA（Modern Web App）

4. MWA 是“JS-centric（以 JS 为中心）”的

• 多语言开发
• 基于组件的 CSS
• 应用资产

5. MWA 是“Universal App（大一统应用）”

• Serverless SSR
• Serverless BFF
• 微前端
• 跨端统一
• 自包含工程化

6. MWA 要实现“No Boilerplate（无样板代码）”

• 约定优于配置
• 提供架构的抽象
• 入口抽象
• 功能优先于角色
• 模型层抽象
• 视图层抽象
• 控制层抽象
• 微生成器

7. MWA 需要“Smart Coding（智能编程）”

• 全量规则集
• CI/CD Flow
• 如何测试
• Pro-Code / Low-Code 开发环境

8. 三分钟开发一个 MWA

9. MWA 在字节跳动

听众收益：

1. 了解 Web 开发的发展脉络和趋势
2. 了解 MWA 的基本概念和能力
3. 了解 MWA 开发需要的最佳实践
4. MWA 在“App 工厂”字节跳动落地的实践