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

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

隨著WEB技術的發展，很多的系統也都由客戶端慢慢的向WEB端轉移，所以WEB端內容已經不再是隻用來做靜態內容的展示，前端工程師的工作也不再是隻用切切頁面，寫點樣式，寫點特效那麼簡單了。

現在的WEB端已經體現出了很多之前在後端才有的一些邏輯和互動，前端也在不停的增加著業務程式碼，在使用者體驗上也有較高的要求，這些包括頁面的響應速度和資料的動態獲取等等，這些原因也是近幾年前端快速發展的根本原因。

既然前端的業務變的更加複雜，那程式碼量自然也會隨之增加，這就帶來了一系列的問題，比如程式碼的維護更加困難，團隊的協同開發更加麻煩，頁面去載入和解析這些資源也會變慢等等。

要想更好的解決這些問題，就需要一個合理的架構，當然架構沒有最好的，只有更合適的，並且不同的團隊，不同的產品也相差較大，所以想要找到一個合理的架構就需要我們根據自身情況不斷的去總結和完善。

蘇寧影片雲前端的主要工作內容

目前前端現狀，大家理解可能前端的內容就是html、css、javascript。其實在平常的工作中也確實就是這些東西，然後重點在javascript上。

HTML(html4、html5)

html包括html4和html5。然而HTML大家會覺得沒有什麼東西，不就是一些HTML的標籤嘛，然後把這些HTML標籤累在一起，累出一個頁面嘛。實際上HTML裡需要我們學習的內容還是有很多的，比如標籤的語義化，標籤的一些組織結構，哪些是行內標籤，哪些是塊級標籤，這些標籤在我沒有新增CSS樣式來控制他們的情況下各自預設有什麼樣的表現，而且這些表現在不同的瀏覽器上也是不一樣的。還有這些標籤對搜尋引擎的影響呀。還需要了解什麼是重繪，什麼是迴流。

CSS(CSS2、CSS3)

然後就是CSS,其實CSS中一些細節的點也比較多，需要我們去熟悉和掌握，如果大家只去瞭解一個CSS屬性是幹什麼，他給頁面元素的表現是什麼，然後能將透過這些屬性讓頁面很好的展現出來還是不夠的。偶爾我們發現一些比較詭異的問題，一些屬性會失效，或者是它讓頁面元素呈現出來的狀態並不是我們想要的，比較我們都知道一個div的寬度預設是100%，當我們給他設定了float屬性後，他的寬度就不再預設是100%，在這裡我們沒有去改變DIV的寬。

JAVASCRIPT (ES5、ES6+、nodejs)

接下來就是JAVASCRIPT,JSVASCRIPT在前端的開發中佔的比重是比較大的，它包括前面的ES3、ES5及現在的ES6+。這裡為什麼說ES而不是JS呢，因為ES是ECMAScript的簡稱，而ECMA是一個組織，叫做國際化標準組織。ECMAScript就是ECMA組織制定的一個標準。這個標準就是針對JAVASCRIPT語言來制定的。

所以說ECMASCRIPT是一種標準，而JAVASCRIPT是對這種標準的實現，我們常說的釋出就是標準的釋出，所以就是ES3、ES5、ES6+。對於ECMASCRIPT的實現並不是只有JAVASCRIPT一種，比喻還有Jscript、ActionSctipt。其實JAVASCRIPT = ECMASCRIPT+DOM+BOM。

還有我們比較熟悉的NODEJS，大家覺得他和JAVASCRIPT很像，它也是基於ECMAScript標準的，NODEJS =ECMAScript+OS(作業系統)+File(檔案系統)+Net(網路系統)+DB(資料庫)。

前端大概就是這些東西，看起來也就這些東西。其實要做好前端需要掌握和了解的除了這些還有很多需要掌握的東西。前端已經說過ECMA的標準，還有W3C的標準，HTTP的標準。還有一堆的不停出現和更新的類庫和框架要去學習。

還有他們的執行環境，比如瀏覽器環境，比喻瀏覽器的渲染機制、瀏覽器的快取機制，還有前端的安全功防，比喻XSS、CSRF等。NODE的環境等等。

前端還有一塊比較麻煩的就是瀏覽器的相容性。因為前端用的執行環境是不固定，主要取決於我們的使用者，我們不知道他們使用的是什麼樣的作業系統，不知道他們用和是什麼瀏覽器，而ES是在不停的升級，不停的給我們帶來新的特性，而在這些新的特性出來之前甚至是他們出來後一段時間內，瀏覽器是不支援這些特性的。

