系統(tǒng)架構(gòu)：Web應(yīng)用架構(gòu)的新趨勢 前后端分離的想法
最近研究servlet，看書時(shí)候書里講到了c/s架構(gòu)到b/s架構(gòu)的演變，講servlet的書都很老了，現(xiàn)在的b/s架構(gòu)已經(jīng)不是幾年前的b/s架構(gòu)，其實(shí)b/s架構(gòu)就是web應(yīng)用開發(fā)，對于這樣的架構(gòu)我們現(xiàn)在應(yīng)該考慮的是前端和后端的分離（注意：這里的后端是指服務(wù)端）。
Web前端現(xiàn)在是一個(gè)獨(dú)立的技術(shù)工種，這個(gè)工種的產(chǎn)生主要是針對互聯(lián)網(wǎng)行業(yè)的需求，我在以前的文章里曾經(jīng)講到過，一個(gè)大型互聯(lián)網(wǎng)網(wǎng)站，例如想淘寶網(wǎng)，它絕對不是一個(gè)Web項(xiàng)目，而是一群web項(xiàng)目的集合，那么如果不在前端進(jìn)行整合，這么多web項(xiàng)目前端開發(fā)一定存在大量重復(fù)勞動(dòng)，并且運(yùn)維時(shí)候也存在難以統(tǒng)一管理的問題。本文假想一個(gè)面對需要前端資源整合的組織，如何做到前后端分離的解決思路。本文詳情如下：
(一) 前后端分離的目的和作用
做Web開發(fā)也可以說是B/S架構(gòu)開發(fā)，B端和S端從技術(shù)體系角度而言異構(gòu)性很大，換而言之就是B端使用的技術(shù)和S端使用的技術(shù)不適于同一個(gè)體系，這樣的結(jié)果導(dǎo)致實(shí)際開發(fā)中，很難做到專業(yè)分工，如果項(xiàng)目開發(fā)過程中管控不到位，這樣的問題可能會影響到整個(gè)項(xiàng)目的開發(fā)質(zhì)量，因此前后端分離的目的之一就是要做到專業(yè)化分工，提高項(xiàng)目的質(zhì)量和開發(fā)效率。
隨著技術(shù)的發(fā)展，當(dāng)下的Web開發(fā)形勢已經(jīng)和以前有了很大的不同，早期的Web項(xiàng)目是一個(gè)封閉的項(xiàng)目，用戶從瀏覽器里看到的頁面直到后臺數(shù)據(jù)庫都是在一個(gè)項(xiàng)目里集成的，而現(xiàn)在Web系統(tǒng)的規(guī)模越來越大，中大型的Web系統(tǒng)是一個(gè)開放式的系統(tǒng)，開放型的系統(tǒng)用戶在瀏覽器發(fā)起的請求可能會轉(zhuǎn)發(fā)到外部的系統(tǒng)里進(jìn)行處理，或者是本地的系統(tǒng)和外部系統(tǒng)一起完成請求的處理，此外有的請求可能不會直接請求數(shù)據(jù)庫，而是請求緩存服務(wù)器，這些變化幾乎都是發(fā)生在Web系統(tǒng)的服務(wù)端，前后端耦合度很高的Web系統(tǒng)服務(wù)端的復(fù)雜度提升必然帶來了Web前端的復(fù)雜度的提升。因此Web前端從系統(tǒng)架構(gòu)的角度也需要更加專業(yè)的管控，管控的作用之一就是前后端進(jìn)行分離，降低前端對服務(wù)端的依耐性。
富客戶端應(yīng)用的普及導(dǎo)致Web前端技術(shù)開發(fā)更加專業(yè)化，Web前端工程師成為一個(gè)獨(dú)立的技術(shù)崗位，Web前端開發(fā)技術(shù)的難度也越來越高，前后端的分離就是為Web前端開發(fā)營造一個(gè)良好的開發(fā)環(huán)境，不要讓前端工程師被一些不可控的外在因素所影響（例如：前后端的耦合性），最后導(dǎo)致前端不能專心致志做出更加好的作品。所以，前后端分離是讓前后端更加專業(yè)化，在技術(shù)和管理上將前端角色更加明確，更深入的挖掘前端開發(fā)的價(jià)值。
(二) 現(xiàn)有系統(tǒng)架構(gòu)給前后端帶來的問題以及解決方法
上圖是目前大部分系統(tǒng)的架構(gòu)圖，雖然有些系統(tǒng)采用分布式架構(gòu)，層與層之間使用了遠(yuǎn)程調(diào)用框架，但是本質(zhì)上都逃不開上面這個(gè)架構(gòu)設(shè)計(jì)。這張圖是一張比較合理的圖，在實(shí)際開發(fā)里最常發(fā)生的事情就是控制層（Control）越過服務(wù)層（Service）直接處理下面的資源。
前后端耦合的問題主要發(fā)生在控制層（Control），控制層是前端和服務(wù)端交互的邊界，但是在開發(fā)過程中控制層（Control）和服務(wù)層（Service）常?；煜磺澹@就是前后端耦合度高的重要原因。
因此要前后端解耦，就是要?jiǎng)澢蹇刂茖拥倪吔?，控制層到底該屬于前端還是服務(wù)端，在MVC模式里控制層作用是調(diào)度，控制層不是寫業(yè)務(wù)邏輯的地方，因此將大量業(yè)務(wù)邏輯寫到控制層其實(shí)是違背了MVC模式的思想，同時(shí)控制層是前端和服務(wù)端通訊的橋梁，其實(shí)控制層是參入了前端的工作任務(wù)，既然控制層要?jiǎng)冸x業(yè)務(wù)操作同時(shí)控制層也要參入前端應(yīng)用的開發(fā)，那么將控制層歸為前端的一部分是完全合情合理合規(guī)的。
把控制層剝離了業(yè)務(wù)邏輯處理可能會讓人不知道如何開發(fā)了，我覺得有這種想法的人是開發(fā)時(shí)候沒有理解透MVC模式思想，編程隨意性大養(yǎng)成了壞習(xí)慣，這個(gè)就需要這些人一點(diǎn)點(diǎn)去適應(yīng)技術(shù)新趨勢的發(fā)展。
前后端分離的終極目標(biāo)應(yīng)該是前端和服務(wù)端是完全獨(dú)立的項(xiàng)目，前端項(xiàng)目包含上圖里的瀏覽器和控制層，服務(wù)端項(xiàng)目包括服務(wù)層、DAO層等等，前端項(xiàng)目和服務(wù)端項(xiàng)目以高效的遠(yuǎn)程調(diào)用框架做通訊介質(zhì)，項(xiàng)目開發(fā)時(shí)候前端項(xiàng)目做前端的事情，服務(wù)項(xiàng)目做服務(wù)端的事情，這樣就讓服務(wù)端開發(fā)的人員沒有機(jī)會在控制層亂寫代碼了，保證了Web前端環(huán)境的純粹性，最后生產(chǎn)發(fā)布也要獨(dú)立部署，這樣就達(dá)到了前后端真正解耦，但是前后端的溝通機(jī)制也是不可或缺的，我覺得它們之間的溝通使用高性能的遠(yuǎn)程調(diào)用框架，前后端相互約定通訊報(bào)文格式。.
其實(shí)不管服務(wù)端還是前端宏觀流程無非是輸入數(shù)據(jù)à數(shù)據(jù)處理à輸出數(shù)據(jù)，但是服務(wù)端要把心思花在數(shù)據(jù)處理上，前端要更多關(guān)心的是輸入輸出數(shù)據(jù)時(shí)候的用戶體驗(yàn)操作，服務(wù)端開發(fā)最大的問題就是違背MVC原則，代碼編寫的隨意性，而前端不管出于安全還是性能考慮，最好是盡量少牽涉業(yè)務(wù)。前端和后端通訊層的獨(dú)立，會將前后端進(jìn)行真正的解耦，前面我講到前后真正問題就是前端和后端技術(shù)路線不一致，但是傳統(tǒng)Web開發(fā)里前后端又要融為一體，這就導(dǎo)致前后端很難做到專業(yè)化分工，對于前端應(yīng)該盡量弱化通訊級別的開發(fā)工作，前端通訊編程只要知道調(diào)用哪個(gè)接口，傳什么參數(shù)，怎么處理響應(yīng)信息就行了。這樣就能讓前端和后端實(shí)現(xiàn)真正的專業(yè)化。
做到了這些，就不會發(fā)生開發(fā)時(shí)候前后端邊界不清的問題了。
(三) 前后端分離的一些想法
本文主題應(yīng)該是前后端分離，我上面的建議是個(gè)徹底方案，要革以前系統(tǒng)的命，對存量系統(tǒng)那該如何處理，答案還是重構(gòu)代碼，想方設(shè)法逐步減少已經(jīng)發(fā)現(xiàn)的前后端耦合度高的問題，這個(gè)跟我之前的建議就是小重構(gòu)和大重構(gòu)的區(qū)別，如果有人覺得我上面建議合適，前端組應(yīng)該馬上提供一套這樣的框架出來，這樣后面的新系統(tǒng)就不會在循環(huán)前面的錯(cuò)誤了。我覺得搭建這樣的框架不會太復(fù)雜的。
我上面的前后端分離的目的就是將前端資源整合為一個(gè)整體，理清前后端的邊界，這些做完后，前端組里該如何提升自己的能力了？
這時(shí)候要讓前端的東西項(xiàng)目化，工程化，前端技術(shù)不能再當(dāng)做開發(fā)者的玩具，它也是需要大量的系統(tǒng)架構(gòu)，開發(fā)規(guī)范，自動(dòng)化壓縮混淆，自動(dòng)化發(fā)布，前端監(jiān)控和分析，前端優(yōu)化等等。
上面這些問題都很重要，也很專業(yè)，如果我有機(jī)會能參入這樣的事情，我還有個(gè)特別的建議，具體如下：
在一個(gè)企業(yè)內(nèi)部，Web前端的組件，不管這個(gè)組件是UI層級，還是javascript開發(fā)層級，都脫離不了該企業(yè)業(yè)務(wù)產(chǎn)品的模式，其實(shí)看看像網(wǎng)易，新浪這樣的門戶網(wǎng)站的前端應(yīng)用組件，它們用于做門戶很合適，但是用它來做企業(yè)應(yīng)用軟件可能就不是太好使用，因此對于組件要有一個(gè)清晰的認(rèn)識，我覺得可以把組件按業(yè)務(wù)場景分類，這里我可以舉個(gè)例子，如果這個(gè)企業(yè)有給門戶使用的組件，而這個(gè)組件很適合門戶，應(yīng)該把它歸為門戶組件，如果某些組件適合做網(wǎng)站后臺管理的，那么就列為后臺管理組件，如果某些組件能跨多了業(yè)務(wù)場景則標(biāo)記為通用組件。
做分類的原因是為了理清組件的應(yīng)用邊界，這樣我們可以有針對性的積累和完善這些組件，有意識的開發(fā)相關(guān)的組件，最終形成一個(gè)針對某個(gè)業(yè)務(wù)組件的組件倉庫，這樣等新需求過來，Web前端的項(xiàng)目經(jīng)理或Web前端的技術(shù)經(jīng)理可以通過場景分析該需求需要使用那些現(xiàn)有的技術(shù)，需求里的那些場景是要進(jìn)行開發(fā)，新場景里有沒有新開發(fā)的代碼能生成新的組件，這就可以做到有計(jì)劃有次序的積累。
Web前端的核心人員應(yīng)該花更多精力去設(shè)計(jì)、積累、整理各種組件，通過實(shí)際業(yè)務(wù)需求去完善和豐富這些組件，最終達(dá)到組件可以覆蓋到全公司絕大多數(shù)場景，最終通過組件積累形成完善的Web前端開發(fā)規(guī)范，這樣的規(guī)范覆蓋面廣更加易于操作，對于企業(yè)而言Web前端開發(fā)流程就可以做到標(biāo)準(zhǔn)化，從而達(dá)到簡單培訓(xùn)一些技術(shù)能力不高的開發(fā)人員就能完成相關(guān)的開發(fā)任務(wù)，同時(shí)也讓W(xué)eb前端核心人員也能很好的把控項(xiàng)目的質(zhì)量和進(jìn)度。
以上就是我的一些前后端分離的想法，它是一個(gè)很宏觀的想法，沒有太多技術(shù)實(shí)現(xiàn)細(xì)節(jié)，如果這個(gè)想法如果針對存量系統(tǒng)，的確是一個(gè)顛覆性的方案，如果Web前端允許一切重頭來做，我個(gè)人覺得這還是很好的一個(gè)思路。前后端分離是Web前端專業(yè)化的萬里長征第一步，如果這一步做好，前端就有一套專屬自己的優(yōu)質(zhì)環(huán)境，那時(shí)候Web前端就會有更大的余力做更優(yōu)秀的工作，這就是我的愿景。
當(dāng)然我的構(gòu)想也許并不太正確，如果有大?？戳吮救宋恼逻€請多多指教。
