贝壳找房经过这两年的高速发展，前端业务越来越庞大，需求也越来越多，B 端主 App 的 Native 页面已经超过了 600 个，迫切需要提高 App 的开发效率来满足研发需求。我们从核心架构改造，页面框架封装和建设 UI 组件库，引入 Flutter 后，效率提升了很多。但仔细梳理，发现还存在着重复开发的问题，没有做到极致复用，比如，相似的 UI 布局，可以和 UE 一起统一 UI 布局，做成 UI 模板；比如，占比 35% 的列表页面、表单页面和卡片化页面，分别做成通用页面，后端直接配置数据就可以实现一个新页面，实现 App 0开发。每类页面明确了技术方案和实现框架模板后，模板代码一键生成，Flutter 页面占比达到 50%，效率成倍提升，相当于 2 个移动端开发，可满足 3～6 个产品经理的需求。

演讲提纲：

1. 贝壳找房移动端介绍

• 业务线多，产品经理人数远多于移动端开发，需求多
• 建设 UI 组件很有成效，但是跨业务可能会重复建设

2. Flutter 试水的苦与甜

• toB 业务上线了 100 多个 Flutter 页面，提效明显
• 对于一个独立页面，要么全 Flutter 实现，要么全 Native 实现
• 使用 Flutter，也发现一些问题
  • 动态化是短板，不支持热修复
  • 基础库，UI 组件不够完善，成熟开源库少，前期投入成本大
  • 实际使用，有些页面使用 Flutter 实现，开发效率远不如 Native

3. 统筹规划、逐个击破

• 所有页面梳理，按技术实现方案分类
• Native or Flutter
• UI 模板
  • 为什么要做 UI 模板
  • UI 层面统一标准是前提条件
    • 规范页面布局结构
    • 统一 UI 模板
  • 增量的 UI 模板样式，业务直接复用
  • 业务 UI 模板持续共建，统一收口

4. 占比 35% 的页面，Native 动态化实现，做到 App 0开发

• 绝大多数的列表页面、表单页面、卡片化页面、筛选列表页均适用
• 技术架构介绍
• 后端下发数据，App 端页面动态构建
• 动态表单，动态 Item，动态卡片的实现
• 埋点的处理
• Action 的处理

5. 占比 50% 的页面，Flutter 模板化，节省 50% 开发资源

• 贝壳 Flutter 的页面架构模板详细介绍
• UI 组件模板全局复用，样式增量开发
• UI 模板动态下发
• 一键生成页面模板代码，填空式编程

6. 总结

• 深入开发过程中，找痛点
• 提效方案的两大思想：解耦，复用

听众收益：

1. 了解研发提效的一些思考和实践：解耦、复用
2. 了解动态化、模板化、Flutter 在贝壳找房的落地经验