摘要：數(shù)據(jù)浪潮之間的前端工程師十年來，波瀾壯闊的移動(dòng)互聯(lián)網(wǎng)浪潮促進(jìn)了技術(shù)的迅猛發(fā)展，隨著瀏覽器性能網(wǎng)絡(luò)帶寬等基礎(chǔ)設(shè)施的提升，也能夠承載起包含復(fù)雜交互可視化計(jì)算邏輯需求的富客戶端應(yīng)用。

本文是架構(gòu)師 2018-10 月刊的卷首語，歸納于自筆者的技術(shù)之路系列文章，也是對(duì) 現(xiàn)代 Web 開發(fā)基礎(chǔ)與工程實(shí)踐 中的內(nèi)容提點(diǎn)總結(jié)。

十年來，波瀾壯闊的移動(dòng)互聯(lián)網(wǎng)浪潮促進(jìn)了 Web 技術(shù)的迅猛發(fā)展，隨著瀏覽器性能、網(wǎng)絡(luò)帶寬等基礎(chǔ)設(shè)施的提升，Web 也能夠承載起包含復(fù)雜交互、可視化、計(jì)算邏輯需求的富客戶端應(yīng)用。同時(shí) RN, Weex, 小程序?yàn)榇淼幕旌鲜介_發(fā)日趨成為與 Android、iOS 原生開發(fā)并肩的開發(fā)模式之一；而 VR, AR, IoT 等新的交互方式或者媒介也正步入消費(fèi)級(jí)市場，原本前端之間的隔閡逐漸消亡，我們慢慢進(jìn)入了大前端的時(shí)代。筆者認(rèn)為大前端不僅僅是橫向地指泛 GUI 的接入端，縱向來看基于 Node.js 的全棧開發(fā)、中臺(tái)化背景下的 BFF 模式，微前端架構(gòu)等也是大前端的有機(jī)組成，也給予了前端工程師更廣闊地舞臺(tái)。

繁多的互聯(lián)網(wǎng)接入端也催生了海量數(shù)據(jù)的產(chǎn)生與富集，開啟了所謂的 DT 時(shí)代；我們利用云計(jì)算、人工智能、深度學(xué)習(xí)等手段分析數(shù)據(jù)、利用數(shù)據(jù)，將數(shù)據(jù)作為燃料，賦能新的商業(yè)模式。算法、數(shù)據(jù)與工程是優(yōu)秀的智能化產(chǎn)品不可或缺的組成部分，前端作為與數(shù)據(jù)的產(chǎn)生源頭--用戶最貼近的部分，也在未來全連接的架構(gòu)里迸發(fā)出更絢爛的火花。

前端首先能夠通過埋點(diǎn)、監(jiān)控等方式，采集到用戶行為、偏好、應(yīng)用運(yùn)行狀態(tài)等豐富的數(shù)據(jù)，我們團(tuán)隊(duì)(阿里南京 NUE)也自研了高性能 Web 實(shí)時(shí)錄屏與回放的產(chǎn)品，賦能客戶服務(wù)的體驗(yàn)提升與前端開發(fā)者的線上調(diào)試。基于數(shù)據(jù)與算法，前端也可以設(shè)計(jì)更好地人機(jī)交互模式，譬如人臉識(shí)別的登錄方式、智能問答客服、智能音箱的語音控制；數(shù)據(jù)可視化也是典型的前端與數(shù)據(jù)水乳交融的領(lǐng)域，ECharts, G2, D3, Three.js 等框架允許我們更便捷、友好地、深刻地展現(xiàn)統(tǒng)計(jì)數(shù)據(jù)、關(guān)系數(shù)據(jù)、地理空間數(shù)據(jù)、時(shí)間序列數(shù)據(jù)與文本數(shù)據(jù)等多源異構(gòu)數(shù)據(jù)集。此外，TensorFire, TensorFlow.js 等深度學(xué)習(xí)框架利用客戶端的 GPU 計(jì)算能力， pix2code 或者 SketchCode 利用算法來快速實(shí)現(xiàn)原型界面，Guess.js 能夠幫助優(yōu)化構(gòu)建好的包體與智能添加預(yù)抓取策略。

