AI和大資料下，前端技術將如何發展？

阿里技术發表於2020-10-30

AI和大資料下，前端技術將如何發展？

阿里妹導讀：2010年前後，各種大資料應用進入爆發期。如果說之前的Web應用更多地是在“產生”資料，那在2010年之後，如何更好地“展現”資料則被提上了新的高度，很多前端技術也隨之開啟了新的篇章。本文作者結合自己的實踐，從資料視覺化、軟體Web化和互動多樣化三個方面，分享大資料和人工智慧對前端技術發展的影響。

概覽

因為長期在做跟阿里雲飛天大資料平臺相關的前端工作，也一直在思考一個問題：“大資料的前端跟其他業務的前端有什麼不一樣”，具體來說就是，在大資料和人工智慧的浪潮下，到底對前端技術的發展帶來了什麼影響。

以團隊在負責在做的阿里雲飛天大資料平臺為例，從在 2009 年寫下第一行程式碼，現在已經是阿里大資料發展的第 11 個年頭。我是 2011 年加入阿里的，之後就一直在負責做大資料相關的前端工作，基本上參與了阿里絕大部分大資料發展的歷史程序。現在回頭看，很慶幸自己在一個歷史的變革時期入行，更有幸見證了一些劃時代意義的資料產品的誕生，以及它們對前端技術帶來的變革。

AI和大資料下，前端技術將如何發展？

阿里巴巴大資料平臺發展歷史

如果我們把 2010 年當做大資料 Web 產品應用的元年，會發現它是一個有趣的年份，為什麼這樣講？

回看前端的發展歷史，在 2005 年前後有一波大的技術變革，就是從 Web1.0 到 Web2.0 的過渡。

在此之前，前端更多地是做純內容的靜態展示，比如下圖中的那個時期的蘋果和雅虎的官網。

之後前端開始逐漸做成復互動的動態網頁，這其中一個重要的歷史性標誌就是 Gmail 對 Ajax 等新技術的應用。

AI和大資料下，前端技術將如何發展？

而在 2010 年前後，各種大資料應用進入一個爆發期間，阿里很多知名的應用基本都在那段時間展露頭角，現在回頭再來看那段歷史，這其中很大的一個原因，隨著網際網路的大發展，特別是 Web2.0 之後，資料的有了大爆發的增長。

下圖就很好地展現了這個趨勢，如果說之前的 Web 應用更多在“產生”資料階段，那在 2010 年之後如何更好的“展現”資料被提上了新的高度，很多前端技術也因之開啟了新的篇章。

AI和大資料下，前端技術將如何發展？

後面會結合自己的實踐，以三條主線來講講資料智慧浪潮對前端技術發展的影響，分別是資料視覺化，軟體泛 Web 化和互動多樣化。

資料視覺化

大資料浪潮下，最明顯的一個特徵就是資料的指數型增長，從上圖中就能看到這個趨勢，隨之而來的挑戰就是如何更形象地展現資料並進行互動展示，也就是我們通常講的“資料視覺化”。

回到技術本身，那資料視覺化對前端最大的影響應該是大大促進了 SVG，Canvas 和 WebGL 的發展。

AI和大資料下，前端技術將如何發展？

圖源：月影老師在《跟月影學視覺化》中講述 web 前端與視覺化的關係和不同

而這當中，除了瀏覽器底層技術的升級，在上層視覺化庫和視覺化應用也湧現了大量優秀的作品，其中佼佼者包括：

開源技術元件層面
AntV
Echarts
HighLights
...

重資料視覺化的產品
阿里雲大屏視覺化產品 DataV
阿里雲的 Quick BI
BI 分析工具 Tableau
特色領域的分析產品，比如 Plantir

在專業的細分領域，比如地理，安防，新零售，等領域中不同場景就有很多機會。具體比如在我們阿里雲的一站式大資料開發治理平臺的 DataWorks[1] 產品就有用於做流程編排的 DAG，圖分析[2]，資料的血緣分析等有意思的視覺化。

軟體 Web 化

大家最近應該注意到一個現象那就是：Web 系統做得越來越複雜，很多原先桌面端的復互動應用逐漸 “泛 Web 化”，甚至很多應用一上來就是 Web 的技術做第一版。

