一文带你快速拆解云智慧前端技术架构
主讲人:王海虎,云智慧/智能研究院/算法工程经理
讲师简介: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!
飞鱼介绍:数据可视化很难?推荐一款免费的开源软件! - 云智慧技术社区 - OSCHINA - 中文开源技术交流社区
Github地址: GitHub - CloudWise-OpenSource/FlyFish: FlyFish
Gitee地址: FlyFish: 飞鱼(FlyFish)是一个数据可视化编码平台。通过简易的方式快速创建数据模型,通过拖拉拽的形式,快速生成一套数据可视化解决方案。
Demo地址: 云智慧 AIOPS社区
一文带你快速拆解云智慧前端技术架构相关推荐
- 云小课|云小课带你快速掌握云数据迁移CDM
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:欢迎来到云数据迁移 ...
- 带你快速了解PROFIBUS总线接口技术
带你快速了解PROFIBUS总线接口技术 一.概述 1.PROFIBUS是一种用于工厂自动化车间级监控和现场设备层数据通信与控制的现场总线技术.可实现现场设备层到车间级监控的分散式数字控制和现场通信网 ...
- 一文带你快速入门【哈希表】
最近开始学习哈希表,为此特写一遍文章介绍一下哈希表,带大家快速入门哈希表
- 热度3年猛增20倍,Serverless云开发的技术架构全解析
『 作为一个不断发展的新兴技术, Serverless 热度的制高点已然到来.』 或许,Google Trends 所显示的 3 年猛增 20 倍的" Serverless " 搜 ...
- 一群阿里人如何用 10 年自研洛神云网络平台?技术架构演进全揭秘!
[CSDN 编者按]逍遥子曾说,对阿里人来说「打仗是最好的团建,参加过双 11 的叫战友」,同样,参加过多次双 11 考验的系统技术都会成为真正意义上的基础设施,阿里云飞天系统的云网络平台洛神就是如此 ...
- UPYUN CTO 黄慧攀:云 CDN 的技术架构演进之路
传统的 CDN 从 2000 年诞生起,一直到 2010 年都还停留在一个阶段,技术并没有得到很大的提升,有的还是 Squid ,一般在全国有 30 – 40 个节点.因为在早几年移动还没发展起来,电 ...
- 一文带你了解华为云DevCloud为何能全面领跑中国DevOps云服务市场
近日,国际权威调研机构IDC发布了<IDC MarketScape:中国DevOps云服务市场2019厂商评估>报告,该报告从战略和能力两个维度对国内主流DevOps云厂商进行了评估,报告 ...
- 网关是什么,一文带你快速入门腾讯技术工程
今天来开门见山地讲讲网关是一个怎么样的组件,网关在做什么事情.网关这个词其实到处都在用,它可以工作在硬件层面,也可以工作在网络层,还可以工作在应用层. 网关快速入门 网关在做什么? 我们今天讲的实际上 ...
- 【微信小程序】一文带你读懂云开发
前言 云开发(CloudBase)是一个已经存在了很多年的概念,但在过去未能真正成为主流.然而,由于云和软件即服务的宏观趋势的结合,以及技术的进步,如容器技术 Docker 和 Kubernetes, ...
最新文章
- 解除微信回调的Activity必须在包名.wxapi下的限制
- STM32 基础系列教程 0 - CubeMX 下载与安装
- 老鸟程序员才知道的40个小技巧
- 45.UITableView去除分割线
- Java中的PriorityQueue优先级队列
- docker toolbox在win7下的安装
- Office 365系列之八:配置和体验Exchange和Lync
- c++获得cpu厂商_【C++】WMI获取系统硬件信息(CPU/DISK/NetWork etc)
- phpFreeChat 2.0.0 发布,Web 聊天室
- 最小二乘方法和RANSAC的改进算法PROSAC和LMEDS
- Jumony(二)jQuery的设计艺术和选择器
- 动态ARP检测,引发上网断断续续
- 连续变量的描述统计与SPSS实现
- 80x86段寻址的原因
- 轻松获取windows10锁屏壁纸
- 第三方支付分类方式综述
- 惠普linux进入bios设置u盘启动,hp惠普笔记本进入bios设置u盘启动装系统的方法步骤详细教程 - 系统家园...
- Java 8除不尽的数
- Linux ZRAM的简单介绍
- 微型计算机cpu主要有两部分构成 他们是,【单选题】微型计算机的CPU主要由两部分构成,它们是( )
A. 内存和控制器
B. 内存和外存
C. 运算器和控制器
D. 外存和运算器...