DataMaleon组件化开发实践 | StartDT Tech Lab 14
写在前面
这是奇点云全新技术专栏「StartDT Tech Lab」的第14期。
在这里，我们聚焦数据技术，分享方法论与实战。一线的项目经历，丰富的实践经验，真实的总结体会…滑到文末，可以看到我们的往期内容。
本篇由奇点云前端架构师「怒江」带来：
作者：怒江
阅读时间：约8分钟
前情提要
什么是DataMaleon？
DataMaleon是奇点云的一款图形化、零编码的数据可视化产品，能帮助企业快速搭建专业水准的数据可视化应用，低成本实现数据可视化呈现、实时监控、智慧决策、数据分析等功能。简单高效、炫酷生动，满足多元场景展示需求，用视觉语言展现数据美学。
今天介绍的组件化开发，则是数据可视化产品中不可缺少的重要环节。
什么是组件化？
组件化最早可以追溯到工业革命时期，福特创造了流水线生产方式：福特将汽车分解成零部件，再把零部件模块化组装。这一创举极大地提高了生产效率。
在前端开发领域，随着各种优秀的前端框架的出现和前后端分离的开发模式的成功，前端组件化也逐渐成为一种主流和共识，它不仅提高了前端的开发效率，同时也降低了维护成本。
前端组件化会以嵌套的组件树的形式来组织应用，将页面上各个独立部分，例如：头部、导航、内容区、侧边栏、底部等视为独立组件，每个组件又包含了其他的像导航链接、博文之类的组件，最后根据内容需要展示不同的组件即可组成完整的页面。
前端组件化开发经过多年的发展，不管是服务端渲染，还是前端SPA，都有了比较成熟的组件化开发的方案。Ant Design、Element UI、iView 等优秀前端组件库的流行，更是将组件化开发的优势发挥到了极致。
可视化开发的痛点
数据可视化的核心和基础是可视化组件，包括图表、地图、媒体、文字、素材、交互等多种类型。
在大量的项目实践中，我们发现了可视化开发存在一些痛点，总结如下：
痛点一
开发门槛高
可视化组件具有可视化、图形化、非原子性等特点。当现有组件不能满足需求时，从零开发一个组件要求开发人员具备数据分析、图形学、可视化、设计学等多种专业知识，需要投入大量的精力。开发门槛高、涉及专业广、投入资源大，是数据可视化开发面临的最大痛点之一。
痛点二
视觉效果不统一
数据可视化是数据到视觉元素的映射，可视化组件的图形元素是表现视觉特征的必备元素，通过图形类别、图形大小、颜色、透明度等视觉通道来表现数据属性的定量信息。
在可视化组件的自定义开发过程中，很难从全局、系列等多个层级对数据图形样式进行统一，从而导致整个数据可视化项目的呈现效果差强人意，自定义的可视化组件不可复用等问题。
痛点三
标准化开发难
不同于普通的 Web 组件，可视化组件在实际项目中往往需要不同层度的定制开发。由于图表的构成元素较多，包含图例、标注、坐标轴、提示信息等，相同类型的图表使用不同的图表元素和属性配置，便可具有截然不同的表现形式，天然具有多样性。因此，可视化组件很难通过前端组件库的开发模式来进行标准化开发。
DataMaleon 组件化实践
面对复杂的图表、繁琐的配置、炫酷的视觉效果，以及客户多变的需求，如何在保证质量的情况下做到可视化组件的高效开发？
01
建立图表知识库
首先，我们通过建立图表知识库，解决可视化领域中概念、术语不统一问题，降低可视化开发过程中的沟通成本和开发门槛。
图表知识库是一套包含图表构成、图表用法以及图表知识结构的可视化体系。
· 图表构成决定了图表所属的类别、分析目的、形状以及视觉通道，每个图表都是由一系列独立的图形语法元素组合而成。
· 图表用法包含了基于经验总结的关于可视化图表的各种基本知识，以及在不同场景下的使用建议，让可视化开发的图表筛选和使用变得非常简单。
· 图表知识结构是对图表构成和图表用法的语义化描述，是连接设计、开发与图表组件库的纽带，它的形式基于JSON。每个图表的知识结构类似这样：
02
构建图表组件库
为了降低可视化组件的编码难度，同时满足不同场景的定制开发需求，我们采用分层架构对可视化图表库进行了二次封装，从而支持通过组件的形式组合出无数种图表。
其中，图表库提供原生的API方法供开发者使用，适用于高度定制开发场景。图形元素和图形组件是对 graphic 绘图方法的封装，而基础组件则是以图表构成元素为视角的更高维度的封装。
使用基础组件，开发者可以像搭积木一样快速组合出任意图表组件。以条形图为例：
同时，我们还在基础组件层完成了可视化主题定制，保证了所有自定义组件的样式和视觉效果的统一。
03
探索组件开发模式
最后，我们还需要解决可视化组件的开发模式问题，打通从生产到消费的前端开发链路。在这个过程中，组件化依然是解决关键问题的重要思想。
为了同时满足可视化组件的统一管理和每个组件可独立发布的需求，我们采用单体式仓库（monorepo）管理项目代码，即在一个项目仓库（repo）中管理多个模块或包（package），每个 package 对应一个可视化组件。
相比传统的 monolith 和 multirepo 模式，monorepo 模式在组件的统一构建、版本管理等方面更具优势。
随着可视化组件数量的增多，项目的维护成本会越来越高，我们引入 lerna 作为流程管理工具来优化维护 monorepo 项目的工作流，解决多个组件互相依赖，且发布需要手动维护的问题。
至此，通过构建图表知识库、封装图表组件库，以及使用 monorepo + lerna 的组件开发模式，我们解决了可视化开发中遇到的难点和痛点。最后，我们的DataMaleon组件化开发架构如图：
已上线的可视化组件，可以在DataMaleon平台通过拖拽、配置的方式快速使用：
