（轉(zhuǎn)）818前后分離的架構(gòu)以及Node在其中的作用

818前后分離的架構(gòu)以及Node在其中的作用

博客分類：前端科普

很久沒(méi)寫博客，但是我真是沒(méi)閑著，也沒(méi)得閑。。。Anyway，一年一篇還是要保證的。

為什么要做前后分離？

可以這樣去理解何謂前后分離，它其實(shí)是展現(xiàn)端和數(shù)據(jù)服務(wù)的分離。

這里第一件要做的事情就是服務(wù)端純數(shù)據(jù)接口化改造，為什么要做這件事情呢？因?yàn)槎喽藭r(shí)代已經(jīng)來(lái)臨，一項(xiàng)數(shù)據(jù)可能需要以不同的樣子展現(xiàn)在PC瀏覽器中、移動(dòng)瀏覽器中以及移動(dòng)App中。服務(wù)端的純數(shù)據(jù)接口可以同時(shí)為多展現(xiàn)端服務(wù)，這顯然可以提高研發(fā)效率。

前后分離的另一個(gè)好處就是讓前后端工程師的職責(zé)更加明晰，除了單一數(shù)據(jù)源多展現(xiàn)端支撐之外，好的前后端分離架構(gòu)還必須具備前后端基于接口定義獨(dú)立并行開(kāi)發(fā)，前后端獨(dú)立發(fā)布等能力。

今天討論的內(nèi)容大綱

在過(guò)去的幾年，以Backbone為代表的OPOA（One Page One Application）解決方案盛行。而如今，使用Node在服務(wù)端負(fù)責(zé)展現(xiàn)層的架構(gòu)亦漸起燎原之勢(shì)。那么后者對(duì)于前者到底是進(jìn)化、革新，還是面向不同場(chǎng)景的不同架構(gòu)？是今天突然想寫篇文章來(lái)八一八的內(nèi)容：

前后分離最徹底的方案是OPOA

OPOA適合什么場(chǎng)景又有什么問(wèn)題

多端時(shí)代OPOA依然需要進(jìn)化

Node負(fù)責(zé)展現(xiàn)層的“前后分離”方案又是什么

如何看待Node在其中的位置

前后分離最徹底的方案是OPOA

OPOA的架構(gòu)示意圖如上，如果我們單看一個(gè)邏輯頁(yè)面（一個(gè)時(shí)間點(diǎn)瀏覽器中的全部?jī)?nèi)容），分析一下有幾個(gè)特點(diǎn)：

頁(yè)面完全由前端構(gòu)建拼裝，Backbone等框架的任務(wù)是把頁(yè)面中的視圖排排好

多數(shù)情況由視圖來(lái)發(fā)起其所需的數(shù)據(jù)請(qǐng)求，所以會(huì)有多個(gè)Ajax請(qǐng)求或并行、或串行的發(fā)生

服務(wù)端的數(shù)據(jù)接口提供獨(dú)立的http服務(wù)。

為什么說(shuō)OPOA是最徹底的前后分離方案？首先，這里的分離是瀏覽器端和服務(wù)端的真正分離，跟“前”與“后”這個(gè)說(shuō)法更貼近：）；當(dāng)然更主要是前后端的在物理位置上的鴻溝，客觀要求服務(wù)端純數(shù)據(jù)接口化的改造必須進(jìn)行的徹徹底底；此外，“徹底”還表現(xiàn)在：OPOA額外的好處是對(duì)前端性能有幫助，復(fù)雜交互組件所需的JS和模板，無(wú)需重復(fù)加載、運(yùn)行，給系統(tǒng)易用性帶來(lái)幫助。

在我們團(tuán)隊(duì)負(fù)責(zé)的阿里媽媽的廣告業(yè)務(wù)系統(tǒng)中賣家后臺(tái)系統(tǒng)占據(jù)了較大的比重，應(yīng)對(duì)這類產(chǎn)品，團(tuán)隊(duì)選擇以單頁(yè)應(yīng)用架構(gòu)來(lái)促成前后分離。歷時(shí)三年半，十余個(gè)賣家系統(tǒng)已全部OPOA化，可以做到前后端基于接口定義并行開(kāi)發(fā)、前后端獨(dú)立發(fā)布、單一數(shù)據(jù)源多展現(xiàn)端支撐。

