2.2　業(yè)界用Node.js做什么

在日常工作中，前端工程師通常會(huì)使用Node.js做哪些事情呢？下面來看一下。

2.2.1　前端工程化

毫不夸張地說，Node.js對前端開發(fā)的推動(dòng)作用簡直就像“工業(yè)革命”對生產(chǎn)力的推進(jìn)作用一樣。十幾年前，JavaScript連最基本的模塊化規(guī)范都沒有，代碼的優(yōu)化也只能依賴于IDE的簡陋工具和手動(dòng)優(yōu)化。現(xiàn)今的前端開發(fā)工作流則已經(jīng)擁有了全生命周期的自動(dòng)化工具支持：Yeoman提供的腳手架定制能力可以使開發(fā)人員快速生成指定技術(shù)棧的目錄框架；使用npm包管理工具可以直接通過命令行獲取所需要的依賴庫；以webpack為代表的打包工具不僅能夠在開發(fā)過程中提供實(shí)時(shí)編譯和熱更新支持，還能夠依靠高可定制的參數(shù)配置對源代碼進(jìn)行優(yōu)化，并最終構(gòu)建出可用于生產(chǎn)環(huán)境的程序；ESLint提供了代碼校驗(yàn)功能；Prettier提供了格式美化功能；Babel提供了“ES6+”代碼到低版本JavaScript語言的編譯功能；Mocha和Karma提供了跨瀏覽器自動(dòng)化測試的功能；Istanbul提供了代碼測試覆蓋率檢測的功能；TypeScript提供了強(qiáng)類型和面向?qū)ο蟮奶匦裕籊it命令行提供了代碼管理功能。更重要的是，開發(fā)人員可以通過Node.js定制私有的命令行工具集，來對這些基礎(chǔ)的工程能力進(jìn)行集成和擴(kuò)展，從而打造出屬于自己團(tuán)隊(duì)的前端自動(dòng)化工具鏈或解決方案。

除此之外，“多端編譯”技術(shù)也是前端工程化領(lǐng)域的熱門方向之一，它可以讓開發(fā)人員只編寫一套源代碼，即可通過配置編譯出H5程序、Android、iOS及多個(gè)平臺(tái)的小程序，業(yè)界已經(jīng)有很多團(tuán)隊(duì)推出了相關(guān)的技術(shù)。而這些技術(shù)變革的推動(dòng)力，正是Node.js那看似平淡無奇的文件讀寫能力。當(dāng)然隨著技術(shù)的發(fā)展和演進(jìn)，像Esbuild這類嘗試通過跨語言實(shí)現(xiàn)高性能的工具也在逐漸興起。

2.2.2　中間層

在前后端分離的時(shí)代，前端開發(fā)人員自然希望后臺(tái)返回的數(shù)據(jù)正好就是自己需要的格式，這樣只需要把這些數(shù)據(jù)掛載到相應(yīng)的組件屬性上，剩下的事情交給框架就可以了，省去了二次加工的過程，前端代碼通常也會(huì)因此變得更加簡潔。然而，在后端開發(fā)人員的認(rèn)知里，這種雜務(wù)當(dāng)然最好由前端來完成。

Node.js的服務(wù)端開發(fā)能力使得業(yè)界在“前后端分離”的基礎(chǔ)上衍生出了“中間層”的概念，并為這部分煩瑣卻都覺得“應(yīng)該由別人來實(shí)現(xiàn)”的代碼提供了一種優(yōu)雅的實(shí)現(xiàn)方式。“中間層”，顧名思義就是建立在前端和后端之間的邏輯分層，最大的作用就是整合，包括整合接口、整合數(shù)據(jù)、整合邏輯，通常由前端工程師編寫和實(shí)現(xiàn)。中間層的出現(xiàn)，既可以使客戶端工程師專注于編寫清晰的“聲明式組件”代碼，也可以使后端工程師在提供相應(yīng)的業(yè)務(wù)邏輯接口后，能夠?qū)Ｗ⒂谙到y(tǒng)性能和穩(wěn)定性的提升，其他的事情則可以放到中間層完成。

