演讲提纲：

1. 发展历程

• 石器时代：工程 + 组件
• 白银时代：脚手架 + 物料 + 可视化开发工具
• 黄金时代：研发框架 + 低代码研发套件

2. 研发框架 icejs

• 目标与价值：代码一致性、能力完备性、简单易用性
• 框架设计原理
• 能力介绍
• 环境配置
• 数据请求
• 状态管理
• 预渲染
• Serverless 一体化
• 微前端

3. 低代码研发套件 iceworks

• 可视化研发工具的意义
• 从可视化工具到低代码套件的演进
• 基于 WebIDE 的云端研发链路

4. 未来的发展方向

听众收益：

1. 了解微前端诞生的背景
2. 微前端对于业务的价值
3. 微前端 icestark 方案是如何设计的
4. 面向不同的业务场景如何落地微前端架构

前沿亮点：

    微前端相关的技术体系：框架设计、沙箱、微模块、业务落地等。

贝壳找房经过这两年的高速发展，前端业务越来越庞大，需求也越来越多，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 在贝壳找房的落地经验