一文带你快速拆解云智慧前端技术架构

2022 年 1 月 20 日
本文字数：2242 字
阅读完需：约 7 分钟

主讲人：王海虎，云智慧/智能研究院/算法工程经理
讲师简介：6 年开发经验，主攻可视化方向、3d 引擎、视野分析方向。18 年开始做可视化方向，从前端工程师做到开发经理；开源项目 FlyFish 的负责人（荣获 21 年优秀开源项目奖）；清华 Thulab 的 DWF 项目开发者之一；AntV 贡献者之一。

通过本篇内容你可获得：

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

常用技术体系概览

常用的技术体系可以从这几个方面进行分类：

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

云智慧的前端架构

不支持在 Docs 外粘贴 block

云智慧前端技术框架介绍

云智慧常用技术框架有 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 还支持基于时间轴的动态数据展示。