值得一提的是，近幾年區(qū)塊鏈技術(shù)的爆炸性發(fā)展也促進(jìn)了 Web 3.0 概念的思辨與實(shí)踐，IPFS, Ethereum dApp 等工具或者開發(fā)框架允許我們便捷地編寫去中心化的 Web 應(yīng)用。Web 3.0 提倡以人為本，看重隱私，反壟斷網(wǎng)絡(luò)，旨在更開放的網(wǎng)絡(luò)上進(jìn)行集體貢獻(xiàn)并實(shí)現(xiàn)共享利益，這也給予了前端開發(fā)者更多樣化的未來。在 DT 時(shí)代，我們或許不能站在浪潮之巔，但是隨波逐流順勢而下也可以找到自己的位置，或高或低地翱翔于天。

數(shù)據(jù)的核心操作是存儲(chǔ)與計(jì)算，傳統(tǒng)的 Web 應(yīng)用因?yàn)閱尉€程與離線不可用性往往是即用即走，而 PWA 這樣的應(yīng)用設(shè)計(jì)模式，提倡使用 Service Worker 添加離線支持，充分利用 IndexDB, CacheAPI 等進(jìn)行靈活地?cái)?shù)據(jù)存儲(chǔ)與檢索，并且給予用戶貼近原生的體驗(yàn)。另一方面，Web Worker, WebAssembly 等亦從不同的方面釋放或者增強(qiáng)前端的計(jì)算能力，不僅使得 Web 中運(yùn)行高性能要求的應(yīng)用或動(dòng)畫，也可以借鑒邊緣計(jì)算的理念，未來將更多地?cái)?shù)據(jù)聚合、計(jì)算的邏輯前移。感性地說，當(dāng)數(shù)據(jù)逐漸活躍、富集，如百川匯海，自然需要流動(dòng)起來。

廣義的數(shù)據(jù)流驅(qū)動(dòng)的界面有很多的理解，其一是界面層的從以 DOM 操作為核心到邏輯分離，其二是數(shù)據(jù)交互層的前后端分離。在 jQuery 時(shí)代，我們往往將 DOM 操作與邏輯操作混雜在一起，再加上模塊機(jī)制的缺乏使得代碼的可讀性、可測試性與可維護(hù)性極低；隨著項(xiàng)目復(fù)雜度的增加、開發(fā)人員的增加與時(shí)間的推移，項(xiàng)目的維護(hù)成本會(huì)以幾何級(jí)數(shù)增長。隨著 ES6 Modules 的廣泛應(yīng)用，我們?cè)谇岸碎_發(fā)中更易于去實(shí)踐 SRP 單一職責(zé)原則，也更方便地去編寫單元測試、集成測試等來保證代碼質(zhì)量。而像 React、Vue 這樣現(xiàn)代的視圖層庫為我們提供了聲明式組件，托管了從數(shù)據(jù)變化到 DOM 操作之間的映射，使得開發(fā)者能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯本身。并且 Redux, MobX 這樣獨(dú)立的狀態(tài)管理庫，又可以將產(chǎn)品中的視圖層與邏輯層剝離，保證了邏輯代碼的易于測試性與跨端遷移性，促進(jìn)了前端的工程化步伐。

近兩年來隨著無線技術(shù)的發(fā)展和各種智能設(shè)備的興起，互聯(lián)網(wǎng)應(yīng)用演進(jìn)到以 API 驅(qū)動(dòng)的無線優(yōu)先(Mobile First)和面向全渠道體驗(yàn)(Omni-channel Experience Oriented)的時(shí)代，BFF 這樣前端優(yōu)先的 API 設(shè)計(jì)模式與 GraphQL 這樣的查詢語言也得到了大量的關(guān)注與應(yīng)用。GraphQL 是由 Facebook 開源的查詢語言標(biāo)準(zhǔn)，包含了數(shù)據(jù)格式、數(shù)據(jù)關(guān)聯(lián)、查詢方式定義與實(shí)現(xiàn)等等一攬子?xùn)|西的數(shù)據(jù)抽象層。GraphQL 并不能消融業(yè)務(wù)內(nèi)在的復(fù)雜度，而是通過引入靈活的數(shù)據(jù)抽象層，盡量解耦前后端之間的直接關(guān)聯(lián)或者阻塞；在滿足日益增長不斷變化的 Web/Mobile 端復(fù)雜的數(shù)據(jù)需求的同時(shí)，盡可能避免服務(wù)端內(nèi)部邏輯復(fù)雜度的無序增加。

