圖片來自：How the visualization has changed by Digital Twin Technology

前端為應用而生，人機交互技術是我們的生存之本，以應用為橋連接用戶和數字世界是我們的使命。但長期以來前端的生存空間被壓縮在 Web 領域，Digital Twin 這種新形態無疑將為我們打開一片新天地。Gartner 這份報告中還有兩項技術和前端緊密相關：

• Immersive technologies：Augmented Reality(AR)、Virtual Reality(VR)、Mixed Reality(MR) 等
• Smart Spaces：智慧城市、智能汽車、智能商店等

看到未來有三項戰略性技術居然和前端有關，著實讓人興奮不已。不過莫急，既然是戰略，也就意味著三五年內未必能開花結果。再仔細分析會發現：當下的前端技術遠不足以勝任這些領域，不由得讓人心憂。遠方的風景很美，但要成功抵達就需要早做準備。站在 201X 的末尾、互聯網下半場的開始，不妨先結合 Gartner 這份報告一起分析下：下一個 10 年前端技術的變革在哪裡、有哪些值得大力投入的方向？

2 回顧過去

「以史為鑒，可以知興替」，如果歷史是一組波，它過去的相位所形成的軌跡已足以預見未來。回顧 Web 技術的發展歷程，可以清晰地看到三類促使變革發生的關鍵因子：

• 引擎：有四大引擎顯得尤為重要：
• V8 ：不僅提升了 JS 的執行效率，助力 ES 規範落地，而且催生了 Node.js
• 瀏覽器引擎：以 Webkit、Blink、Chromium 為典型代表，瀏覽器的高速發展為 Web 的繁榮奠定了基礎
• Node.js ：大大拓展了前端的生存空間，以至於「Any application that can be written in JavaScript, will eventually be written in JavaScript.」
• Hybrid 容器：讓被 App 統治的移動互聯網時代也給 Web 開發留下了一席之地，小程序是典型代表
• 開發套件：語法、框架、工具、類庫在社區的推動下一直在蓬勃發展，優秀的開源項目燦若星河，前端生態也成為技術圈中最活躍的。雖然以 React 為核心的主流技術棧上手成本還比較高，也做不到讓開發人員只關心業務邏輯，但不可否認應用開發正在變簡單。有些類型的應用甚至做到了無需 Coding 通過專門的可視化搭建平台就可以完成，比如：門戶網站、營銷活動、問卷調查等。
• 分工模式：前後端分離、BFF(Backend For Frontend)、全棧、全端、大前端等分工模式的創新不僅提高了前端和其它工種的協作效率，也讓前端有機會承擔應用研發。由「前端 + 設計」組合形成的「體驗技術部」也成為很多業務的標配，部分前端團隊甚至發展為應用研發團隊並且擁有了自研產品。前端的影響圈已經從應用開發延展到了用戶體驗甚至產品設計，以人機交互為本的 體驗科技 也開始嶄露頭角。

這些變革因子的背後是兩條主線：

• 讓現有研發工作做得更好：開發套件是主要推手，一些分工模式（比如：前後端分離）的創新也歸屬這條線
• 開闢新戰場：引擎是主要推手，一些分工模式（比如：全棧）的創新也歸屬這條線上

這些變革之所以會發生，是因為有一個剛需：客戶端軟體的生產力水平滿足不了飛速增長的互聯網應用訴求，而前端技術恰好能提升應用研發的生產力水平。雖然移動互聯網的崛起曾一度讓前端缺少發力之處，但寄生於超級 App 上的 Hybrid 容器又讓前端煥發了生機，小程序更是將之推向了和 PC 時代同樣重要的地位。應用雖然琳琅滿目，但其形態演化也是有跡可循的，要講清楚得專門寫一篇文檔，這裡不過多展開，簡單介紹幾個我認為最重要的：

• UGC 內容的主流載體在變：文本 -> 圖片 -> 短視頻/直播，用戶創作內容的成本越來越低了
• 終端的主流交互方式在變：PC(鍵盤/滑鼠) -> 手機/PAD(觸屏/攝像頭/語音)，交互越來越自然、簡單了
• 信息獲取的主流方式在變：主動獲取 -> 被動推送 -> 智能推薦，非同步 -> 實時，信息已觸手可得

這一個剛需、兩條主線、三類因子也是我們預判未來的重要依據。

3 立足當下

在當下可實踐的新技術中，前端相關的有：AI、Serverless/FaaS、Blockchain、IOT、AR/VR/MR、智能硬體、可視化應用開發。不可否認，它們都是能在一些領域帶來顛覆性革命的技術，但是否會給前端帶來變革呢？讓我們詳細分析一下：

