蘇寧易購：前後端分離架構的落地思考

前後端分離本質上是工作職責的細化。這兩年前後端分離的呼聲越發高漲，最重要的原因在於後端工程師不能簡單的完成前端方面的工作。前端這段時間以來新的技術層出不窮，這種情況下後端無法簡單的掌握前端技術，即使對前端來說也有一定的負擔。

前端的門檻越來越高，一個人無法將所有的事情都做完，也是前後端分離的一方面因素。

前後端分離其實也並非萬能良藥，對應不同的業務場景情況會有所不同。同樣的應用場景也有所不同，前端傳統的應用場景有PC端、移動端，另外還App hybrid、小程式等。針對不同的應用場景所使用的技術都會有所不同，應用場景眾多讓架構複雜度變的更高。

我們在前端方面遇到了很多的技術挑戰，其中最重要的就是在大流量下要求高可用。對於訪問量較小的網站，測試量並不是很大，只有在極少數情況下使用者才能感知到BUG。但是大流量下感知人數會明顯增多，所遇到的各方面問題也會增多，比如網路、介面緩慢的問題。針對大流量前端可以採用CDN方式抗住，這時後端的壓力會比較大。當後端扛不住的時候，就需要前端來分擔一部分壓力，不能讓使用者感知到網頁出現的問題，這種情況下高可用的要求會非常的高。

第二點是所有的前端工程師都非常討厭的問題，瀏覽器的相容性要求高。相信沒有人會喜歡相容IE7的需求，但是使用者量多的情況下總有用會使用IE7的，為了避免使用者投訴這一需求就必須得到滿足。

對於電商來說每年要應付雙11、雙12、418等各種活動，這種情況下業務的迭代速度是非常快的，架構上處理會非常麻煩。還有一個比較麻煩的技術就是SEO支援，對於SEO很多技術都是不支援的，比如vue、react這樣的MVVM框架是不能使用的。

我們主要使用的技術方案有四種：前端模板（Ajax + 字串模板）、MVVM（Vue、React）、Node模板（Express + ejs）、SSR（Node + Vue SSR）。這其中最古老的方案就是Ajax + 字串模板，它本質上是拼接字串。

無論是伺服器渲染還是平常的渲染方式都支援IE6+，使用SSR或Node做渲染在瀏覽器相容方面則會比較弱。基於現代MVVM框架的技術方案，同樣也處於劣勢，在瀏覽器相容要求較高的場合中，無法使用。

對於SEO有要求的網頁來說，使用web模板和Vue方案，不太合適。相對來說web模板要好一點，可以在頁面未渲染之前新增一些介紹之類。Node和SSR在SEO方面問題不大，它們都是服務端渲染，首屏都包含足夠多的資料。

現在的各種技術方案中對於首屏渲染耗時，顯然使用Node是最快的。畢竟它是服務端渲染，資料是由Node服務端向服務提供方獲取的。SSR渲染的花費時間相對於Node會多30%-50%。Web模板和Vue都是讀取資料然後載入，其中Vue的渲染耗時會更久一些。總體來看在首屏渲染耗時方面MVVM框架是最慢的。

在首屏載入完成後，很多頁面都會有懶載入，需要向服務端請求相應的資料介面。這方面MVVM框架和web模板是直連後端的，而Node和SSR的方案都使用Nodejs做中間層轉發一次，消耗掉一部分的網路連線，多出來的是Node伺服器到服務提供方的服務。

Web模板毫無疑問在高可用方面是做的最好的，只要後臺服務提供方沒有掛，一般來說Web模板不會出太多問題。MVVM情況會複雜一些，在瀏覽器相容上要求更高，測驗量也會更多，但總歸有些地方會測試不到。

Node作為中間平臺，不僅要關心前端CDN還要注意Node伺服器會不會出現問題，這樣每多一個環節在高可用方面的就會差上一些。而SSR不僅要在Node上有高可用的要求，如果還引入了前後端程式碼同構，同構程式碼就有可能會在Node上出現各種問題。基於這種情況我們認為SSR在高可用方面是最差的。

技術的選擇上首先要考慮是否合適當前團隊，不同的團隊情況都會有所不同。技術門檻方面就拿校招來說一般在web模板上都不會有太大問題，Vue這樣的MVVM框架可能會了解一種，但是比較熟悉的就相對少一些。Web模板和Vue至少還是在前端方面，而Node情況就有些不同，它的知識點對前端來說複雜了很多。SSR情況則更糟糕，不僅僅需要知道Node方面的知識，還需要知道同樣一套程式碼在Node上如何執行，以及SSR框架的執行情況，這樣的話門檻就會更高。

使用web模板或MVVM框架至少還需要和運維等人員配合找臺伺服器放置頁面，多少還會和後端方面有些聯絡。而使用Node中介軟體則可以獨立解決所有的問題。

在談框架落地的時候，我總是有三個問題，第一個問題就是你的專案是否需要SEO。如果需要那麼Node.js就是不二選擇，但是也要面對Node.js的風險，目前Node.js極度缺少企業級工具，錯誤除錯困難，資料也少於主流語言。

第二個問題是專案是否需要相容IE，目前很多的前端工程師都喜歡使用前端框架。但是如果當前專案需要相容IE，那麼就可以和這些框架說再見了。

第三個問題就是是否有足夠多的前端工程師。前後端分離的越徹底，前端工作量越多。如果沒有足夠的前端工程師，就會面臨各種各樣的招聘風險，即很難招到有經驗的前端工程師，現階段只能靠加班。

在前後端分離方面整體上都是轉向Node.js中介軟體，我們有一個人數不多的架構團隊，主要負責生產各種工具和中介軟體為Node.js服務。

對於瀏覽器相容要求、可用性要求、頁面效能要求都極高的電商類頁面不使用前後端分離配合少量web模板。

對於瀏覽器相容要求較高的活動展示頁，逐漸從web模板過渡為Node模板。 核心應用型web頁，可用性要求佔主導的頁面，過渡為Node + Vue.js方案。某些以前用Vue編寫的頁面現在要想相容SEO且對效能要求高，可以漸進過渡到SSR方案。

前後端分離在團隊推進中，根據團隊實際情況，也應該是漸進的。架構師要嚴格評估風險邊界，保持業務的穩定。業務開發中，多選擇新業務推進高階分離方案。對於老業務改造，應該循序漸進，選擇新需求。