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

newbyvector
910 阅读7分钟

导读

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、流程图、组织架构图、血缘图等成熟解决方案。

新手友好的文档

秉承着文档应该能解决 90% 以上日常遇到的问题的原则，我们正在重写 X6 2.0 的文档，当前已经完成了教程部分的编写，接下来我们还会持续重构 API 文档以及示例，希望新的文档能够让大家低成本、高效率的完成项目。新文档相比旧文档有以下改进：

  • 基础教程内容优化，更适合新手入门
  • 精简 API 文档
  • 优化交互式示例
  • 补充常见问题以及最佳实践

结语

今年持续在做提升开发者体验的事情，是因为我们认为对于开源软件来说，开发者是否选择使用是非常重要的。只有让开发者使用起来顺心，不用花费过多的精力去学习、去开发，就能解决业务中的问题，才会被市场接纳并喜爱，才能有更好的「远芳」。

附录

AntV 发布详情

  • 主文
  • 技术专文

AVA：见字如晤，展信舒颜

  • 设计专文
  • 学海无涯

历史上的 AntV

品牌联名文章

AntV 开源项目

欢迎关注我们的 GitHub 项目，点亮 star 了解我们的实时动态，期待 PR：

avatar
文章
阅读
粉丝