造一个Vue(react,angular)和echarts的轮子，从纯技术角度看哪个难度更大？

Posted 2021-04-26 陶尘

首先，echarts不能和这三个比，这不公平。因为arv是一类轮子(数据驱动模板轮子)，echarts是另一种轮子(图表轮子)。

题主问的是哪个的纯技术难度更大，其实我认为可以等同于在问哪个轮子的复杂度更高，或者说一个正常的程序员理解哪个框架所花精力最多。

我觉得我们可以从这几个角度来看：

1. 代码行数---反映出代码的整体规模

2. 接口复杂度---反映出代码各个子程序间的配合难度

3. 实现复杂度---反映出代码各个子程序的实现难度

4. 是否易于维护、松散耦合、可扩展、易读、标准化...

我就粗略地从前三个角度比较一下吧~

代码行数

echart：源码打包后 74k+行

angular：仅core、compile打包 41K+行

react：仅react, react-dom打包 17k+行

vue:源码打包后 10k+行

接口复杂度

echart：大体分为chart、component、layout等14个主要模块，分别用来处理图表、组件、布局等

angular：大体分为core、compile、http、router等20个主要模块，分别用来处理数据绑定、编译模板、前后端通信、路由管理等

react：大体分为react, react-dom、events等12个主要模块，用来处理渲染数据、虚拟dom、事件等

vue：大体分为core、compile等6个主要模块，用来处理数据绑定以及响应式更新、编译模板等

模块数量越多，它们之间的配合情况就越复杂，可以说是指数级的增长，就好比一个20人的团队的沟通成本一定比6个人的团队沟通成本高很多一样。

实现复杂度

echart：主要难点在于如何实现一些数学和图形间的映射，比如处理向量、矩阵等相关算法

angular：除了实现数据驱动、组件化等还要关注前后端通信、路由等各种前端开发痛点

react：除了实现数据驱动、组件化等还要关注jsx编译、高阶组件等react独创问题

vue：主要难点就是实现响应式数据变更、编译模板、虚拟dom、组件化等(其实就是数据驱动和组件化...)

综上所述，实现这些轮子的难度应该是：

angular>react>>vue

但是有一个事实我们不能忽略：a和r的背后都是一个强大的团队和公司支撑着，而vue基本上是以一己之力搞出来的轮子。如果是个人造个轮子玩一玩的话，更适合做一个vue(比如moon)。如果是团队要根据自己的业务需求搞个轮子的话，建议参考react(比如preact)或者angular。(不过a目前国内用的人并没多少)

echarts应该去和d3、highcharts、chartjs等库比...