如果我們的程式碼裡用到了這些特性，那在這些不支援新特性的瀏覽器上，我們的頁面和功能就沒法正常工作甚至是正常展示。而使用者又不一定會一直保持自己的瀏覽器是最新的，有可能他們用的還是很多年前釋出的瀏覽器版本，出現這樣的問題也是我們需要去解決的，當然我們在寫程式碼時就應該去考慮到這種問題，但是我們不可能考慮到所有情況。

所以前端並不是很多人理解的只是切切頁面，做做美化的工作。

前端可以應用的場景

PC瀏覽器

然後來說說我們前端可以應用的場景，就是我們前端做出來的東西在哪裡可以使用，現在比較常見的就是PC瀏覽器，比較我們做的一些線上系統、網站，都是透過PC瀏覽器來呈現的。

WEBAPP （移動瀏覽器、移動端原生WebView）

還有就是WEBAPP，它就是移動端瀏覽器，其實它也和PC瀏覽器差不多，也是透過瀏覽器來呈現的，還有就透過移動端的WebView，它也是可能直接內嵌一個H5的頁面進去，也就是說我們前端的東西也是可能在移動端原生應用中去展現。

Hybird App

然後還有一個就混合應用，混合應用就是我們用前端的技術去做功能開發，然後在打包時的時候，把它打包成原生應用一樣的安裝程式，直接安裝到我們的手機中，它的好處就是他的開發成本比較低，就是開發一套程式碼，可以同時打包成不同平臺的的應用。

桌面應用（NW.JS、Electron）

還有一塊就是PC端的桌面應用，這種桌面應用和移動端的混合應用是差不多的，也是透過前端的技術使用js、html、css去開發應用的功能，然後把它打包成PC上的安裝程式，他就可以以桌面客戶端的形式來執行，它的好處也是同一套功能程式碼可以打包成不同作業系統上的應用程式。目前比較常用的框架是NE.JS和Electron。這兩個框架大家有興趣的話，可以自行去找找資料看看。現在前端應用的場景主要就是這些，可能還有一些其他不怎麼常見的場景，當然以後肯定還會有更多的應用場景。

前端的現狀

接下來我們再說說前端的現狀，我們先來看看前端一些主流框架的使用情況，這裡有一張stateofjs2017年對前端框架的統計。

這裡主要列舉了幾個比較流行和常見的框架，他是從幾個不同的維度來做比較的，一個維度是從來沒有聽說過；一個是聽說過，不感興趣的；一個是聽說過，想學習；一個是使用過，不想再使用；一個是使用過，會繼續使用。

這幾個不同的維度也都表現出了這些框架的流行度，和使用者的喜愛度。從圖中的這些維度裡，從左到右大致就是一個框架的被開發者所喜愛的一個序順。從這個圖表中我們可以看出，排名比較靠前是是angular、vue、react。這也和我們當前的現狀是比較吻合的。

這裡有一個比較奇怪的項，就是排名比較靠前的那個不使用框架，而且這裡也沒有大家都比較熟悉的Jquery。

個人認為其實Jquery應該是歸類到這一項裡的，因為從嚴格的意義來講，Jquery並能不算是一個框架，他只是對一些方法的封裝，並沒有一對一個流程提供一個解決方案，所以他只能算是一個類庫，並不能算是一個框架。

Jquery在幾年以前確實是特別的流行，前端開發幾乎是離不開它。但是自從一些MVC、MVVM的框架出現以後，Jquery已經不在是前端開發的必須項了，有些專案基於一些歷史原因，或者是完全沒有心要使用框架，直接用jquery就能很容易的處理好。所以就導致了這個不使用框架的排名比較靠前。當然這個圖是去年的統計結果，今年的話右邊的幾個的排名可能稍等有不同。但是大致的不會有太大的變化。

前端架構的意義

接下來再來說說前端架構的意義，也就是說前端為什麼需要有架構。大家可能會說，前端不就是HTML、CSS、JAVASCRIPT嗎，把他們寫好放到一起就好了呀，其實在很早以前前端確實是不需要什麼架構的，甚至是不需要一個專門的崗位來做，那時由設計師做出設計圖，然後再寫一份靜態的頁面，再交給後端工程師，後端工程師寫好後端邏輯以後，再將設計師給他們的靜態頁面替換成一些動態的頁面，比較替換成jsp、php等，再將資料套進去就行了。

前端開發中經常出現的問題

1、對現使用的框架不瞭解，上手太慢

