主讲人：王海虎，云智慧/智能研究院/算法工程经理

讲师简介：6年开发教训，主攻可视化方向、3d引擎、视线剖析方向。18年开始做可视化方向，从前端工程师做到开发经理；开源我的项目FlyFish的负责人（荣获21年优良开源我的项目奖）；清华Thulab的DWF我的项目开发者之一；AntV贡献者之一。

通过本篇内容你可取得：

  • 前端体系都有哪些技术栈？
  • 它们的关系是什么？
  • 都有什么用处？
  • 云智慧的前端技术架构？
  • 云智慧在产品中用到了哪些前端体系框架？

罕用技术体系概览

罕用的技术体系能够从这几个方面进行分类：

浏览器、可视化、Node、UI框架、数据流、代码品质、根底语言、根底工具等等，如下图：

云智慧的前端架构

云智慧前端技术框架介绍

云智慧罕用技术框架有React、Redux和Webpack。

React

React起源于Facebook的外部我的项目，过后市场上的MVC框架均不能满足Facebook的需要，于是决定本人写一套用来建设Instagram的网站，React被做进去之后发现很好用，并于2013年5月正式开源。

React是一个用于构建用户界面的JavaScript库，次要用于构建UI，很多人认为React是MVC中的V（视图），React领有较高的性能，代码逻辑简略，当初曾经成为最火的前端吗框架，大厂最爱。

React的长处：

React具备申明式开发、组件化、单向数据流、虚构IDOM、JSX等性能特点

Redux

redux是由Dan Abramov在2015年创立的科技术语，受2014年Facebok的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简略易学体积小在短时间内成为最热门的前端架构。

Redux对于JavaScript利用而言是一个可预测状态的容器，它是一个利用数据流框架，Redux最次要是用作利用状态的治理，解决简单组件通信。

Redux的实用于简单通信状况下，比如说这些情景：

  • 组件之间简单的交互
  • 某个状态须要在全局任何中央能够拿失去
  • 频繁交互、通信

对于简略的交互我的项目，应用redux的话，反而会变得更加简单，所以当交互领有肯定的复杂程度，应用redux能力最高效的解决问题。

Redux帮云智慧做了什么？

将共用的变量进行晋升，能够使得每一个组件都去拜访共用的变量

Webpack

webpack是一个前端资源加载/打包工具，它将依据模块的依赖关系进行动态剖析，而后将这些模块依照常识的规定生成对应的动态资源。

webpack能够帮忙咱们模块化打包、解决动态文件、代码转译、解决兼容等等....

云智慧前端罕用技术库介绍

Ant Design

antd是由蚂蚁金服体技术部保护的一套UI框架，基于Ant Design设计体系的React UI组件库，开箱即用的高质量React组件，目前与阿里、美团、滴滴、简书都已采纳，是目前较优良的一套UI框架。

它的劣势是开箱即用的高质量组件、对立UI组件、多主题、反对多端、社区宽泛

Echarts

Echarts是一个应用JS实现的开源可视化库，反对pc、挪动、底层依赖矢量图形库ZRender，交互丰盛，可高度个性化定制的数据可视化图表。

它的劣势就是你能想到的任何货色，都是能够去更改的。

antV/G6

antV是阿里开源的，蕴含的内容很多，G6是其中的一个小模块。G6是一个前端图可视化引擎，它提供了图的绘制、布局、剖析、交互、动画等根底的图可视化能力，旨在让关系变得通明、简略，让用户取得关系数据的insight。

G6的劣势是反对自定义的，能够反对多色，反对图片，API很全面，能够很快实现咱们的需要。和SVG相比，是只反对单色的，如果想做下图这样的色调不一样，是做不到的。

以下是咱们在一些产品和我的项目中的利用，感兴趣的敌人能够具体看下。

Three

Three.js 是一款运行在浏览器中的 3D 引擎，你能够用它创立各种三维场景，包含了摄影机、光影、材质等各种对象。你能够在它的主页上看到许多精彩的演示。不过，这款引擎还处在比拟不成熟的开发阶段，其不够丰盛的 API 以及匮乏的文档减少了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github下面。

Mapbox

Mapbox公司于2010年6月01日在美国成立。http://Mapbox.com是一个很棒的地图制作及分享网站,用户能够应用Mapbox Studio创立一个自定义、交互式的地图,而后能够将这些自定义的地图和数据服务你本人的网站(Web)或挪动应用程序(MobileWeb/Android/IOS)上。

Cesium

Cesium 是一个跨平台、跨浏览器的展现三维地球和地图的 javascript 库，应用WebGL 来进行硬件加速图形，应用时不须要任何插件反对，然而浏览器必须反对WebGL，Cesium是基于Apache2.0 许可的开源程序。它能够收费的用于商业和非商业用途。反对2D,2.5D,3D 模式的地图展现。能够绘制各种几何图形、高亮区域，反对导入图片，甚至3D模型等多种数据可视化展现。可用于动态数据可视化并提供良好的触摸反对，反对绝大多数的浏览器和mobile。Cesium还反对基于时间轴的动态数据展现。

写在最初

以上就是对于云智慧前端体系的分享，同时在前端技术的反对下，云智慧开源了一款可视化大屏编排平台——FlyFish来回馈社区，而本次内容的贡献者王海虎也是FlyFish我的项目负责人。

飞鱼提供丰盛的组件和利用模板库，可通过利落拽的模式实现数据可视化开发，零开发背景的用户也可实现数据可视化开发工作。同时，飞鱼也提供了灵便的拓展能力，反对组件开发、自定义函数与全局事件等配置，面向简单需要场景可能保障高效开发与交付。

值得一提的是，FlyFish在开源两周斩获中国开源云联盟2021优良开源我的项目奖，同时也成为了Gitee的最有价值开源的GVP我的项目。

欢送大家应用飞鱼，冀望与宽广开发者一起建设FlyFish！

飞鱼介绍：https://my.oschina.net/yunzhihui/blog/5286932

Github地址： https://github.com/CloudWise-OpenSource/FlyFish

Gitee地址： https://gitee.com/CloudWise/fly-fish

Demo地址： https://www.cloudwise.ai/flyFish.html#/