OPOA適合什么場(chǎng)景又有什么問(wèn)題

OPOA更適合一個(gè)頁(yè)面不太多，但交互復(fù)雜的系統(tǒng)。如果系統(tǒng)中的眾多頁(yè)面長(zhǎng)的根本不一樣，多頁(yè)面間也沒(méi)有太多重復(fù)的組件，那么OPOA帶來(lái)的性能提升就很小了。而且OPOA架構(gòu)本身也有著難以解決的問(wèn)題：

OPOA最大的問(wèn)題是搜索引擎不友好，雖然已有多種為Spider提供內(nèi)容的方案，但依然對(duì)SEO有傷害，這對(duì)很多網(wǎng)站而言是致命的。

OPOA中復(fù)雜頁(yè)面，往往請(qǐng)求數(shù)較多，在PC端沒(méi)有問(wèn)題，但對(duì)于移動(dòng)端而言就不那么美觀了。

多端時(shí)代OPOA依然需要進(jìn)化

拋開(kāi)SEO不談，在多端時(shí)代，OPOA依然需要進(jìn)一步進(jìn)化，目標(biāo)是來(lái)解決請(qǐng)求數(shù)較多的問(wèn)題。

如上圖所示，我們要做的是“動(dòng)態(tài)數(shù)據(jù)的Combo”（這樣說(shuō)，是方便大家對(duì)比常見(jiàn)的靜態(tài)JS、CSS的Combo），即：

前端：我們需要一個(gè)動(dòng)態(tài)請(qǐng)求管理器，將多個(gè)請(qǐng)求集中起來(lái)，發(fā)送給后臺(tái)服務(wù)。

后端：我們需要一個(gè)請(qǐng)求分解到多個(gè)子服務(wù)，再將多個(gè)子服務(wù)返回的數(shù)據(jù)Combo后返回。

Node負(fù)責(zé)展現(xiàn)層的“前后分離”方案又是什么

在上上小節(jié)我們分析過(guò)，如果一個(gè)系統(tǒng)多個(gè)頁(yè)面之間并沒(méi)有太多重合，頁(yè)面間沒(méi)有太多需共用的復(fù)雜的交互組件，那么OPOA就不是必須的。這時(shí)候我們還能不能做到前后分離呢？我們回到前后分離的初衷：

單一數(shù)據(jù)源多展現(xiàn)端支撐

前后端基于接口定義獨(dú)立并行開(kāi)發(fā)

前后端獨(dú)立發(fā)布

我們基于上一張圖，而不是OPOA之前的傳統(tǒng)網(wǎng)頁(yè)架構(gòu)去理解所謂“Node負(fù)責(zé)展現(xiàn)層”相關(guān)技術(shù)方案，會(huì)更容易循序漸進(jìn)的發(fā)現(xiàn)它的實(shí)質(zhì)。

無(wú)論哪種標(biāo)榜“前后分離”架構(gòu)服務(wù)端純數(shù)據(jù)接口化的改造都是必須的，我們做到這一點(diǎn)之后，在使用Node負(fù)責(zé)展現(xiàn)層的架構(gòu)中，就還有兩個(gè)任務(wù)需要完成：

Action1：將動(dòng)態(tài)請(qǐng)求Combo的相關(guān)邏輯，用Node實(shí)現(xiàn)，包括頁(yè)面多數(shù)據(jù)區(qū)塊對(duì)于數(shù)據(jù)需求的統(tǒng)一管理，以及統(tǒng)一獲取。

Action2：將Backbone等前端OPOA框架中對(duì)于路由、視圖的管理移植到Node中。

做完這兩項(xiàng)任務(wù)之后，在瀏覽器端的表象上，網(wǎng)頁(yè)從單頁(yè)應(yīng)用的Web Application回歸到傳統(tǒng)的多頁(yè)Web Page模式。但是通過(guò)良好的設(shè)計(jì)，我們依然可以拿到做“前后分離”最想要的那些好處。

