十大新兴前端图表框架大盘点

前端图表框架（一）ramda

近几年来，前端面试的难度上了一个档次，我们前端工程师要刷 LeetCode， 要手写一大堆工具函数：函数节流、防抖、数组去重、扁平化，对象深拷贝等。

这些方法大家可以从网上搜，但代码质量可能不太好，可能面试官不认可你的实现，因此更好的学习方法是从 Underscore.js 抽取出来学习。

国外开发者 Underscore.js ，推出另一个高性能版本叫 Lodash，但是方法间互相调用，盘根错节，使用起来较麻烦。

自从 Redux 将函数式编程带火后， Underscore.js 又有一个函数式版本，就是 ramda，其代码清晰易懂，且可以让我们学到更多函数式编程技巧。

前端图表框架（二）WeUI

WeUI原来是微信官方团队为微信Web开发打造的一个样式库，类似于 Bootstrap，但它只是运行于浏览器端。微信小程序在CSS与浏览器有许多出入，如不能使用标签选择器、ID选择器与众多伪类，因此在微信小程序火起来后，官方又将这个库兼容到小程序上。

前端图表框架（三）ColorUI

ColorUI 是小程序组件库，但不是纯样式库。由于WeUI有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。

 ColorUI 的两大特点：

1、颜色鲜艳饱满；

2、基于uni-app 开发，可运行于多种小程序中。未来跨端开发将成为前端的主流工作方式，打通更多分销渠道是必然趋势。而跨端转译框架只用编写一份代码，就能跑N个平台，能变相提高产能，降低成本，深得大家的好评。

前端图表框架（四）Omi

腾讯出品的跨终端框架 Omi，它最初只是个模仿 Vue.js 的迷你框架。后来经过不断地技术升级，现在能支持微信小程序和 QQ 小程序，并且能与腾讯其他前端库相组合，可适用于更多场合（SVG、Markdown、SSR等）。

前端图表框架（五）Taro

与 Omi 的演化路线相反，京东出品的 Taro 一开始便支持跨平台。

Taro 是第二代转译框架，之前许多小程序框架都是走 vue 路线，在运行时处理小程序兼容问题。

但随着越来越多的小程序推出，如果要兼容3～5种小程序，前端工程师要在业务代码中加许多 if-else 分支，这些在当前平台上无效的代码也无法删除，徒然浪费资源。

Taro 使用 React 技术栈开发小程序，在编译期转换代码，删掉非本平台的代码，因此生成的代码更精练。

前端图表框架（六）Flutter

Flutter 是这两年来广受开发者热议的移动端跨平台开发工具。并且经过咸鱼与毒这两大标杆式 App 的引导，国内越来越多人投入 Flutter的开发行列。

Flutter 的优点:

1、跨全平台：移动端的两大平台、PC 的三大操作系统以及 Web 端。

2、性能卓越。Flutter 和其他跨平台不同的是，它并不走 JavaScript 引擎，而是通过自己的 Flutter Engine，然后通过 skia 绘制 UI 框架。skia是C++写的类似canvas 2D图形库。另外，在渲染时，Flutter 借鉴 React 的虚拟 DOM 思想，在 UI 进行变化后，会进行 diff 算法。3、开发高效率。Flutter 在开发时可以通过热重载，实现所见即所得的效果。用过 webpack 开发页面的同学都知道， 在编辑器中保存后，界面立马就能看到变化。Flutter 也是这样，当 App 在虚拟容器中或者真机设备中调试，保存后，App 会立刻响应, 节省了大量时间。

前端图表框架（七）SpriteJS

SpriteJS 是由 360 奇舞团推出的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，是跨平台的 2D 绘图对象模型库，它能够支持 Web、Node.js、桌面应用和微信小程序的图形绘制和实现各种动画效果。对比业界有名的 ECharts，前者是侧重于企业级的图表绘制，SpriteJS 则倾向于动画与游戏。

前端图表框架（八）NestJS

可能大家听说过 Next.js，这是在 React 团队早些年没推出后端渲染框架时，由第三方推出的 Node.js 框架。大家也可能听说过 Nuxt.js，基于 Vue.js 的轻量级应用框架。

而NestJS可划归为AngularJS社区的。它有 TypeScript、DI、DTO、Decorator，并提供了全套解决方案，包含了认证、数据库、上传文件、验证、缓存、序列化、记录器、安全、配置、压缩、请求等开箱即用的技术。不再像 KoaJS、Express 那样让用户自己找中间件。因此也有人称之为 Node.js 的 Spring。

从趋势来看， NestJS 在 GitHub 的关注人数仅用一年就超越了 Egg.js。目前仍在持续高速增长中，可见 Node.js 也厌恶了 KoaJS、Express 这样的迷你框架，在开发大型应用，必须有 Spring 级别的框架。

前端图表框架（九）DoKit

DoKit，全称为DoraemonKit， 是滴滴推出一个跨平台的功能集合面板，有点像 Windows 下的超级兔子或 360 管家。

前端图表框架（十）imgcook

imgcook 是阿里出品的人工智能切图工具，但它不只是切图。我们可以上传 Sketch、PSD、静态图片等形式的视觉稿作，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。在对设计稿轻约束的前提下实现高度还原，释放前端生产力，助力前端与设计师高效协作，让前端工程师关注更具挑战性的事情。

可能有人会质疑它生成的代码可读性，会拿之前的 Dreamweave 做比较，但是不要忘记，这是一个人工智能平台，它会不断进化的，机器的进化速度是人工的 1000 倍以上，这是对“页面仔”的暴击，因此前端工程师努力将自己转移到工具链开发这样高技术含量的活儿上。