闲鱼技术2022年度白皮书-Flutter主题-打造Flutter高性能富文本编辑器——协议篇(上)

简介: 闲鱼技术2022年度白皮书-Flutter主题-


 

作者:光酒

 

闲鱼作为一个二手闲置交易平台,卖家发布商品产出优质的供给尤为重要商品发布器希望拥有富文本编辑能力,让用户简单便捷的方式产出更加优质的内容Flutter本身没有富文本编辑器的能力的,只有最基础的文本编辑器TextField

 

对于更加复杂的场景,比如支持自定义表情、主题、有序段落等能力,目前flutter组件是无法满足我们的业务诉求,另外在交互体验上与Native仍然存在一定的差距为了解决业务中面临的以上问题,我们决定设计并实现一个Flutter场景下高性能、可扩展的富文本编辑器。

 

一、 富文本编辑器整体架构设计

 

首先我们来看一看整体的架构设计分层:

 

image.png


自下而上主要分四层:

 

协议层:主要负责Model的定义、Selection描述、Commond事件逻辑处理,以及协议Normalizing校验

 

能力扩展层:能力扩展层提供丰富的plugin能力,既有内置的plugin,如:纯文本转换,undo/redo等能力,同时也非常方便的支持业务层自定义的扩展,例如支持站外H5页面展示的model to HTML的序列化plugin

 

渲染层:渲染层主要实现将富文本Model转换成Flutter Widget渲染,以及光标、选区、ToolBar等计算和渲染,以及用户手势交互事件等

 

业务扩展层:在Mural的设计之初,可扩展就是设计过程中非常重要的一部分,我们为业务方提供了非常灵活、功能强大的扩展能力,通过自定义Node、Plugin、Normalizing,实现如自定义表情、主题、段落、语法高亮等能力

 

二、 协议层设计

 

富文本编辑器对大家来说并不陌生,发展至今,已经涌现出非常多有优秀的开源富文本编辑器;当我们想要做Flutter富文本协议的时候,第一个想法就是先了解优秀的开源富文本编辑器方案,避免闭门造车

 

目前比较优秀的开源富文本编辑器,如CKEditor、Quill、Prosemirror、Draft、Slate等等;在了解和对比过后,我们决定使用Slate作为我们的富文本编辑器的协议

 

1. why Slatejs

 

我们为什么选择Slate?

 

image.png


插件是一等公民,能够很好的满足我们对于扩展性的要求

Slatjs在设计上支持嵌套结构,可以满足复杂的业务场景

与Dom相同的Data model,对于后面flutter渲染层的实现,也变得更加方便

直观的指令设计,能够非常好的支持plugin的自定义扩展

Slate在设计上,协议层与渲染层是有明确的核心划分,这让我们可以复用Slate协议层的设计,渲染层交给flutter来处理

 

除了上面的原因,我们选择Slate另外一个很重要的原因,就是它的单元测试覆盖率和完整度,让我们对它的稳定性更有信心

 

接下篇:https://developer.aliyun.com/article/1225978?groupCode=idlefish

相关文章
|
1月前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
1月前
|
Dart 前端开发 安全
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
【4月更文挑战第30天】本文探讨了Flutter中线程管理和并发编程的关键性,强调其对应用性能和用户体验的影响。Dart语言提供了`async`、`await`、`Stream`和`Future`等原生异步支持。Flutter采用事件驱动的单线程模型,通过`Isolate`实现线程隔离。实践中,可利用`async/await`、`StreamBuilder`和`Isolate`处理异步任务,同时注意线程安全和性能调优。参考文献包括Dart异步编程、Flutter线程模型和DevTools文档。
【Flutter前端技术开发专栏】Flutter中的线程与并发编程实践
|
1月前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
1月前
|
存储 缓存 监控
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
【4月更文挑战第30天】本文探讨了Flutter中优化列表滚动性能的策略。建议使用`ListView.builder`以节省内存,避免一次性渲染所有列表项。为防止列表项重建,可使用`UniqueKey`或`ObjectKey`。缓存已渲染项、减少不必要的重绘和异步加载大数据集也是关键。此外,选择轻量级组件,如`StatelessWidget`,并利用Flutter DevTools监控性能以识别和解决瓶颈。持续测试和调整以提升用户体验。
【Flutter前端技术开发专栏】Flutter中的列表滚动性能优化
|
3天前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
1月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
25天前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧
|
10天前
|
Dart 监控 测试技术
在Flutter开发中,注重代码质量与重构实践显得尤为重要
【6月更文挑战第11天】随着Flutter在跨平台开发的普及,保持高质量代码成为开发者关注的重点。良好的代码质量关乎应用性能、稳定性和开发效率。为提升Flutter代码质量,开发者应遵循最佳实践,编写可读性高的代码,实施代码审查和自动化测试。重构实践在应对代码复杂性时也至关重要,包括识别重构时机、制定计划、逐步操作及利用重构工具。注重代码质量和重构是Flutter开发成功的关键。
28 3
|
2天前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
8天前
|
Dart 前端开发 JavaScript
Flutter for Web:跨平台移动与Web开发的新篇章
Flutter for Web是Google的开源UI工具包Flutter的延伸,用于构建高性能、高保真的跨平台应用,包括Web。它基于Dart语言和Flutter的核心框架,利用Skia渲染引擎通过WebAssembly在Web上运行。开发流程包括安装SDK、创建项目、编写Dart代码和部署。性能优化涉及减少渲染开销、代码压缩等。与传统Web框架相比,Flutter for Web在开发效率和性能上有优势,但兼容性和生态系统尚待完善。
14 0

热门文章

最新文章