接下來再來說說前端開發中經常會出現的問題，比如說對現在使用的框架或技術不太瞭解，上手太慢。因為現在的前端框架和類庫實在是太多了，每個公司或團隊所選擇的框架和類庫也是完全不同的，一個開發者不可能去了解所有的框架和類庫，前端的一些程式語言也非常的多，比如CoffeeScript、TypeScript、LESS、SASS等等。當我們加入一個團隊中遇到這些我們之前沒有使用過或瞭解過的東西時，就需要現學現用，就會上手比較慢。

2、程式碼邏輯混亂，耦合嚴重

還有一個就程式碼邏輯比較混亂，因為我們在開發前沒有一套約定的開發流程和規範，開發的過程中可有就是想到什麼就寫什麼，永遠的都是根據需求去新增程式碼，程式碼就一直往下堆，當這樣堆多了就會出現邏輯的混亂，在這樣往下堆的過程中又嚴重依賴前面的程式碼，使程式碼嚴重耦合到了一起。不知道大家公司有沒有一塊很神奇的程式碼，是好多年前開發的，開發的人早已離職，幾乎沒有人能很清楚的說出來它的邏輯，只要是他能正常的執行，就沒有人敢去動這塊程式碼，即使所有人都覺得這塊的程式碼非常的爛。

3、開發越來越來困難，牽一髮而動全身

既然程式碼都是堆起來的，又嚴重耦合，隨著時間有推移，你會發現開發越來越困難，最後即使所有的程式碼都是你自己寫的，你也會發現越往下寫越困難，直到最後幾乎沒法往下寫了。有時想改一個地方，就會發現，這裡是改好了，確影響其他多處的功能，所謂的牽一髮而動全身呀。

4、重複程式碼太多，一處改處處改，可維護性太差

有的時候不敢去改動之前的程式碼，怕影響其他功能，所以只要有新功能就去直接新增程式碼，長久以往，還會發現到處都是重複程式碼，而這些程式碼都有幾乎相同的邏輯，有一天，產品經理告訴，我們有一個需要需要修改一下，就又會發現，要改的地方太多了，雖然一編編的查詢修改程式碼，最後依然可能會的漏改的地方。

5、開發效率低下，出錯率高

然而一個團隊的人員變動是很正常的情況，這樣就會出現你需要去維護別人的程式碼，或者別人需要來維護你的程式碼，前面已經說過時間久了，你自己都不想再維護你自己的程式碼，更別說維護別人的那些堆起來的嚴重耦合的程式碼，這樣情況只會更糟。所以就會導致開發效率低下出錯率太高。等等其實我們在專案開發過程中會有各種各樣的問題，我們在團隊協同開發的過程中還會有更多的問題。

前端開發中出現問題的原因分析

使用者體驗度的要求提升

出現這些問題的原因主要人們對使用者體驗的提升，比如說人們對頁面的流暢性，頁面的載入速度的要求的提升，這也是後來出現前端工程師的主要原因。

邏輯逆轉

還有就是很多的邏輯開始往前端轉移。比如說很多的驗證，之前都是需要前端提交給後端，然後後端再將驗證結果返回給前端，而現在可以先在前端做一個初步的驗證，可以及時的將結果展現給使用者，最後再將資料提交給後端做最後的驗證。比如還有一些簡單的資料處理呀等等。這裡的轉移並不是完全就交給前端，後端不用管了。像簡單的資料處理可以直接交給前端，而資料驗證就需要前後端同時去做。這樣的話就會使前端的邏輯變的複雜。

前端的功能越來越豐富

前端的互動變強了，它的功能自然也就變的更豐富了，不像以前，前端只需要做一個純粹的展示頁面就好。

前端程式碼量的大幅提升

基於這些改變就使的前端的程式碼量大幅增加。開發過程就越來越複雜。

前端架構層出不窮

還有一個比較重要的原因就是，近幾前年前端發展太快，框架是層出不窮，很多人在做專案時都一味的去追新，總想用最新的框架，然後就一直處在適應框架的階段，並沒有真正的去理解自己使用的框架，也沒有深入的研究自己所使用的框架，甚至出現一些框架的誤用。然後造成各種各樣的問題，給後來維護專案的人也留下一些奇怪的問題。所以就需要一個架構來規範我們所使用的技術和開發的流程。

明天我們將繼續講解關於前端架構是什麼以及如何去搭建一個合適的架構等相關內容，歡迎大家關注我們的公眾號，或在後臺留言交流相關技術經驗。

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