• AI：核心是雲，而且 AI 應用的典型特點是「重引擎輕 UI」，所以前端不在主賽道，只能在應用開發中使用它。目前市面上的 AI 應用，多數是大數據技術的延伸，離 Intelligence 還太遠。作為人類技術的巔峰之作，AI 應該在人類最難解決的問題上發揮價值，比如：語言文字、醫療、科研、教育、環境等。個人看好機器翻譯，打破語言界限將會是人類文明一次劃時代的變革。作為前端，我們也應該去關注這些基礎領域，並學習和掌握 AI 技術。
• Serverless/FaaS： 核心是雲，前端能做的是基於這種技術優化 Node.js 在服務端的 Runtime 和運維方式，把服務端複雜的技術細節屏蔽掉，讓 Node.js 開闢出來的服務端戰場可以延續，讓端上所需的數據能以簡潔、低成本的方式存儲和獲取。當然，也可以基於它優化現有的工具體系，讓開發越來越簡單。
• Blockchain：核心還是雲，和前端最相關的是 Decentralized Application(DApp)、IPFS(the InterPlanetary File System)。但 DApp 是一種新的應用形態，IPFS 改變的是網路協議。這兩者還處於非常早起的階段，發展形勢還不明朗，最好是靜觀其變，在合適的時候基於它們開發應用。
• IOT：核心是端，但關鍵技術是硬體及嵌入式系統，和前端交集較少，發揮空間很有限。除了在之上開發應用外，能看到的還有兩個潛在方向：把 Node.js、瀏覽器內核移植到 IOT 設備，打造一個可運行前端代碼的 Runtime；部分設備需要展示數據，可以基於圖形技術打造專屬渲染引擎。
• AR/VR/MR：核心是硬體及交互方式的變化，前端能參與到類庫及應用開發中。但受設備所限，目前還不是應用的主流，需要結合業務特點尋找切入點。
• 智能硬體：非常酷的一項技術，智能音箱算是當下最成功的應用，機器人則是這項技術的終極形態。其核心在 AI 、自動化控制及硬體上，給前端帶來的更多是應用形態和交互方式的升級。
• 可視化應用開發：不寫/少寫代碼就完成開發，這是前端的一個夙願，不可能完全達成，但在特定場景下是可以做到的。MFC、Dreamweaver、Flash、Microsoft 是該領域的先驅，Wix、Webflow、Bubble、Node-RED、FrameX、PowerApps 是當下值得關注的。其本質上仍是通過更好的開發套件提升應用生產效率，其最大競品是成品 SaaS，畢竟拿來就用比搭建更簡單，這就如同當需要一台電腦時多數人會選擇買成品而不是買配件組裝。

綜上來看，這些新技術的關鍵路徑和核心技術多數都不在前端，但我們能以使用者的身份參與進去，結合業務特點進行實踐，讓現有研發工作做得更好，讓應用的交互體驗更好。不過，還是有兩個前端強相關的技術有望帶來變革：

• IOT 上的 App Runtime ：其背後就是一個引擎，能讓前端應用運行在越來越多的新型終端上
• 可視化應用開發：有望把部分功能和應用的開發成本降到最小

4 一窺未來

應用形態日新月異，新技術風起雲湧，未來撲朔迷離...作為前端，我們究竟該往那些方向進行技術儲備呢？要找到有指導意義的技術路線圖，除了前文這些分析外，還得回到前端的本質中去探尋變革背後那些不變的東西，只有它們才能讓我們以不變應萬變，把技術轉換為生產力。

前端技術發展變化雖然很快，但從程序的視角來看，有兩個東西一直未變：

• 終端的形態和交互方式一直在變，其本質未變：
• 渲染數據：把數字世界的數據轉換成可被人感知的聲音或圖像，圖形技術、音頻技術、排版技術是核心
• 採集數據：把物理世界的數據、人腦中的知識轉換到數字世界，感測器技術、編輯器技術是核心
• 應用的類別和交互方式在變，但應用研發始終可以分解為四大部分：
• 雲：提供應用運行所需的數據，託管資源及可執行代碼
• 端：依託某個 App Runtime 提供 UI 給最終用戶
• 專項技術：業務是技術之本，脫離了業務，前端將是無根之萍，而每個業務都有其專業屬性和專項技術
• App Development Engine：也即「開發套件」，在普通工程師完全自主可控的範圍內提升生產力

結合以上分析以及我參與研發的語雀這個業務的特點，整理了這幅前端技術大圖以拋轉引玉：

圖中的每個區域都是一個不小的技術領域，要完全講清楚得專門寫文章，再加不少領域我只是略知一二，就不過多展開了，只簡單介紹幾個我認為比較重要的方向。

