共计 2617 个字符，预计需要花费 7 分钟才能阅读完成。
主讲人：王海虎，云智慧 / 智能研究院 / 算法工程经理
讲师简介：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#/