如果你所面對的數(shù)據(jù)存在很多歷史遺留問題，組裝的過程也非常復(fù)雜，那么可以將它們放在中間層，利用服務(wù)端的運(yùn)算能力來處理，就不必考慮在耗時(shí)的數(shù)據(jù)拼裝過程中如何保證瀏覽器的主線程不會(huì)因?yàn)樽枞ロ憫?yīng)了。作為數(shù)據(jù)的消費(fèi)者，如果客戶端程序獲取的數(shù)據(jù)直接可用，那無疑會(huì)是一種福利。有時(shí)候需要展示的數(shù)據(jù)來自不同團(tuán)隊(duì)維護(hù)的不同接口，這些接口之間可能是協(xié)作關(guān)系，也可能是競態(tài)關(guān)系，甚至有些重要的接口是需要隱藏起來的。這時(shí)，利用中間層來聚合接口和邏輯，就可以將復(fù)雜的邏輯鏈條和各個(gè)請求細(xì)節(jié)都隱藏在服務(wù)端，只為客戶端暴露一個(gè)調(diào)用接口，并最終返回?cái)?shù)據(jù)或包裝后的異常信息。除了接口整合和數(shù)據(jù)清洗之外，中間層代碼還可以完美勝任鑒權(quán)和會(huì)話管理、請求過濾、訪問日志記錄、應(yīng)用接口升級等任務(wù)。

中間層的出現(xiàn)也是“單一職責(zé)原則”的體現(xiàn)，它使得整體的技術(shù)架構(gòu)變得更清晰，每個(gè)環(huán)節(jié)需要承擔(dān)的宏觀任務(wù)類型也變得更加清晰。客戶端負(fù)責(zé)交互、渲染和狀態(tài)記錄，中間層負(fù)責(zé)整合連接和清洗數(shù)據(jù)，后端負(fù)責(zé)基礎(chǔ)服務(wù)邏輯、性能和容錯(cuò)。這樣的架構(gòu)能夠使不同的模塊職責(zé)更加清晰，代碼的可維護(hù)性也會(huì)變得更好。

2.2.3　SSR引擎

SSR是指服務(wù)端渲染（Server Side Render），其實(shí)服務(wù)端渲染并不是什么新技術(shù)，只是在Node.js的幫助下，前端工程師可以更方便地實(shí)現(xiàn)該技術(shù)。在Ajax技術(shù)出現(xiàn)以前，網(wǎng)頁本來就是在服務(wù)端渲染的，例如，Java技術(shù)棧使用的JSP技術(shù)就是在服務(wù)端動(dòng)態(tài)生成網(wǎng)頁，然后傳輸給客戶端進(jìn)行顯示的。但隨著單頁面應(yīng)用模型的廣泛使用，以及瀏覽器性能的不斷提升，前端可以自行在JavaScript程序中獨(dú)立完成頁面的動(dòng)態(tài)渲染，所以除了那些對訪問速度有較高要求且變化較少的項(xiàng)目，更多的項(xiàng)目仍然會(huì)采用客戶端渲染的方式來實(shí)現(xiàn)。在現(xiàn)代開發(fā)中，基于框架的SSR技術(shù)也稱為同構(gòu)直出技術(shù)。“同構(gòu)”是指開發(fā)者在服務(wù)端開發(fā)時(shí)，可以使用與客戶端開發(fā)一樣的技術(shù)棧并復(fù)用同樣的組件，三大SPA框架都推出了自己的同構(gòu)直出框架；“直出”則是指模板渲染的過程是在服務(wù)端完成的，從而將可直接使用的頁面、文檔片段和腳本返回給客戶端。SSR技術(shù)通常可用于以下幾個(gè)典型場景。

1. 提升首屏渲染速度