4.1 App Development Engine

當下的 Web 應用開發真的讓人揪心，學習曲線非常陡峭、新概念層出不窮、技術更新換代太快...應用複雜度並不比十年前高多少，但要學習和掌握的東西是之前的很多倍。身處產品研發這個戰場的前線，我們的裝備一點都不精良，大把精力耗在作戰無關的地方。生產力雖然在提升，但完全趕不上業務增長速度，App Developement Engine 這個提升生產力的關鍵因子在當下顯得尤為重要。

這個領域是創新最活躍的地方，從過去的發展歷程中能看到一些演進脈絡：

• 從 Engine 的角度看，演進的背後有兩種理念：
• Coding Less：通過強大的 SDK、框架和工具讓工程師更好地 Coding，專註在實現業務上
• No Coding：通過可視化 IDE 達成不寫代碼，通過拖拽、編寫配置文件就能完成應用開發
• 從開發者角度看，對 Engine 有三個期待：
• Productivity：必須能提升生產力，讓工程師可以高效地寫出健壯、易維護的代碼
• Simple & Stupid：KISS 原則 的核心，讓開發變簡單不僅能提升效率，還能讓更多人成為前端工程師
• Business More：研發資源非常寶貴，讓工程師專註在業務上是提升效能的關鍵

未來的演化也會遵循這些脈絡，Coding Less、No Coding 各有其應用場景，需要結合業務特點選擇側重點進行投入。但有一點我覺得是必然的：要開發優質應用，還得靠 Coding，不過寫的代碼會越來越少。No Coding 過於完美，應用場景有限，再加上有成品 SaaS 作為更好的替代品，我更傾向於用 Coding Less 模式去實現業務主線，把一些機械性、重複性、一次性的開發工作通過 No Coding 模式搞定。不過 No Coding 的一個分支 Visual Programming 非常值得關注，它在編程教育領域應用前景非常好，Scratch 、Blockly 是典型代表，而編程教育不僅蘊藏著巨大的商機，而且還會給我們帶來源源不斷的生力軍。

4.2 專項技術

專項技術會因業務不同而有所不同，這裡以語雀為例進行介紹

語雀致力於打通「知識」和「大腦」之間的雙向通道，背後是兩大關鍵技術：

• 編輯器：知識從大腦到數字世界的關鍵，語雀當下的文本編輯器、目錄編輯器還很初級
• 知識可視化：知識被人腦感知和理解的關鍵，給知識最佳的呈現形態有助於知識的理解和傳播

「數據可視化」和「數字孿生」在當下和語雀的關聯並不大，但在未來一定會和語雀緊密相關：

• 數據不僅是科學研究的基礎，其背後本身就蘊藏著知識，數據可視化可以讓這些知識更好地呈現給人們
• 數字孿生和知識結合蠻有想像空間的，比如：數字博物館、虛擬天文館、模擬生態系統

4.3 App Runtime

為什麼 App Rutime 會是變革的生力軍呢？因為歷史告訴我們：引擎的革新是開闢新戰場的核心驅動力，而 App Rutime 的核心恰好就是引擎及其之上的 SDK。在很長一段時間裡，前端技術得益並受限於瀏覽器引擎，廣大前端工程師只能在 App Development Engine 層發力。但時至今日，終端、應用形態的多樣性越來越強，移動互聯網已經打破瀏覽器一統天下的局面，不難看出瀏覽器技術的進化速度已不能滿足越來越多的新型終端和應用形態了。

可以大膽地預測在這個領域必然會有一場變革，變革有可能由瀏覽器進化產生，也有可能是一些新的引擎。已經能看到一些苗頭了：

• Office 以驚人的速度和 UI 一致性覆蓋了所有終端，猜測其背後有一套跨端 UI 方案
• 超級 App 打破了瀏覽器一統天下格局，小程序已是新的 Runtime
• Flutter 在探索的就是一個新的跨端 UI 開發方式
• Fuchsia 則是 Google 在探索的一個更大的局，從 OS 層面推動變革

更關鍵的是：這場變革是前端工程師有機會參與進去的，因為引擎的核心技術——圖形技術已經在數據可視化、H5 Game 的推動下成為不少團隊能熟練使用的技術。而應用類型的多樣性也會給一些垂直市場的 App Runtime 留下生存空間，這塊已經有一些成功案例，比如：遊戲領域的 Cocos 引擎 和 白鷺引擎、桌面軟體開發領域的 Electron，未來應該還會有更多。

4.4 領域服務