這裡說的泛 Web，從表現中又可以分為兩種：

一是直接用前端技術去做桌面軟體，其中標誌性事件就是 NW.js 和 Electron 在 2013 起步後的蓬勃發展；大家熟悉的 IDE VSCode 就是這當中的典型代表；阿里的桌面版釘釘 UI 層大量用到的 Web 的技術。

另外一種就是直接在 Web 上實現，比如大家最近能看到各種 Web'X' 系統（ Google Docs ）。

這背後推動力，一是隨著瀏覽器相關逐漸走向統一，用它的技術可以更便捷地實現跨端，另一個就是雲端計算大資料的興起，特別雲端的儲存和算力逐漸突破了原先的本地 PC 的效能邊界，因而重塑了原先人機互動的入口。

關於跨端的好處自不用多講，我想想重點講講第二點。要講這個邏輯，我又得簡單講講計算機的發展，從佔地 170 平方米的世界上第一臺通用計算機 “ENIAC”，到蘋果和微軟時代的個人 PC，移動時代的 iPhone 和 Android ，再到雲端計算時代的大型計算叢集。

對開發者工具而言，之前前很多軟體很多都是本地，因為它往往用本地 PC 的計算力就夠了，但大資料的場景下計算本地算力肯定是不夠的，它是依賴雲端的計算叢集（以我們阿里飛天大資料平臺而言，我們已經 10 萬臺計算叢集的規模），如何在使用者側用上更方便和靈活地使用這些算力就是我們前端重點要做的，而這是原先軟體的架構要不不能讓你做定製，要不定製的成本很高（有時候甚至超過了重新做一套的成本），因此很多系統會選擇重新起航做一版。

這其中，我們負責阿里雲的 Dataworks 中的兩大件：WebIDE 和 WebExcel ，就非常典型的例子。

Dataworks 從一開始就是根據雲原生的思路設計開發的，後端需要透過雲端計算提供強大的算力替換原先的本地算力，前端需要實現更精巧的架構設計來對應日益複雜的互動能力；具體到我們的應用，它包括但不限於：

架構層面
狀態管理
外掛化
...

復互動的元件
Editor
Form/Excel
Tree
Logivew
...

互動多樣化

最近今年在以資料驅動的人工智慧的大力發展下，特別在影像識別，語音識別，自然語言處理方面獲得了很大的突破，讓前端的新互動也獲得了長足的進步。

UX

在面向使用者（UX）產品由 GUI（Graphical User Interface）變成 XUI，使用者不僅可以用透過滑鼠鍵盤方式操作圖形介面，更可以透過面部表情，身體動作，語音互動等形式提供新的互動形態。

下圖就是在 2016 年左右，我們在阿里雲ET中一些人機對話，互動遊戲中的一些實踐，具體可以看這裡[3]。

這一輪的技術變革，有兩個大的宏觀的背景。

AI 技術的第三波潮起

隨著 2010 年前後，深度學習技術的成熟，計算力的提升，以及網際網路時代積累的大資料財富，人工智慧技術開始一段與以往大為不同的復興之路；分別在語音識別，影像識別，自然語言處理等相關技術上獲得根本的突破。

例如， 2012 年到 2015 年，在代表計算機智慧影像識別最前沿發展水平的 ImageNet 競賽（ILSVRC）中，參賽的人工智慧演算法在識別準確率上突飛猛進。2014 年，在識別圖片中的人、動物、車輛或其他常見物件時，基於深度學習的計算機程式超過了普通人類的肉眼識別準確率。

下圖就摘自李開復老師的《人工智慧》就體現了這個趨勢：

AI和大資料下，前端技術將如何發展？

WebRTC

對於前端來講，另一個必備條件就是 WebRTC （Web Real-Time Communication）技術的成熟，它於 2011 年 6 月 1 日開源並在 Google、Mozilla、Opera 支援下被納入全球資訊網聯盟的 W3C 推薦標準。透過它，前端可以便捷地處理影像，影片，語音等內容。大家目前看到很多有意思的互動底層就是依賴他。

AI和大資料下，前端技術將如何發展？