寫給後端開發工程師的H5前端開發知識

得物技術發表於2022-03-16
後端工程師H5前端

一、引言

web發展到目前為止已經有將近30年的歷史，在web興起的早期，並沒有前端這個概念。最初所有的開發工作都是由後端開發工程師完成，隨著業務越來越複雜，工作量逐漸的增加，專案中的視覺化部分和一部分互動功能的開發工作逐漸從業務中剝離出來，形成了前端開發。大約在2000年左右，雅虎等公司開始設立前端工程師職位，從2005年開始，正式的前端工程師角色被行業所認可，到了2010年，網際網路開始全面進入移動時代，前端開發的工作越來越重要，前端領域的技術發展也越來越快，各種新的思想、設計模式、工具和平臺都快速發展，對前端工程師的技能要求也越來越高。此時國內各大網際網路廠商也都設立了前端開發工程師的崗位。

那麼什麼是前端工程師？ 這裡可以拆分“前”和“端”來理解，“前”很好理解，相對於“後”的概念，而“端”則有不同的含義，如下圖所示：

廣義上講，所有負責在端佈局、排版、展示頁面的工程師，都可以稱為前端工程師。不同的端使用不同的語言，其中：

  • 在瀏覽器端，使用JavaScript、HTML和CSS語言開發
  • 在IOS端，使用Swift或Objective-C語言開發
  • 在Android端，使用Java語言開發
  • 在微信端，使用小程式開發

由於瀏覽器是歷史最久遠、最出名的端，所以將使用 JavaScript 、HTML和 CSS 語言，在瀏覽器端負責展示頁面的工程師，稱為前端工程師。

二、入門階段--web基礎

1、web三層結構

在web 1.0資訊共享時代，web發展的第一個階段就是靜態技術階段，在這個階段，HTML語言就是Web向使用者展示資訊的最有效載體。此時常見的寫法就是將HTML、CSS和JavaScript程式碼摻雜到一個單獨的檔案中，命名為index.html，並稱其為網頁。今天仍然有很多網頁將HTML、CSS和JavaScript程式碼寫在一個檔案裡面，但是當網頁內容逐漸複雜之後，不同的程式碼寫在一個檔案裡面會使檔案內容變得越來越臃腫，難以維護，於是出現了web三層結構的概念。web的三層結構如下圖所示：

  • 結構層： 即HTML標籤，標籤互相組合，構建了網頁的基本結構；
  • 表現層： 即CSS，為標籤新增樣式，比如標籤的顏色、大小、位置等等；
  • 行為層： 即JavaScript，用來實現網頁上的特效效果，可以在script標籤中動態修改頁面。

在同一個網頁中，對不同層的程式碼進行分離，可以在不同的專案中共用通用的程式碼模組，減少程式碼的冗餘。當然如何更加合理的對不同層的程式碼進行拆分，需要根據不同的專案具體分析並探尋程式碼拆分的最佳方案，這裡就不過多的去闡述了。

2、DOM與BOM

在前端領域DOM和BOM這兩者的概念非常重要。DOM是文件物件模型，即把文件當做一個物件來看待，主要處理網頁內容的方法和介面；BOM是瀏覽器物件模型，即把瀏覽器當做一個物件來看待，與瀏覽器互動的方法和介面。兩者的關係如下：

BOM的核心物件是Window，比如訪問螢幕物理解析度的寬和高，如下：

// 螢幕物理解析度的高 
window.screen.height 
// 螢幕物理解析度的寬 
window.screen.width 
// 獲取當前完整的url連結 
window.location.href

DOM的根本物件是document，這個物件是window物件的屬性，即window.document，可以通過document物件獲取文件中的節點同時也能操作節點，如下是一棵簡單的文件物件樹：

可以通過屬性id獲取a標籤文件節點物件，如下

// 通過id為aLink屬性獲取標籤a的文件物件 
const eleDomObj = document.getElementById('aLink')

也可以直接給a標籤新增屬性，如下：

const eleDomObj = document.getElementById('aLink')  
eleDomObj.setAttribute('href', '******')

3、前端基礎體系

上圖主要展示做為前端開發在前端的基礎體系裡面需要熟悉的基礎內容，實際前端基礎體系相關內容的細分或者擴充套件遠比上圖彙總的多。

