国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > Web 前后端分離的意義大嗎？

Web 前后端分離的意義大嗎？

時(shí)間：2023-11-29 19:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-11-29 19:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Web 前后端分離的意義大嗎？：前后端分離到工程完善。Node.js和NPM生態(tài)初步建立的階段，阿里借助node.js做前后端分離的嘗試，在很多質(zhì)疑當(dāng)中，PHP最后怎么樣你們也知道，基本廢棄了Java的web容器。前端在node.js生態(tài)之下，也開(kāi)始有了express、koa、egg、begg這樣的web應(yīng)用框架開(kāi)源，也開(kāi)始有了借助node.js完成的工程腳手架套件。

前后端的分離對(duì)前端開(kāi)發(fā)的效率上沒(méi)有什么太多改進(jìn)，反而是前端工程體系上更加完善和健全。以前叫切圖在，從前后端分離之后就不是了！因?yàn)榍岸说墓こ腆w系，比如IDE、研發(fā)、構(gòu)建、打包、集成、測(cè)試、灰度、生產(chǎn)服務(wù)等等。不必后端差多少。

一、什么是前后端分離

大家一致認(rèn)同的前后端分離的例子就是SPA(Single-page application)，所有用到的展現(xiàn)數(shù)據(jù)都是后端通過(guò)異步接口(AJAX/JSONP)的方式提供的，前端只管展現(xiàn)。

SPA式的前后端分離，是從物理層做區(qū)分（認(rèn)為只要是客戶端的就是前端，服務(wù)器端的就是后端），這種分法已經(jīng)無(wú)法滿足我們前后端分離的需求，我們認(rèn)為從職責(zé)上劃分才能滿足目前我們的使用場(chǎng)景：

為什么去做這種職責(zé)的劃分，后面會(huì)繼續(xù)探討。

二、為什么進(jìn)行前后端分離

關(guān)于這個(gè)問(wèn)題，玉伯的文章Web研發(fā)模式演變中解釋得非常全面，我們?cè)俅蟾爬硪幌拢?br>

2.1 現(xiàn)有開(kāi)發(fā)模式的適用場(chǎng)景

玉伯提到的幾種開(kāi)發(fā)模式，各有各的適用場(chǎng)景，沒(méi)有哪一種完全取代另外一種。

2.2 前后端職責(zé)不清

在業(yè)務(wù)邏輯復(fù)雜的系統(tǒng)里，我們最怕維護(hù)前后端混雜在一起的代碼，因?yàn)闆](méi)有約束，M-V-C每一層都可能出現(xiàn)別的層的代碼，日積月累，完全沒(méi)有維護(hù)性可言。
雖然前后端分離沒(méi)辦法完全解決這種問(wèn)題，但是可以大大緩解。因?yàn)閺奈锢韺哟紊媳ＷC了你不可能這么做。

2.3 開(kāi)發(fā)效率問(wèn)題

淘寶的Web基本上都是基于MVC框架webx，架構(gòu)決定了前端只能依賴后端。
所以我們的開(kāi)發(fā)模式依然是，前端寫(xiě)好靜態(tài)demo，后端翻譯成VM模版，這種模式的問(wèn)題就不說(shuō)了，被吐槽了很久。
直接基于后端環(huán)境開(kāi)發(fā)也很痛苦，配置安裝使用都很麻煩。為了解決這個(gè)問(wèn)題，我們發(fā)明了各種工具，比如VMarket，但是前端還是要寫(xiě)VM，而且依賴后端數(shù)據(jù)，效率依然不高。
另外，后端也沒(méi)法擺脫對(duì)展現(xiàn)的強(qiáng)關(guān)注，從而專心于業(yè)務(wù)邏輯層的開(kāi)發(fā)。

2.4 對(duì)前端發(fā)揮的局限

性能優(yōu)化如果只在前端做空間非常有限，于是我們經(jīng)常需要后端合作才能碰撞出火花，但由于后端框架限制，我們很難使用Comet、Bigpipe等技術(shù)方案來(lái)優(yōu)化性能。

為了解決以上提到的一些問(wèn)題，我們進(jìn)行了很多嘗試，開(kāi)發(fā)了各種工具，但始終沒(méi)有太多起色，主要是因?yàn)槲覀冎荒茉诤蠖私o我們劃分的那一小塊空間去發(fā)揮。只有真正做到前后端分離，我們才能徹底

三、怎么做前后端分離？

怎么做前后端分離，其實(shí)第一節(jié)中已經(jīng)有了答案：







試想一下，如果前端掌握了Controller，我們可以做url design，我們可以根據(jù)場(chǎng)景決定在服務(wù)端同步渲染，還是根據(jù)view層數(shù)據(jù)輸出json數(shù)據(jù)，我們還可以根據(jù)表現(xiàn)層需求很容易的做Bigpipe,Comet,Socket等等，完全是需求決定使用方式。

3.1 基于NodeJS“全?！笔介_(kāi)發(fā)

如果想實(shí)現(xiàn)上圖的分層，就必然需要一種web服務(wù)幫我們實(shí)現(xiàn)以前后端做的事情，于是就有了標(biāo)題提到的“基于NodeJS的全棧式開(kāi)發(fā)”

這張圖看起來(lái)簡(jiǎn)單而且很好理解，但沒(méi)嘗試過(guò)，會(huì)有很多疑問(wèn)。

這些問(wèn)題要說(shuō)清楚不容易，下面說(shuō)下我的認(rèn)識(shí)過(guò)程。

3.2 為什么要增加一層NodeJS？

