主讲人：王海虎云智/智能研究院/算法工程讲师介绍：6年开发经验，专注于可视化、3D引擎和视觉分析。18年开始做可视化，从前端工程师到开发经理；开源项目FlyFish负责人（获得21年杰出开源项目奖）；清华大学DWF项目开发者之一；AntV贡献者之一。通过本文，你可以得到：前端系统有哪些技术栈？他们是什么关系？他们有什么用？云智慧的前端技术架构？CloudWisdom在其产品中使用了哪些前端系统框架？常用技术体系概述常用的技术体系可以从这几个方面进行分类：浏览器、可视化、Node、UI框架、数据流、代码质量、基础语言、基础工具等，如下图：云智慧的前台-端架构云智能前端技术框架介绍云智能常用技术框架包括React、Redux和Webpack。ReactReact起源于Facebook的内部项目。当时市面上的MVC框架都不能满足Facebook的需求，所以他们决定自己写一套来搭建Instagram的网站。React做出来后，发现很好用，2013年5月正式开源。React是一个用于构建用户界面的JavaScript库。它主要用于构建UI。很多人认为React就是MVC中的V（视图）。React具有高性能和简单的代码逻辑。现在已经成为流行的前端了吗？车架，大厂的最爱。React的优点：React具有声明式开发、组件化、单向数据流、虚拟IDOM、JSX等功能特性。Elm启发。很快，Redux以其易学、体积小的特点，在短时间内成为了流行的前端架构。Redux是JavaScript应用程序的可预测状态容器。它是一个应用程序数据流框架。Redux主要用于应用状态管理和复杂组件通信。Redux适用于复杂的通信情况，例如这些情况：组件之间复杂交互的某种状态需要在世界任何地方都可用。频繁的交互和沟通对于简单的交互项目，使用redux会变得更加复杂，所以当交互具有一定的复杂度时，可以使用redux来高效解决问题。Redux为云智慧做了什么？升级共享变量允许每个组件访问共享变量。Webpack是一个前端资源加载/打包工具。它会根据模块依赖关系进行静态分析，然后根据知识规则生成相应的模块。静态资源。webpack可以帮助我们模块化打包、处理静态文件、代码翻译、解决兼容性等。云智慧前端常用技术库介绍AntDesignantd是蚂蚁金服技术部维护的一套UI框架，基于AntDesign的设计系统的ReactUI组件库，开箱即用的优质React组件，目前已被阿里、美团、滴滴、简书采用。目前是一套优秀的UI框架。其优势是开箱即用的优质组件、统一的UI组件、多主题、多终端支持、广泛的社区、高度可定制的数据可视化图表。它的优点是你能想到的任何东西都可以改变。antV/G6antV是阿里开源的，内容非常丰富。G6是它的一个小模块。G6是一个前端图形可视化引擎，提供图形绘制、布局、分析、交互、动画等基本的图形可视化能力。它旨在使关系透明和简单，并允许用户深入了解关系数据。G6的优点是支持定制、多色、图片。API非常全面，可以快速实现我们的需求。与SVG相比，它只支持单色。如果你想像下图那样做出不同的颜色，你是做不到的。以下是我们在部分产品和项目中的应用，有兴趣的朋友可以详细看看。ThreeThree.js是一个在浏览器中运行的3D引擎。您可以使用它来创建各种3D场景，包括相机、光影和材质等各种对象。你可以在它的主页上看到很多很棒的演示。不过，这款发动机还处于一个相对不成熟的开发阶段。其API不足，文档缺乏，增加了初学者的学习难度（尤其是文档缺乏）。three.js的代码托管在github上。MapboxMapbox于2010年6月1日在美国成立。http://Mapbox.com是一个很棒的地图制作和分享网站，用户可以使用MapboxStudio创建自定义的交互式地图，然后这些自定义的地图和数据可以在您自己的网站(Web)或移动应用程序(移动网络/Android/IOS）。CesiumCesium是一个跨平台、跨浏览器的javascript库，用于显示3D地球和地图。它使用WebGL进行硬件加速图形。它不需要任何插件支持，但浏览器必须支持WebGL。Cesium是基于Apache2.0授权的开源程序。它可免费用于商业和非商业用途。支持2D、2.5D、3D地图显示。可以绘制各种几何图形和高亮区域，支持导入图片，甚至3D模型等数据可视化展示。它可用于动态数据可视化并提供良好的触摸支持，支持大多数浏览器和移动设备。Cesium还支持基于时间轴的动态数据展示。上面写在最后的是云智慧前端系统的分享。同时，在前端技术的支持下，云智慧开源了一个可视化大屏排版平台——FlyFish回馈社区，该内容的贡献者王海虎也是FlyFish项目主要的。飞鱼提供了丰富的组件库和应用模板，可以通过拖拽的方式完成数据可视化开发，零开发背景的用户也可以完成数据可视化开发。同时，飞鱼还提供了灵活的扩展能力，支持组件化开发、自定义功能、全局事件配置，能够保障复杂需求场景的高效开发和交付。值得一提的是，FlyFish在开源的两周内获得了中国开源云联盟2021年度优秀开源项目奖，也成为了Gitee最具价值的开源GVP项目。欢迎大家使用Flyfish，期待与开发者一起打造FlyFish！飞鱼介绍：https://my.oschina.net/yunzhihui/blog/5286932Github地址：https://github.com/CloudWise-OpenSource/FlyFishGitee地址：https://gitee.com/CloudWise/fly-fishDemo地址:https://www.cloudwise.ai/flyFish.html#/
