X6：全面提升开发者体验，图编辑 2.0 四大升级-烟雨网

导读

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建图编辑类应用。在过去一年的持续迭代中，我们发现图编辑应用已经不仅仅满足于图形展示，在图形定制、交互、性能上有更多高级的需求。这些需求给开发者带来了较大的挑战，主要的挑战点在于：

渲染性能遇到瓶颈。 随着业务数据的增多，很多开发者反馈，首屏渲染和元素交互越来越卡顿，只有在对应用有足够多的性能分析以及对渲染框架有一定的了解的基础上，采取一些具有挑战性的工程实践，才能达到理想的性能。
架构不合理，开发者生态跟不上。 由于我们架构、文档、社区管理等诸多原因，开发者很难参与到社区贡献，一些优秀的社区解决方案没有渠道来展示和分享。
上层解决方案 XFlow 使用门槛高。 用 XFlow 搭建一个简单图编辑应用，学习成本高，出错调试困难。只有将图编辑组件做到像 antd 组件一样极简易用，并且能集成常见的配套组件，才能真正的降低开发者门槛。
文档结构对新手不够友好。 官网文档在第一版之后结构就没怎么变化。它的阅读路径和新手快速上手的学习顺序是不匹配的，并且 2 年多过去，我们有很多经验和总结也想分享出来。

发现并解决上述的问题，便是我们打造图编辑 2.0 的初衷。经过一年的研发，终于在今天正式和大家见面了。下面我们就一起看看图编辑 2.0 给我们带来了什么。

高性能的渲染引擎

X6 2.0 重新设计和实现了渲染架构，完全使用异步模式，充分利用异步渲染的特点，通过优先级调度、渲染任务合并、可视区域渲染等设计，无论是首屏还是交互，新的渲染引擎比通用的 SVG 渲染引擎快 5 倍以上，React 渲染模式首屏阻塞时长和 react-flow 不相上下。可以在这里进行体验。

开放的插件架构

X6 2.0 在尽量保持 API 不变动的前提下，对架构做了一次调整，将基础 SVG 图形库以及公共方法库沉下去，X6 只负责核心的渲染能力，这样我们可以直接依赖 x6-geometry 包处理 SVG 图形相关问题，比如获取连线和矩形的交点：

此外，2.0 中还通过插件的方式将扩展功能拆分出来，X6 包体积大小只有原来的 50%，使用方式也非常简单。

更重要的是我们希望通过插件机制，联合社区开发者一起将一些优秀的功能沉淀下来，可以畅想不久之后，X6 具有非常丰富的图编辑场景插件集合，它能大幅降低应用开发成本。

极简易用的解决方案

在 X6 2.0 发布之际， XFlow 2.0 也在紧锣密鼓的开发中，当前已经完成了底层核心能力的建设。在 2.0 版本中，摒弃了原来版本中所有的复杂概念，提供更贴合 React 组件的使用方式，我们可以像使用 antd 组件一样使用图编辑组件。接下来，还会内置常用的图编辑配套组件，并且提供 DAG、ER、流程图、组织架构图、血缘图等成熟解决方案。