蘇寧影片雲高階技術經理：漫談前端系統架構的演變歷程（中）

作者：李曉健。現擔任蘇寧影片雲高階技術經理。軟體技術專業，從事java開發，擁有8年開發經驗，超過6年的專職前端開發經驗，3年以上的團隊管理經驗；目前負責蘇寧影片前端研發和架構工作，參與前端SDK元件的開發，推動蘇寧影片雲平臺的架構改進和使用者體驗，為使用者提供優質的服務。人生信條：始終相信只要有付出，就一定會有回報。

昨天的文章我們大概介紹了下蘇寧影片雲前端的主要工作內容以及蘇寧前端架構的前景、現狀等內容，今天的文章將主要介紹下前端架構是什麼以及如何搭建的內容。

前端架構是什麼

接著昨天蘇寧影片雲高階技術經理：漫談前端系統架構的演變歷程（上）上篇，我再來說說前端框架是什麼？

個人理解前端架構其實就是對一些框架技術的組合使用方式及對一些流程的規範化，經此來達到控制風險、簡化開發和提高開發效率的目的。

比如說我們在開發一個新的專案時，需要使用到什麼技術，就是做一個技術的選型，怎麼樣去組織我們程式碼；也就是說我們的程式碼目錄結構應該是什麼樣，然後我們的開發流程是什麼樣，程式碼應該遵循一個什麼樣的風格，來使一個團隊的人開發出來的程式碼風格一致，還有就是有哪些工具和元件庫我們是可以直接去使用的，這些都是我們在做一個架構時需要考慮的問題。

其實說架構這個東西，不能說什麼樣的架構就是最好的，最完美的架構。

架構只能說他是一個最適合我們的，因為一個好的架構是一點點改出來的，我會要讓他一點點的適合我們的團隊，適合我們的業務。而不是說一個架構可以在所有的團隊都用越來比較舒服，不管什麼的業務都可以在這套架構下很好的開發下去，在各個方面都很完美。畢竟每個團隊的人員的風格和能力都不盡相同，每一個業務也都是自己的特點，所以說幾乎不可能有一個完美的架構的存在。所以我們只需要做出一個適合我們自己團隊和業務的架構就算是一個很好的架構。

怎麼樣去搭建一個合適的架構

那我們怎麼才能做出一個適合自己團隊和業務的架構呢？

1、瞭解當前專案的功能特點（複雜度、側重展示還是互動、SEO）

首先我們需要了解我們當前專案的功能特點，比如我們專案的複雜度、他的側重點是什麼？

是重互動還是重顯示。比如我們的後臺管理系統就是重互動的，我們的官網就是重展示的。像這樣比較簡單我們可以不依賴任何第三方的東西或只需要簡單的類庫就可以實現，沒必要去引入一些框架越來，而對於那些重互動的系統，我們就可以考慮引入框架來幫助我們處理一些邏輯和操作，來簡化我們的開發。

然後我們的專案對SEO是不是有要求。比如說我們後臺或內部系統是不需要太注重SEO的，因為他的內容不需要別人透過搜尋引擎來搜尋到，對於這些不需要注重SEO的系統，我們就可以考慮使用模板來動態生成頁面結構。

比如蘇寧的官網首頁，商品詳情頁，這些都是需要做好SEO的，因為這些東西就是要展示給別人看的，需要別人能很容易的在網際網路上找到他們相關的資訊。

對於這些需要注重SEO的系統，我們需要從服務端就返回完整的頁面結構，如果需要動態生成的頁面，我們可以考慮服務端渲染，在服務端將頁面結構生成好然後再返回給瀏覽器。

現在比較流行的前端框架，比如angularjs、vue和react都是以單頁形式為主的，直接去使用他們就是不利於SEO的，當然他們也都提供了服務端渲染的方案去最佳化SEO。

2、瞭解專案的展現目標使用者（瀏覽器的相容性）

還有就需要去了解我們的目標使用者。其實目標使用者直接關係互我們系統對瀏覽器的相容性。