本文總結(jié)，以及如何看待Node在其中的位置

在多端時(shí)代，服務(wù)端純數(shù)據(jù)接口化改造是大勢(shì)所趨，這客觀上給“前后分離”提供了更大的舞臺(tái)。一個(gè)傳統(tǒng)多頁(yè)型網(wǎng)頁(yè)系統(tǒng)在完成服務(wù)端接口化改造之后，需要做的事情有兩個(gè)：統(tǒng)一管理構(gòu)成一個(gè)頁(yè)面的所有數(shù)據(jù)需求，完成頁(yè)面拼裝并輸出。

而單就這兩個(gè)任務(wù)而言，Node應(yīng)該說(shuō)不是必須的。Node的異步特性，高并發(fā)能力都不足以成為其在服務(wù)端多語(yǔ)言競(jìng)爭(zhēng)的環(huán)境里獲勝的核心優(yōu)勢(shì)。

我認(rèn)為引入Node的優(yōu)勢(shì)有兩個(gè)：

促進(jìn)前后端更好的分離，就像CSS出現(xiàn)之后，我們不再用標(biāo)簽定義文字樣式一般，引入不同的技術(shù)、不同的語(yǔ)言可以讓每（轉(zhuǎn)）818前后分離的架構(gòu)以及Node在其中的作用個(gè)模塊所承擔(dān)的職責(zé)更加界線清晰，進(jìn)而讓服務(wù)端純接口化改造更徹底、更堅(jiān)定�！扒啊迸c“后”在服務(wù)端進(jìn)行分離，OPOA中瀏覽器與服務(wù)端在物理位置上的鴻溝不再存在，那么新的語(yǔ)言和技術(shù)是劃分邊界這一任務(wù)的繼承者。

促成前端工程師和后端工程師在開(kāi)發(fā)時(shí)的解耦，面對(duì)明晰的接口定義，前端工程師可以和后端工程師并行無(wú)交集的開(kāi)發(fā)，直到最后階段聯(lián)調(diào)。這可以帶來(lái)研發(fā)效率上的極大提升。

“天下武功、唯快不破”，無(wú)論是做徹徹底底的OPOA，還是用Node做展現(xiàn)層服務(wù)，它們所帶來(lái)的研發(fā)效率方面的提升才是架構(gòu)革新的源動(dòng)力。

對(duì)于前端工程師而言，還需戒躁戒躁吧，用了Node不等于“高、大、上”，我們切換至服務(wù)端做的事情與一個(gè)良好的“Backbone”類框架沒(méi)有太多本質(zhì)的區(qū)別。而在前后分離之后，前端承擔(dān)的職責(zé)無(wú)疑更重了，過(guò)往我們開(kāi)發(fā)完Demo就可以撒手不管的情況不再存在。特別是介入服務(wù)端研發(fā)之后，線上故障、穩(wěn)定性、安全性這些過(guò)往和前端不太挨邊兒的令人惶恐的東東都會(huì)不期而至，我感覺(jué)前端們還沒(méi)做好準(zhǔn)備，常常都是經(jīng)歷過(guò)了才有切身的體會(huì)，才會(huì)成長(zhǎng)吧。

分享到：

來(lái)自：http://limu.iteye.com/blog/2042700

【轉(zhuǎn)818前后分離的架構(gòu)以及Node在其中的作用】相關(guān)文章：

JNK介導(dǎo)的信號(hào)轉(zhuǎn)導(dǎo)途徑以及活性氧在其中的作用04-30

青梅抑菌作用及其抑菌成分的分離鑒定05-03

ERβ相互作用蛋白PSMC5的分離及其在ERβ信號(hào)途徑中的作用05-02

微生物谷氨酰胺轉(zhuǎn)胺酶(MTG)的分離純化05-02

發(fā)財(cái)日818發(fā)一發(fā)祝福短信07-08

學(xué)在其中樂(lè)在其中04-28

考試前后02-07

考試前后05-02

紅系分化相關(guān)基因相互作用蛋白質(zhì)的分離與鑒定04-26

A Fast Global Node Selection Algorithm for Bearings-only Target Localization04-28