現(xiàn)階段我們主要以后端MVC的模式進(jìn)行開(kāi)發(fā)，這種模式嚴(yán)重阻礙了前端開(kāi)發(fā)效率，也讓后端不能專注于業(yè)務(wù)開(kāi)發(fā)。
解決方案是讓前端能控制Controller層，但是如果在現(xiàn)有技術(shù)體系下很難做到，因?yàn)椴豢赡茏屗星岸硕紝W(xué)java，安裝后端的開(kāi)發(fā)環(huán)境，寫(xiě)VM。
NodeJS就能很好的解決這個(gè)問(wèn)題，我們無(wú)需學(xué)習(xí)一門(mén)新的語(yǔ)言，就能做到以前開(kāi)發(fā)幫我們做的事情，一切都顯得那么自然。

3.3 性能問(wèn)題

分層就涉及每層之間的通訊，肯定會(huì)有一定的性能損耗。但是合理的分層能讓職責(zé)清晰、也方便協(xié)作，會(huì)大大提高開(kāi)發(fā)效率。分層帶來(lái)的損失，一定能在其他方面的收益彌補(bǔ)回來(lái)。
另外，一旦決定分層，我們可以通過(guò)優(yōu)化通訊方式、通訊協(xié)議，盡可能把損耗降到最低。

舉個(gè)例子：
淘寶寶貝詳情頁(yè)靜態(tài)化之后，還是有不少需要實(shí)時(shí)獲取的信息，比如物流、促銷等等，因?yàn)檫@些信息在不同業(yè)務(wù)系統(tǒng)中，所以需要前端發(fā)送5，6個(gè)異步請(qǐng)求來(lái)回填這些內(nèi)容。
有了NodeJS之后，前端可以在NodeJS中去代理這5個(gè)異步請(qǐng)求，還能很容易的做Bigpipe,這塊的優(yōu)化能讓整個(gè)渲染效率提升很多。
可能在PC上你覺(jué)得發(fā)5,6個(gè)異步請(qǐng)求也沒(méi)什么，但是在無(wú)線端，在客戶手機(jī)上建立一個(gè)HTTP請(qǐng)求開(kāi)銷很大，有了這個(gè)優(yōu)化，性能一下提升好幾倍。

淘寶詳情基于NodeJS的優(yōu)化我們正在進(jìn)行中，上線之后我會(huì)分享一下優(yōu)化的過(guò)程。

3.4 前端的工作量是否增加了？

相對(duì)于只切頁(yè)面/做demo，肯定是增加了一點(diǎn)，但是當(dāng)前模式下有聯(lián)調(diào)、溝通環(huán)節(jié)，這個(gè)過(guò)程非常花時(shí)間，也容易出bug，還很難維護(hù)。
所以，雖然工作量會(huì)增加一點(diǎn)，但是總體開(kāi)發(fā)效率會(huì)提升很多。

另外，測(cè)試成本可以節(jié)省很多。以前開(kāi)發(fā)的接口都是針對(duì)表現(xiàn)層的，很難寫(xiě)測(cè)試用例。如果做了前后端分離，甚至測(cè)試都可以分開(kāi)，一撥人專門(mén)測(cè)試接口，一撥人專注測(cè)試UI（這部分工作甚至可以用工具代替）。

3.5 增加Node層帶來(lái)的風(fēng)險(xiǎn)怎么控制？

隨著Node大規(guī)模使用，系統(tǒng)/運(yùn)維/安全部門(mén)的同學(xué)也一定會(huì)加入到基礎(chǔ)建設(shè)中，他們會(huì)幫助我們?nèi)ネ晟聘鱾€(gè)環(huán)節(jié)可能出現(xiàn)的問(wèn)題，保障系的穩(wěn)定性。

3.6 Node什么都能做，為什么還要JAVA？

我們的初衷是做前后端分離，如果考慮這個(gè)問(wèn)題就有點(diǎn)違背我們的初衷了。即使用Node替代Java，我們也沒(méi)辦法保證不出現(xiàn)今天遇到的種種問(wèn)題，比如職責(zé)不清。我們的目的是分層開(kāi)發(fā)，專業(yè)的人，專注做專業(yè)的事?；贘AVA的基礎(chǔ)架構(gòu)已經(jīng)非常強(qiáng)大而且穩(wěn)定，而且更適合做現(xiàn)在架構(gòu)的事情。

四、淘寶基于Node的前后端分離







上圖是我理解的淘寶基于Node的前后端分離分層，以及Node的職責(zé)范圍。簡(jiǎn)單解釋下：

這種模式我們已經(jīng)有兩個(gè)項(xiàng)目在開(kāi)發(fā)中，雖然還沒(méi)上線，但是無(wú)論是在開(kāi)發(fā)效率，還是在性能優(yōu)化方面，我們都已經(jīng)嘗到了甜頭。

五、我們還需要要做什么？

技術(shù)上不會(huì)有太多需要去創(chuàng)新和研究的，已經(jīng)有非常多現(xiàn)成的積累。其實(shí)關(guān)鍵是一些流程的打通和通用解決方案的積累，相信隨著更多的項(xiàng)目實(shí)踐，這塊慢慢會(huì)變成一個(gè)穩(wěn)定的流程。

前端技術(shù)棧：

HTML+CSS-->移動(dòng)web->JavaScript基礎(chǔ)-->Web APIs->數(shù)據(jù)交互&異步編程-->Node.js-->Vue2+Vue3-->React核心技術(shù)-->微信小程序

關(guān)鍵詞：意義,分離

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