前端將來之路在何方？

近期學到一個詞：Digital Twin(數字孿生)，簡單來說就是在計算機世界給現實世界的物體（飛船/城市）、系統（電力/交通）創建數字化鏡像，讓數字世界和物理世界更好地交互，數字大屏也能夠算這種技術一種應用場景。這個概念由 Dr.Michael Grieves 於 2002 年提出，隨着 IOT、AI、圖形技術、工業 4.0 的飛速發展，應用前景愈來愈廣闊。Google 一下 就會發現：NASA、GE、Microsoft、SAP、IBM 等巨頭早已佈局和應用這項技術，它仍是 Gartner Top 10 Strategic Technology Trends for 2019 中的一項。

最後，若是你們若是在自學遇到困難，想找一個前端的學習環境，能夠加入咱們的前端學習圈，點擊我加入吧，會節約不少時間，減小不少在學習中遇到的難題。

前端將來之路在何方？

圖片來自：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 年前端技術的變革在哪裏、有哪些值得大力投入的方向？

回顧過去

「以史爲鑑，能夠知興替」，若是歷史是一組波，它過去的相位所造成的軌跡已足以預見將來。回顧 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(觸屏/攝像頭/語音)，交互愈來愈天然、簡單了
信息獲取的主流方式在變：主動獲取 -> 被動推送 -> 智能推薦，異步 -> 實時，信息已觸手可得

這一個剛需、兩條主線、三類因子也是咱們預判將來的重要依據。
立足當下

在當下可實踐的新技術中，前端相關的有：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 ：其背後就是一個引擎，能讓前端應用運行在愈來愈多的新型終端上
可視化應用開發：有望把部分功能和應用的開發成本降到最小
一窺將來

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

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

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

前端將來之路在何方？

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

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 Coing 模式搞定。不過 No Coding 的一個分支 Visual Programming 很是值得關注，它在編程教育領域應用前景很是好，Scratch 、Blockly 是典型表明，而編程教育不只蘊藏着巨大的商機，並且還會給咱們帶來源源不斷的生力軍。
語雀專項技術

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

編輯器：知識從大腦到數字世界的關鍵，語雀當下的文本編輯器、目錄編輯器還很初級
知識可視化：知識被人腦感知和理解的關鍵，給知識最佳的呈現形態有助於知識的理解和傳播
「數據可視化」和「數字孿生」在當下和語雀的關聯並不大，但在將來必定會和語雀緊密相關：

數據不只是科學研究的基礎，其背後自己就蘊藏着知識，數據可視化可讓這些知識更好地呈現給人們

數字孿生和知識結合蠻有想象空間的，好比：數字博物館、虛擬天文館、仿真生態系統

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，將來應該還會有更多。

領域服務

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

爲什麼領域服務在當下對前端也這麼重要，由於：

領域模型和領域服務是對業務的抽象，也是理解業務的直觀體現，好的領域模型能大大下降前端開發成本
領域設計的相關思想、理念能夠借鑑到前端中，給前端帶來解決問題的新思路
前端處於研發的十字路口，信息面最廣，極有潛力協調產品、設計、服務端等工種共同梳理領域模型和業務鏈路
關於 DDD，能夠從這三種很是容易理解和掌握的經典架構入門：

Hexagonal Architecture(Ports and Adapters)
CQRS - Command Query Responsibility Segregation
The Clean Architecture
全功能型團隊

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

砥礪前行

前端將來之路在何方？

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

軟件研發是一項理論和實踐並重的技術，實踐尤其重要，由於最終咱們是要寫出健壯運行的代碼給用戶用的。無論將來如何，在持續學習和實踐中強化對編程、技術、業務的理解纔是根本。除了學習和實踐與業務最相關的技術外，建議按本身的專長和興趣把重點放在這些領域：

領域驅動設計：強化領域建模和系統設計能力，力爭懂業務、成爲領域專家
軟件架構設計和軟件設計哲學：它們會爲系統、框架、類庫注入靈魂，讓代碼有生命力
圖形技術：在應用、引擎兩層都有廣闊的場景，最關鍵的是圖形應用在將來的佔比必定會愈來愈高
AI ：沒必要深刻到底層，但須要掌握其使用，不妨先從 TensorFlow 開始
編程是一種修行，應用修行的產物，也是咱們與世界交流的方式。

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