AI和大数据下，前端技术将如何发展？
概覽
因為長期在做跟阿里云飛天大數據平臺相關的前端工作，也一直在思考一個問題：“大數據的前端跟其他業務的前端有什么不一樣”，具體來說就是，在大數據和人工智能的浪潮下，到底對前端技術的發展帶來了什么影響。
以團隊在負責在做的阿里云飛天大數據平臺為例，從在 2009 年寫下第一行代碼，現在已經是阿里大數據發展的第 11 個年頭。我是 2011 年加入阿里的，之后就一直在負責做大數據相關的前端工作，基本上參與了阿里絕大部分大數據發展的歷史進程。現在回頭看，很慶幸自己在一個歷史的變革時期入行，更有幸見證了一些劃時代意義的數據產品的誕生，以及它們對前端技術帶來的變革。
如果我們把 2010 年當做大數據 Web 產品應用的元年，會發現它是一個有趣的年份，為什么這樣講？
回看前端的發展歷史，在 2005 年前后有一波大的技術變革，就是從 Web1.0 到 Web2.0 的過渡。
在此之前，前端更多地是做純內容的靜態展示，比如下圖中的那個時期的蘋果和雅虎的官網。
之后前端開始逐漸做成復交互的動態網頁，這其中一個重要的歷史性標志就是 Gmail 對 Ajax 等新技術的應用。
而在 2010 年前后，各種大數據應用進入一個爆發期間，阿里很多知名的應用基本都在那段時間展露頭角，現在回頭再來看那段歷史，這其中很大的一個原因，隨著互聯網的大發展，特別是 Web2.0 之后，數據的有了大爆發的增長。
下圖就很好地展現了這個趨勢，如果說之前的 Web 應用更多在“產生”數據階段，那在 2010 年之后如何更好的“展現”數據被提上了新的高度，很多前端技術也因之打開了新的篇章。
后面會結合自己的實踐，以三條主線來講講數據智能浪潮對前端技術發展的影響，分別是數據可視化，軟件泛 Web 化和交互多樣化。
數據可視化
大數據浪潮下，最明顯的一個特征就是數據的指數型增長，從上圖中就能看到這個趨勢，隨之而來的挑戰就是如何更形象地展現數據并進行交互展示，也就是我們通常講的“數據可視化”。
回到技術本身，那數據可視化對前端最大的影響應該是大大促進了 SVG，Canvas 和 WebGL 的發展。
而這當中，除了瀏覽器底層技術的升級，在上層可視化庫和可視化應用也涌現了大量優秀的作品，其中佼佼者包括：
- 開源技術組件層面
- AntV
- Echarts
- HighLights
- ...
- 重數據可視化的產品
- 阿里云大屏可視化產品 DataV
- 阿里云的 Quick BI
- BI 分析工具 Tebleau
- 特色領域的分析產品，比如 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 和 Andriod，再到云計算時代的大型計算集群。
對開發者工具而言，之前前很多軟件很多都是本地，因為它往往用本地 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 年，在識別圖片中的人、動物、車輛或其他常見對象時，基于深度學習的計算機程序超過了普通人類的肉眼識別準確率。
下圖就摘自李開復老師的《人工智能》就體現了這個趨勢：
WebRTC
對于前端來講，另一個必備條件就是 WebRTC （Web Real-Time Communication）技術的成熟，它于 2011 年 6 月 1 日開源并在 Google、Mozilla、Opera 支持下被納入萬維網聯盟的 W3C 推薦標準。通過它，前端可以便捷地處理圖像，視頻，語音等內容。大家目前看到很多有意思的交互底層就是依賴他。
DX
在面向前端開發者（DX）：智能化手段可以提升我們的研發效率和體驗，以我們阿里和螞蟻自身的實現看，Imgcook（D2C：Desgin to Code），代碼智能提示[4]，智能可視化 AVA[5]，前端機器學習 pipcook[6] 都是挺有意思的嘗試。
總結
以上就是我在實踐中關于數據浪潮下前端技術發展的一些思考。當然前端技術技術這幾年能獲得這么長足進步，除了數據智能，其他大趨勢（比如移動互聯，5G，IoT）也深刻影響了前端技術的走向，但這些就不在本文討論的范圍內，有機會再跟大家討論。
一直很喜歡吳軍在《智能時代》一書中提到的一個觀點：“2% 的人將控制未來，成為他們或者被淘汰”。期望各位前端同學都能在這波數據智能化的浪潮中找到自己的定位。
寫在最后
如果大家對這塊感興趣，也希望來阿里巴巴一起做大數據和人工智能相關的工作，隨時歡迎私信或者發簡歷給我：jifeng.zjd@taobao.com。大家一起合作，做件有意義的事情，團隊長期招人。
相關鏈接
[1]https://www.aliyun.com/product/bigdata/ide
[2]https://zhuanlan.zhihu.com/p/132393588
[3]https://www.zhihu.com/question/56560321/answer/203249193
[4]https://zhuanlan.zhihu.com/p/115377444
[5]https://github.com/antvis/AVA
[6]https://github.com/alibaba/pipcook
原文鏈接：https://developer.aliyun.com/article/776699?
版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。總結
以上是生活随笔為你收集整理的AI和大数据下，前端技术将如何发展？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一个方案提升Flutter内存利用率（干
- 下一篇： 如何接地气地接入微前端?