三、進階階段--單頁應用與微前端

1、AJAX與單頁應用

在Web1.0階段，伺服器會返回整個頁面或者文件，前端頁面想要獲取後臺資料需要重新整理整個頁面，這是很糟糕的使用者體驗。進入Web2.0之後，動態網頁逐步發展，其中最主要的代表性技術是 AJAX，AJAX允許客戶端的JavaScript指令碼為區域性頁面內容提供請求服務，然後可以在無需回到伺服器的情況下動態重新整理部分頁面內容，也就是更新瀏覽器中的document物件，即DOM。在Web2.0階段加強了網站與使用者之間的互動，網站內容基於使用者提供，網站的諸多功能也由使用者參與建設，實現了網站與使用者的雙向互動交流。

在2004年和2005年，Google分別釋出了兩款重量級的Web產品：Gmail和Google Map，都大量使用了AJAX技術。隨著AJAX技術的流行，越來越多的網站使用AJAX動態獲取資料，這使得動態網頁內容變成可能，加上當時CDN開始大量用於靜態資源儲存，於是出現了SPA （Single Page Application 單頁面應用） ，大致的模式如下圖所示：

如上圖所示，在 Web 頁面初始化時載入相應的 HTML、JavaScript 和 CSS，一旦頁面載入完成，SPA 不會因為使用者的操作而進行頁面的重新載入或跳轉，取而代之的是利用路由機制實現 HTML 內容的變換，UI與使用者的互動，避免頁面的重新載入。這樣SPA存在的優點如下：

  • 前後端分離 開發 ： 前後端職責分離，架構清晰，前端進行互動邏輯，後端負責資料處理，單頁Web應用可以和 RESTful 規約一起使用，通過 REST API 提供介面資料，並使用 AJAX 非同步獲取資料；
  • 良好的互動 體驗 ： 能提升頁面的切換體驗，使用者在訪問應用頁面不會頻繁的去切換瀏覽頁面，從而避免了不必要的跳轉和重複渲染。

單頁應用的開發模式實現了前後端的分離，使得整個業務系統架構變得清晰，可以單獨開發和測試。但是當中後臺單頁應用有多個不同的子模組，並且子模組之間有相對獨立完整的功能體系時，一旦子功能模組越來越多，那麼整個單頁應用將變得非常龐大且臃腫，開發和維護成本將大大提高，如果在這種場景下，還在用SPA的模式開發，那麼專案後期的維護將變得不可想象，這個時候微前端的概念應運而生。

2、微服務與微前端

提到微前端就離不開微服務，後端同學對於微服務應該非常的熟悉，微服務允許後端體系結構通過鬆散耦合的程式碼庫進行擴充套件，每個程式碼庫負責自己的業務邏輯，並公開一個API，每個API均可獨立部署，並且各自由不同的團隊擁有和維護。其帶來的好處是：

  • 將一個龐大的單體拆解成多個子服務，大大降低了開發複雜度；
  • 任務邊界劃分明確，每個子服務之間單獨開發，不同服務之間可並行由不同的開發人員開發，提高開發效率；
  • 更細粒度的加強了模組化程式，可維護性和可讀性更高；
  • 每個微服務可獨立部署釋出，使得自動化CI(持續整合)/CD(持續交付)成為可能。

微前端的思路是把微服務的架構引入到前端，主要應用於瀏覽器端，其核心是對web應用進行拆解，最後將不同子系統或者子模組聚合成一個完整的應用。在早期，也可以使用iframe巢狀的方式實現單個應用整合多個獨立的功能模組，以目前客服域一站式工作臺現有的架構所示：

如上圖所示，紅色部分是通過iframe嵌入的模式整合到工作臺裡面的。通過iframe巢狀的方式，在一站式工作臺裡面遇到了較多的問題，主要問題如下：

  • 坐席輔助建立工單模組，一線客服的切換頻率與操作流程都非常快，不同模組通過postMessage訊息通訊的時候，存在延遲的現象，導致工單資料串位；
  • 工單詳情使用的頻率非常高，每次開啟都需要重新載入靜態資源，渲染效率低下，使用體驗比較差；
  • 一線客服一般都會同時開啟多個工單詳情或者訂單詳情的iframe，過多的iframe佔用瀏覽器記憶體比較大，導致訊息傳送卡頓，影響使用者首響時間。