由于SPA框架具有動(dòng)態(tài)渲染的特點(diǎn)，因此在渲染首屏之前往往要進(jìn)行初始化操作，同時(shí)加載其他資源，這就使得使用者不得不面對一段較長的白屏?xí)r間，既影響使用體驗(yàn)也容易造成用戶流失。為了解決這個(gè)問題，將首屏內(nèi)容或經(jīng)過設(shè)計(jì)的等待頁面放在服務(wù)端渲染，并優(yōu)先展示給用戶，可以有效提升用戶體驗(yàn)，從而避免用戶流失。

2. 提升搜索引擎優(yōu)化（SEO）性能

現(xiàn)代SPA框架的動(dòng)態(tài)渲染特性使其在應(yīng)對搜索引擎爬蟲時(shí)表現(xiàn)得很不友好，因?yàn)榕老x只能抓取靜態(tài)頁面的內(nèi)容，而SPA框架的靜態(tài)HTML頁面通常只是一個(gè)包含了內(nèi)容掛載點(diǎn)的空頁面。利用服務(wù)端技術(shù)就可以很好地解決這個(gè)問題，當(dāng)檢測到訪問者為爬蟲機(jī)器人時(shí)，會(huì)返回渲染好的頁面，以便它可以分析其中的內(nèi)容，從而提升網(wǎng)站的搜索引擎優(yōu)化性能。

3. 獨(dú)立運(yùn)營頁面的制作

運(yùn)營頁面通常是獨(dú)立于主程序而存在的，其內(nèi)容會(huì)隨著運(yùn)營活動(dòng)的變化而不斷更新，且訪問量較大。用SSR技術(shù)來實(shí)現(xiàn)可以讓頁面更快地完成構(gòu)建和渲染，因?yàn)樗槐丶虞d主程序中那些自己并不依賴的第三方庫。同時(shí)，運(yùn)營頁面本身就具備時(shí)效性，服務(wù)端渲染的實(shí)現(xiàn)方式也使得它更容易在使用后下架。

2.2.4　協(xié)作連接

Node.js無疑是一種能夠幫助前端工程師成為團(tuán)隊(duì)核心成員的技術(shù)，它提供了一種更加簡單有效地推動(dòng)團(tuán)隊(duì)協(xié)作的方法，那就是不要總提要求，而是要為團(tuán)隊(duì)成員提供自動(dòng)化的工具。與UI人員進(jìn)行協(xié)作時(shí)，可以使用BackstopJS來完成開發(fā)結(jié)果與UI的自動(dòng)化回歸測試，或者像阿里集團(tuán)的開源項(xiàng)目Fusion Design那樣嘗試提供開發(fā)端和設(shè)計(jì)端兩種工具，從而幫助設(shè)計(jì)師和開發(fā)者統(tǒng)一認(rèn)知和物料。在與后端人員進(jìn)行協(xié)作時(shí)，可以使用DocLever或Rap2搭建內(nèi)部API管理平臺(tái)，推動(dòng)更加規(guī)范的API管理工作流，以免因?yàn)锳PI的不斷變動(dòng)而承擔(dān)額外的工作。又或者通過在中間層提供日志來協(xié)助運(yùn)維人員獲得更多有針對性的信息，甚至對于一些更大體量的可視化工具的開發(fā)，即使Node.js沒有出現(xiàn)在生產(chǎn)環(huán)境的技術(shù)選型中，它也依然擁有屬于自己的重要角色。

協(xié)作中遇到問題是在所難免的，不斷指出別人的問題總歸是一件影響團(tuán)隊(duì)協(xié)作的事情。有了Node.js的幫助，前端工程師就可以主動(dòng)思考和優(yōu)化與團(tuán)隊(duì)其他成員的合作方式，并將可行的實(shí)踐轉(zhuǎn)化為工具，提供給其他與自己工作有交集的協(xié)作者，以便在實(shí)踐中逐步完善。試問誰不喜歡與這樣的同事合作呢？當(dāng)你用解決方案取代命令和抱怨時(shí)，自然會(huì)贏得屬于自己的那份尊重。在這個(gè)過程中，你也更容易學(xué)會(huì)從用戶和產(chǎn)品的角度來看待事物，這是很多初級開發(fā)者都缺乏的視角。