蘇寧視頻云高級技術經理：漫談前端系統架構的演變歷程（上）

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

現在的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 服務平臺。蘇寧視頻云集視頻云直播、云點播、云上傳、云轉碼、云存儲、云統計等功能于一體，多平臺全方位支持客戶各種視頻場景的業務需求。