什么是前后端分離除了前端之外都屬于后端了。
你負(fù)責(zé)貌美如花，我負(fù)責(zé)賺錢(qián)養(yǎng)家 在傳統(tǒng)的像ASP，JSP和PHP等開(kāi)發(fā)模式中，前端是處在一個(gè)混沌的狀態(tài)中，可以說(shuō)是沒(méi)有獨(dú)立的“人格”可言。 前端負(fù)責(zé)切圖和編寫(xiě)靜態(tài)頁(yè)面模板，后端將數(shù)據(jù)渲染到前端提供的頁(yè)面模板中，最后將頁(yè)面渲染到瀏覽器展示。 這個(gè)過(guò)程中，前端只提供頁(yè)面模板或者寫(xiě)一些JavaScript腳本，有的甚至JS腳本都是后端來(lái)寫(xiě)，前端的作用只局限于切圖和樣式模板文件，這種角色就是傳說(shuō)中的“切圖仔”。 這也是為什么行業(yè)內(nèi)都覺(jué)得前端是一個(gè)很簡(jiǎn)單的工作，只要花個(gè)一周，學(xué)下HTML、CSS和PS的簡(jiǎn)單技巧就可以勝任的工作。 現(xiàn)在看來(lái)，那時(shí)候的前端就是一個(gè)打醬油的，發(fā)展前景很有限。那時(shí)候的JavaScript腳本也比較簡(jiǎn)單，一個(gè)jQuery就可以橫掃天下，所以對(duì)于精通語(yǔ)言類(lèi)代碼的后端程序員來(lái)說(shuō)，可以很快的上手JavaScript，對(duì)前端來(lái)說(shuō)，發(fā)展空間就更小了。
那時(shí)候前端內(nèi)心是這樣的 前后端分離，不只是簡(jiǎn)單的代碼的分離。 首先是要架構(gòu)上分離解耦，逐漸擺脫前后端在架構(gòu)上的依賴(lài)，前后端各司其職，分開(kāi)部署在不同的服務(wù)器上，通過(guò)RESTful接口傳遞數(shù)據(jù)。減輕后端服務(wù)器的壓力，后端服務(wù)器不再負(fù)責(zé)頁(yè)面渲染，只負(fù)責(zé)輸入數(shù)據(jù)，吞吐量提升了好幾倍。 其次是邏輯分離，不分離的時(shí)候，對(duì)于業(yè)務(wù)代碼的界限很不明確，業(yè)務(wù)邏輯基本都放在后端，分離之后，前端也承擔(dān)了一部分不該后端來(lái)寫(xiě)的業(yè)務(wù)邏輯，數(shù)據(jù)處理更加清晰。 最后是系統(tǒng)分離，同一個(gè)后端系統(tǒng)，可以將同樣的接口數(shù)據(jù)提供給PC端、Mobile端和Native端等不同的前端終端，不需要為每一種終端提供一套接口。同樣，對(duì)于前端應(yīng)用來(lái)說(shuō)，可以更方便的調(diào)用多個(gè)后端服務(wù)器的接口，處理和展示多個(gè)系統(tǒng)間的數(shù)據(jù)。
前后端分離，讓軟件開(kāi)發(fā)的流程更加清晰，解決了開(kāi)發(fā)階段的痛點(diǎn)。 從前，前端不止要學(xué)習(xí)后端的模板渲染語(yǔ)法，還要配置后端的開(kāi)發(fā)環(huán)境，并不斷同步后端的代碼，這對(duì)于前端來(lái)說(shuō)是非常痛苦的。 而現(xiàn)在，前端有自己的服務(wù)器，不需要再依靠后端服務(wù)器來(lái)支持項(xiàng)目運(yùn)行，如果在開(kāi)發(fā)階段，還可以使用mock數(shù)據(jù)（要先和后端確定接口數(shù)據(jù)結(jié)構(gòu)），擺脫對(duì)后端接口的依賴(lài)，這樣極大的提高了開(kāi)發(fā)效率，系統(tǒng)分工也更加明確。
分離之后的前端內(nèi)心是這樣的
當(dāng)然，如果只是提出一個(gè)概念，技術(shù)上不能實(shí)現(xiàn)也是空談。 隨著前端技術(shù)的更新發(fā)展，短短幾年內(nèi)就發(fā)展出了gulp、webpack等前端工程化工具，HTML5和JavaScript也不斷更新新特性，提供了前端應(yīng)用場(chǎng)景和開(kāi)發(fā)前端獨(dú)立應(yīng)用的技術(shù)支持，React Native、PWA和微信小程序等也都是以前端技術(shù)為基礎(chǔ)開(kāi)發(fā)移動(dòng)APP和小應(yīng)用，前端邁入了一個(gè)最好的時(shí)代。 前端技術(shù)在近些年的發(fā)展，也使得后端不能再將前端束縛在自己麾下，必須放開(kāi)手讓前端闖出自己的一片天，發(fā)揮大前端的優(yōu)勢(shì)。只是下面看一下，前端技術(shù)在近幾年有了哪些發(fā)展，使得前后端分離成為可能。
網(wǎng)站 H5游戲 H5游戲的開(kāi)發(fā)采用HTML5的canvas等制作，或者也可以使用webgl來(lái)做3D的H5游戲。 移動(dòng)APP 我們這里說(shuō)的移動(dòng)APP，是指使用前端技術(shù)來(lái)做的。前幾年，比較火的Hybird APP框架是ionic，也有國(guó)內(nèi)開(kāi)發(fā)者做的mui和HTML5+框架，這些框架的技術(shù)是將html、css和JavaScript打包成一個(gè)文件，將文件放到webview中訪問(wèn)，最后再在外層套上原生應(yīng)用的殼，生成IOS和Android的安裝文件。這種APP可以做很多簡(jiǎn)單的APP，不適合交互比較復(fù)雜的APP，因?yàn)閣ebview的性能還是存在一定的問(wèn)題，在Android設(shè)備上的卡頓變現(xiàn)比較明顯。 這兩年，以React為語(yǔ)法基礎(chǔ)的React Native和以Vue為語(yǔ)法基礎(chǔ)的Weex框架，成為新一代使用前端技術(shù)開(kāi)發(fā)移動(dòng)APP的框架，它們拋棄webview使用新的渲染機(jī)制，極大的提升了APP的性能和體驗(yàn)。目前這兩者都處在完善階段，在未來(lái)很被看好。 桌面應(yīng)用 Chrome APP 2010年Google推出了基于Chrome開(kāi)發(fā)的PC端操作系統(tǒng)Chrome OS，特點(diǎn)就是速度快，設(shè)計(jì)簡(jiǎn)潔等，相對(duì)應(yīng)的市場(chǎng)上也推出了很多基于Chrome OS的筆記本電腦，廠商有三星和戴爾等。 微信小程序 小程序按照前端技術(shù)來(lái)設(shè)計(jì)開(kāi)發(fā)，也做好了系統(tǒng)的兼容和不同設(shè)備的適配的設(shè)計(jì)，開(kāi)發(fā)者只需要專(zhuān)注于實(shí)現(xiàn)業(yè)務(wù)代碼即可。所以，只要熟悉前端技術(shù)就可以很快的做出一個(gè)小程序。 Web VR、Web AR 前端技術(shù)webgl，可以在瀏覽器上很好的實(shí)現(xiàn)3D場(chǎng)景，Three.js是這方便很好的JavaScript框架。Chrome瀏覽器已經(jīng)兼容Web VR，配合Daydream View，可以瀏覽Web VR頁(yè)面。
分離后的前端，不再是一個(gè)簡(jiǎn)單的HTML文件，已經(jīng)是一個(gè)獨(dú)立的應(yīng)用系統(tǒng)。除了要考慮頁(yè)面的數(shù)據(jù)渲染展示，還要用工程化的思想來(lái)考慮前端的架構(gòu)，前后端的交互和數(shù)據(jù)安全等事情。 架構(gòu) 前端應(yīng)用部署在Nodejs、Nginx或者Nodejs和Nginx組合的服務(wù)器上，通過(guò)反向代理轉(zhuǎn)發(fā)頁(yè)面請(qǐng)求到后端服務(wù)器，相當(dāng)于在傳統(tǒng)的流程中加了Nodejs這一層。當(dāng)然，也可以用Nodejs服務(wù)器來(lái)承擔(dān)一部分負(fù)載均衡的工作，業(yè)務(wù)邏輯也可以放在Nodejs這一層來(lái)處理，例如：通過(guò)判斷請(qǐng)求是來(lái)自PC還是APP，將請(qǐng)求發(fā)到不同的后端服務(wù)器。 Nodejs的架構(gòu)中，分層如下：
RESTful接口交互 REST是“呈現(xiàn)狀態(tài)轉(zhuǎn)移（REpresentational State Transfer）”的縮寫(xiě)，一種API的架構(gòu)風(fēng)格，在客戶(hù)端和服務(wù)端之間通過(guò)呈現(xiàn)狀態(tài)的轉(zhuǎn)移來(lái)驅(qū)動(dòng)應(yīng)用狀態(tài)的演進(jìn)。 在 REST 樣式的 Web 服務(wù)中，每個(gè)資源都有一個(gè)地址。資源本身都是方法調(diào)用的目標(biāo)，方法列表對(duì)所有資源都是一樣的。這些方法都是標(biāo)準(zhǔn)方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。 工程化構(gòu)建 Nodejs不止可以用來(lái)做前端服務(wù)器，在開(kāi)發(fā)階段，它也能發(fā)揮很大的作用。 前端生態(tài)的發(fā)展，是圍繞著Nodejs進(jìn)行的。用npm來(lái)管理項(xiàng)目依賴(lài)，可以很好的維護(hù)和運(yùn)行在Nodejs環(huán)境上。 打包工具grunt、gulp、webpack和rollup等，都是運(yùn)行在nodejs上，再結(jié)合語(yǔ)法編譯、打包部署等插件，將應(yīng)用輸入成一個(gè)完整的應(yīng)用。 如果你使用了Angular、React或Vue框架，或者你使用瀏覽器暫時(shí)還不兼容的ES6語(yǔ)法，還需要在應(yīng)用打包前用babel將語(yǔ)法編譯成瀏覽器可識(shí)別的ES5的語(yǔ)法。 SPA 像Angular、React或Vue就是為了SPA而設(shè)計(jì)的，結(jié)合前端路由庫(kù)（react-router、vue-router）和狀態(tài)熱存儲(chǔ)（redux、vuex）等，可以開(kāi)發(fā)出一個(gè)媲美Native APP的Web APP，用戶(hù)體驗(yàn)得到了很大的提升。 當(dāng)然，SPA也不是完美的，也不是適合所有的web應(yīng)用，需要結(jié)合項(xiàng)目和場(chǎng)景來(lái)選擇。 SPA有如下缺點(diǎn)：
前端技術(shù)日新月異，發(fā)展迅速，作為一個(gè)與時(shí)俱進(jìn)的前端工程師，還是要不斷的學(xué)習(xí)，更新技術(shù)棧。既然這樣，我們要掌握的技術(shù)有哪些呢？ 以下列出一些前端技術(shù)，有些已經(jīng)不會(huì)再應(yīng)用在新系統(tǒng)中，但是還是有很多老系統(tǒng)是使用它們做的。 語(yǔ)言知識(shí)
框架、庫(kù)
工具
前端時(shí)代的到來(lái)，對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，是一個(gè)最好的時(shí)代，同時(shí)也是最壞的時(shí)代。 說(shuō)是最好的時(shí)代，是因?yàn)楦鞣N前端技術(shù)都更新?lián)Q代，開(kāi)始應(yīng)用于更多場(chǎng)景，發(fā)揮出更大的優(yōu)勢(shì)和作用。對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，是充滿(mǎn)很多的機(jī)會(huì)的。 說(shuō)是最壞的時(shí)代，是因?yàn)榧夹g(shù)更新迭代速度非?？?，可能在兩三年內(nèi)，整套技術(shù)棧都要更新一遍，需要開(kāi)發(fā)者不斷的取學(xué)習(xí)，更新自己的知識(shí)庫(kù)，才能在技術(shù)更迭的大潮中被拍打到浪頭之后。
文章來(lái)源:https://mp.weixin.qq.com/s/_N9RKbTOGcohmrJXg9rqEg |
|
|
來(lái)自： 春和秋榮 > 《IntelliJ IDEA》