編程生態(tài)往往會(huì)經(jīng)歷三個(gè)階段：涌現(xiàn)大量工具的原始階段、復(fù)雜度提升后引入大量設(shè)計(jì)模式的框架階段、具有更好的團(tuán)隊(duì)組織與協(xié)調(diào)機(jī)制的工程化階段。大部分時(shí)候我們談?wù)摰焦こ袒@個(gè)概念的時(shí)候，往往指的是工具化；工具的存在是為了幫助我們應(yīng)對(duì)復(fù)雜度，在技術(shù)選型的時(shí)候我們面臨的抽象問題就是應(yīng)用的復(fù)雜度與所使用的工具復(fù)雜度的對(duì)比。而工程化，即是面向某個(gè)產(chǎn)品需求的技術(shù)架構(gòu)與項(xiàng)目組織，致力于盡可能快的速度實(shí)現(xiàn)可信賴的產(chǎn)品；盡可能短的時(shí)間包括開發(fā)速度、部署速度與重構(gòu)速度，而可信賴又在于產(chǎn)品的可測試性、可變性以及 Bug 的重現(xiàn)與定位。

在 DT 時(shí)代中，很多公司也開啟了大中臺(tái)，小前臺(tái)的戰(zhàn)略，即在中臺(tái)中完成一系列可開放能力的聚合，賦能前端業(yè)務(wù)，加速迭代開發(fā)。工程化是中臺(tái)化的基石，通過制定標(biāo)準(zhǔn)化的規(guī)范、基于元數(shù)據(jù)的可配置業(yè)務(wù)流等，完成前后端的業(yè)務(wù)銜接；而統(tǒng)一的服務(wù)中臺(tái)又是在復(fù)雜業(yè)務(wù)場景下實(shí)現(xiàn)微前端/微服務(wù)的保障。微服務(wù)與微前端，都是希望將某個(gè)單一的單體應(yīng)用，轉(zhuǎn)化為多個(gè)可以獨(dú)立運(yùn)行、獨(dú)立開發(fā)、獨(dú)立部署、獨(dú)立維護(hù)的服務(wù)或者應(yīng)用的聚合，從而滿足業(yè)務(wù)快速變化及分布式多團(tuán)隊(duì)并行開發(fā)的需求。微前端的落地，需要考慮到產(chǎn)品研發(fā)與發(fā)布的完整生命周期；我們會(huì)關(guān)注如何保證各個(gè)團(tuán)隊(duì)的獨(dú)立開發(fā)與靈活的技術(shù)棧選配，如何保證代碼風(fēng)格、代碼規(guī)范的一致性，如何合并多個(gè)獨(dú)立的前端應(yīng)用，如何在運(yùn)行時(shí)對(duì)多個(gè)應(yīng)用進(jìn)行有效治理，如何保障多應(yīng)用的體驗(yàn)一致性，如何保障個(gè)應(yīng)用的可測試與可依賴性等方面。

最后，對(duì)于個(gè)人而言，隨著團(tuán)隊(duì)技術(shù)棧的相對(duì)穩(wěn)定，關(guān)注點(diǎn)也會(huì)逐步從組件庫的建設(shè)變化為基礎(chǔ)設(shè)施的建設(shè)，從考慮選擇怎樣的技術(shù)棧到如何在立足某個(gè)技術(shù)棧更好地服務(wù)于業(yè)務(wù)規(guī)劃。這個(gè)知識(shí)爆炸與終身學(xué)習(xí)/碎片化學(xué)習(xí)為主的時(shí)代，我們要進(jìn)行更有效地學(xué)習(xí)，從知識(shí)廣度，編程能力與知識(shí)深度等方面提升自己。