基於上面幾個問題，目前運用微前端的設計思想正在重構優化的客服域一站式工作臺架構如下圖所示：

通過上圖將每個單獨的功能模組拆分成不同的子應用，如工單工作臺是一個子應用，熱線服務是一個子應用，不同的子應用獨立執行，互不影響，子應用共享主應用的資源，不需要每次重新載入靜態資源，每個子應用都可以獨立釋出和部署。

四、高階階段--向全棧轉變

在web技術興起的很長一段時間裡，前端開發工程師想要去開發服務端的程式碼，就必須去學習JAVA或者PHP等後端語言，自從2009年，Node.js興起之後，JavaScript 開始有能力執行在服務端，之前需要後端工程師使用傳統後端語言完成的很多工作，理論上前端工程師都可以在Node.js創造的執行環境中使用JavaScript完成，此時全棧開發工程師也逐漸被行業所認可。在Node.js興起至今，憑藉其高效能、易部署等特點在前端領域脫穎而出了很多明星專案，比如BFF和在前端工程化上的實踐。

1、什麼是BFF

BFF，即 Backend For Frontend（服務於前端的後端） ，也就是伺服器設計 API 時會考慮前端的使用，並在服務端直接進行業務邏輯的處理，又稱為使用者體驗介面卡。BFF 只是一種邏輯分層，而非一種技術。BFF 的出現為前端應用提供了一個對業務服務呼叫的聚合點，它遮蔽了複雜的服務呼叫鏈，讓前端可以聚焦在所需要的資料上，而不用關注底層提供這些資料的服務。

試想下如下場景： 某個頁面需要向服務A、服務B以及服務C傳送請求，不同的服務返回值用於渲染頁面中不同的元件模組，即一個頁面存在很多請求的場景。此時，每次訪問該頁面都需要傳送 3 個請求。同時為了保障 Android，iOS以及 Web 端的不同需求，需要為不同的平臺寫不同的 API 介面，而每當值發生一些變化時，我們需要在每一個客戶端（Android，iOS，Web）分別實現一遍，這樣的代價顯然相當大。而當我們有了 BFF 這一層時，我們就不需要考慮系統後端的遷移，後端發生的變化都可以在 BFF 層做一些對應的修改，具體如下：

如上圖所示，加入BFF層，原本每次訪問傳送 3 個請求，變成了一個請求，BFF層會提前將多個服務的資料聚合起來，返回給前端。

備註：上面只是通過一個簡單例子來闡述BFF分層帶來的好處，實際複雜的業務場景對BFF的 設計 會複雜很多。

2、前端工程實踐

前端工程化主要基於Node.js開發，Node.js 適合用於開發前端方向的各種工具。如包管理工具npm上整合了各種工具模組，包括各種前端預編譯工具、構建工具、腳手架以及命令列工具等。其主要的應用場景如下圖所示：

五、前後共勉--總結

  • 前端不要侷限於html、css和javascript，需要了解伺服器和資料庫相關的知識，這樣和後端評審技術方案的時候，才能提出一些合理的建議；
  • 前端需要了解資料，把控資料之外的業務邏輯，而不僅僅只是聚焦於頁面的展示；
  • 後端需要了解前端相關的知識，考慮頁面渲染需要什麼樣的資料結構，這樣在設計REST API的時候，才能輸出合理的資料結構給到前端頁面渲染；
  • 後端需要具備一定的前端技能，在前端完成元件化輸出到物料庫之後，後端能基於物料庫的業務元件完成頁面的搭建，提升研發效率。

以上只是站在多年前端開發的視角，闡述了後端同學需要了解的相關內容，實際前端內容遠比文章描述的多，比如移動端、佈局排版、Hybrid、小程式、PWA以及Serverless等等都屬於前端技術領域，路漫漫其修遠兮，吾將上下而求索，希望本文能給後端開發同學帶來一些幫助和啟發，也能讓前端開發同學對前端知識有更好的認識。

六、參考文件

文/Bill

關注得物技術，做最潮技術人！

相關文章