比如說我們的目標使用者是面對所有網際網路使用者，沒有特定物件的限制，那我們就需要去相容絕大多數的瀏覽器，因為我們根本不知道使用者會使用什麼瀏覽器。

如果我們的使用者只是我們公司內部人員，或者是一些特定的簽約使用者，這時我們可以去告訴他應該使用什麼的瀏覽器，甚至是限定他們使用什麼樣的瀏覽器，這樣我們只需要去相容一些主流的瀏覽器就可以，甚至是隻相容某一種特定的瀏覽器。

像我們見過有些系統是隻相容IE的，在其他瀏覽器上都無法正常執行，也有些系統只能在chrome瀏覽器上執行，在其他瀏覽器上無法正常執行的。

然後我們再根據需要相容的瀏覽器來選擇我們需要使用的技術或框架。因為有些技術或框架只能在主流的瀏覽器上才能正常執行。

3、瞭解當前團隊人員的技術棧及能力

還需要了解我們團隊人的技術棧和能力。我們在選框架時需要選一個目前我們團隊成員都會的，或者是都瞭解的，至少需要有成員對這個框架比較瞭解，並且可以讓其他人很快上手的架構。如果我們選了一個大家都不瞭解的，大家都需要一邊學一邊用，這樣就會大大降低團隊的開發效率，甚至一直在踩坑和摸索中，開發就會停滯不前。

4、瞭解哪些地方是我們自己可以控制的

還有就是需要了解哪些地方是我們可以控制的，這一塊主要體現在流程上，因為很多時候，一個公司有他的一些既定的流程，我們的專案必須需要經過他們的流程最終才能上線，所以我需要考慮我們自己的流程如何去和那些已有的流程對接。

對於那些沒有限制的地方，我們可以儘量適合團隊和方便方式去做，而那些需要和已有流程對接的地方，那些流程又不是我們所能控制的，那我們就必須在遵守他們規範，以便和去他們對接。比喻我們的產品上線，必須要經過公司統一的上線流程，這時我們就需要了解這個流程需要我們提供給他們什麼樣的東西，我們只有按照他們的規範去提供，才能很順利的做好接入。

5、適時調整

還有就是我們最開始的架構再使用一段時間後，多多少少會出現一些問題，這裡我們就需要針對這些問題做調整，因為我們在搭建一個架構時，不可能能夠想到開發中可能出現的所有問題，只能出現問題時做去做調整。所以說一個合適的架構並不是直接搭建出來的，而是在開發過程中慢慢調整出來的。

蘇寧影片雲的前端架構

接下來我們再說說我們蘇寧影片雲前端的架構的演變歷程。

這張圖是我們蘇寧影片雲的商戶端的控制檯頁面。從這張圖可以看出來，這是一個很典型的控制檯的頁面結構，主要分成3個大的部分。

最上面是頁面的主導航，然後左邊是一個大的功能模組中的子導航，右邊是頁面需要顯示的具體內容。

其實我們在新開一個專案的時候，在做框架的選型時也是可以根據頁面結構去做一些參考。去選擇一些適合我們頁面結構的技術去做開發，也會大大降低我們開發的複雜度，比如我們的頁面需要做成一個單頁的形式，我們就可以去選一些MVC或MVVM的架構來做。

蘇寧影片雲前端架構共分為三個階段，明天我們將詳細介紹三個階段專案架構以及其中的問題，請大家繼續關注蘇寧影片雲訂閱號。

蘇寧旗下子品牌蘇寧影片雲已累計服務客戶超過2000個；蘇寧影片雲憑藉PPTV 十年媒體技術和服務經驗，融合流媒體技術、P2P、CDN 分發、海量儲存、安全策略等構建的專注影片領域的一站式SaaS 服務平臺。蘇寧影片雲集影片雲直播、雲點播、雲上傳、雲轉碼、雲端儲存、雲統計等功能於一體，多平臺全方位支援客戶各種影片場景的業務需求。