「領域服務」對前端來說可能比較陌生，它的背後是大名鼎鼎的 領域驅動設計（DDD:Domain-Driven Design），是應用在雲端部分的高度抽象，是系統中的穩定部分，這也正是前端總是改版而服務端介面卻可以不變的原因。服務端研發有這樣一條演化主線：解決編程語言層面的問題 -> 解決開發框架 & 類庫問題 -> 專註於解決業務問題，Java -> Spring -> DDD & Sofaware Architecure 就是典型案例。服務端之所以抗變能力這麼強，正式由於把主要精力放在了領域模型抽象和系統架構設計上。

為何領域服務在當下對前端也這麼重要，因為：

• 領域模型和領域服務是對業務的抽象，也是理解業務的直觀體現，好的領域模型能大大降低前端開發成本
• 領域設計的相關思想、理念可以借鑒到前端中，給前端帶來解決問題的新思路
• 前端處於研發的十字路口，信息面最廣，極有潛力協調產品、設計、服務端等工種共同梳理領域模型和業務鏈路

關於 DDD，可以從這三種非常容易理解和掌握的經典架構入門：

• Hexagonal Architecture(Ports and Adapters)
• CQRS - Command Query Responsibility Segregation
• The Clean Architecture

4.5 全功能型團隊

前端是工程師中離用戶最近的群體，很多前端心中都有一個產品夢，這個產品可能是一個技術產品也可能是一個用戶產品。很長一段時間內，我們疲於生存，只能忙裡偷閒折騰個小工具或者參加下 Hackathon。但隨著技術的演進，不少團隊已經具備了全棧能力，並承擔了 App Development Engine 中的一些平台的自主研發，讓這個夢近了一些。但要完整實現，光有全棧能力是遠遠不夠的，還需要一個包含技術、產品、設計、運營的全功能團隊才能達成，這種團隊不僅能提升協作效率、保證交付質量，還有可能催生出商業化產品。很多公司都在往大中台 + 小前台的方向發展，而支撐小前台的恰恰就是全功能型團隊。所以在時機成熟時可以組建全功能型團隊，逐步承接業務中人機交互部分的研發工作，讓「用戶體驗」能落到實處。

---

5 砥礪前行

前端技術的未來，沒有標準大圖，這份圖蘊含在每個業務中，更需要腳踏實地把未來親手打造出來，業界趨勢、新技術、新產品形態都是可以借力的因素。如果你已經有一個願意與之一起奮鬥和成長的業務，就可以結合業務定期推演適合它不同發展階段的技術大圖。如果還沒有，也不用急，打好技術基礎，做好手上的每個項目，結合業務在 Appliaction Development Engine 領域探索和實踐，逐步尋找真正想做的業務、想服務的用戶。

軟體研發是一項理論和實踐並重的技術，實踐尤為重要，因為最終我們是要寫出健壯運行的代碼給用戶用的。不管未來如何，在持續學習和實踐中強化對編程、技術、業務的理解才是根本。除了學習和實踐與業務最相關的技術外，建議按自己的專長和興趣把重點放在這些領域：

• 領域驅動設計：強化領域建模和系統設計能力，力爭懂業務、成為領域專家
• 軟體架構設計和軟體設計哲學：它們會為系統、框架、類庫注入靈魂，讓代碼有生命力
• 圖形技術：在應用、引擎兩層都有廣闊的場景，最關鍵的是圖形應用在未來的佔比一定會越來越高
• AI ：不必深入到底層，但需要掌握其使用，不妨先從 TensorFlow 開始

編程是一種修行，應用修行的產物，也是我們與世界交流的方式。

未來在哪裡並不重要，重要的是以空杯心態持續學習和實踐，用心寫下每行代碼。

原文首發語雀：https://www.yuque.com/zenany/up/the_future_frontend

歡迎來語雀沉澱你的專業知識，讓你對編程、技術、產品的理解和思考可以被更多人看見。

語雀會努力提供最好的服務，讓你安靜地創作、愉快地分享。

---

ref:

Digital Twin – The Machines』 Mind Origins of the Digital Twin Concept Top 10 Strategic Technology Trends for 2019Gartner發布 2019 年十大戰略性技術趨勢什麼是Digital Twin Dapp.com - Learn Everything About Decentralized Apps The General Theory of Decentralized Applications, DappsIPFS is the Distributed WebYou Do Not Need Blockchain: Eight Popular Use Cases And Why They Do Not Work

Cloud Programming Simplified: A Berkeley View on Serverless Computing

Knowledge Visualization Google Fuchsia release date, news and rumorsThe Kiss Principle Basics of the Unix PhilosophyPrinciples Wiki Demystifying the Hexagon Software Architecture Design 前端開發漫遊指南 體驗科技與好的社會
推薦閱讀：