技術乾貨 | 一文帶你快速拆解雲智慧前端技術架構

語言: CN / TW / HK

主講人:王海虎,雲智慧/智慧研究院/演算法工程經理

講師簡介: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#/