理解前後端分離概念
作者:技能樹IT修真院
連結:https://www.zhihu.com/question/304180174/answer/547205270
來源:知乎
這裡是經常容易被混淆的一些概念。
在說前後端分離之前,要先弄清楚:
1。什麼是前端?
2。什麼是後端?
3。什麼前後端不分離?
4。什麼是動態資料?
5。什麼是靜態檔案?
6。什麼是動靜分離?
然後,什麼是前後端分離就可以很清楚了。
所以,先來看第一個問題:什麼是前端?
這又可以分解成幾個小問題。
1。JS是前端麼?
2。只要用JS寫的,都是前端麼?
3。只要是前端工程師寫的,都是前端麼?
4。大前端就是指的用JS語言寫的前端,哪怕它是執行在伺服器那一端麼?
5。App算前端麼?
6。Html+CSS算前端麼?
7。小程式算前端麼?
8。ReactNative算前端麼?
這些問題其實會困擾很多人,每一個人的想法也是不一樣的。
通常情況下,我們說的前端,都是指瀏覽器這一端,瀏覽器這一端,又在通常情況下,都是用JS來實現的,所以又會引申為,用JS寫的大部分程式都是前端,包括App,小程式,H5等。而NodeJS出現之後,用NodeJS寫的後端部分,也會被人歸類為前端,為了區分之前的前端,就給他們起了一個名字,叫做“大前端”。
但,這種以語言為分界點去區分前後端,真的合理麼?
在過去,我們是不分前後端的,無論是Java還是JS,全都是一個人來寫。
倒底是什麼原因讓我們開始區分前後端了?
第一個,是可以並行開發。前後端的進度互不影響,在過去,前後端不分離的情況下,前端的工作量相對較少,一個前端可以對四個後端。 可以理解為,前端花了一週時間寫好了靜態頁面,只需要調幾個Ajax介面,不需要路由,也不需要渲染,所以他可以把時間繼續在下一個專案裡。
第二個,是成本問題。在過去,後端的成本還是比前端要高一些。同樣的工作,如果能拆給兩個人做,一個成本高一點,一個成本低一點,能接受。
第三個,CSS太難了。JS還好,和後端語言在對技能的訓練上相差不大,可是。。CSS是什麼鬼?記住那麼多的屬性,和Hash演算法有關係嗎?
所以才分成了前後端,而Html+CSS+JS,都是在瀏覽器端執行,統一稱之為前端。
而Java,C,Python,PHP這些可以執行在伺服器端的,統一稱之為後端。
所以前後端的定義,不應該是以語言來定義,而是應該以它的執行環境,如果是在伺服器端,就應該被稱之為後端,代表著你看不見,摸不著。而如果執行在使用者端,就應該被稱之為前端,代表你是可以看得到的。
按照這種說法,前端和後端就分的很清楚了。
我們接下來再看,什麼叫前後端不分離。
在Android和IOS沒有出現的年代,還有一種流行的說法,叫做C/S和B/S架構。現在已經很少有人提了,如果你知道,這又是一個暴露年齡的名詞。
C/S架構,指的就是Client-Server,意思就是在桌面程式上,有一個客戶端,然後遠端連線伺服器端,用Socket或者是Http傳輸資料。
而B/S架構,就是指通過瀏覽器訪問,不用提前安裝一個客戶端。
B/S架構,曾一度被認為是C/S架構的替代者,好處就是無須安裝,簡單方便,研發速度也快。
在那個時候,JSP,ASP,PHP還被稱為三駕馬車。
那個時候的寫法,就是後端去控制一切。http://game.ptteng.com 是我很久之前寫的一個前後端不分離的網站,右鍵的話,可以看到是一個完整的Html頁。
這是什麼意思呢?就是指,瀏覽器訪問的是一個完整的Html網頁,而這個網頁呢,並不是一個靜態的網頁,寫好在伺服器上的,而是應用程式從資料庫裡取資料生成的,動態網頁。
所以,前後端不分離的互動方式很簡單,就是瀏覽器發請求,伺服器端給出一個完整的網頁,瀏覽器再發請求,伺服器端再給出一個完整的網頁。
壞處很明顯,傳輸的重複資料比較多,網路又會有延遲。所以有沒有辦法,只傳送必要的資料?
這是Ajax的起源。
Ajax就是隻傳遞資料,不傳遞整個網頁。這也是被用來在翻頁,註冊,傳送驗證碼等場景,但也僅僅止佈於此了。
怎麼樣提升訪問的效能,更多的人用的是網頁靜態化的技術。
就是把所有的動態資料都提前生成很多很多靜態的Html網頁,這樣就避免了從資料庫裡取資料的時間。
這種方式本來不會發生變化,大家都習慣了這種做法。
突然有一天,蘋果說我們釋出了Iphone。這個Iphone居然可以讓程式執行在手機上。
很有一種C/S架構的感覺。
只是過去的C/S架構並沒有大規模的應用在網際網路上,多數上傳統行業,網際網路還是前後端不分離的多一些。
可是後端在寫這些被稱之為客戶端的程式,就覺得太爽了。
過去還要套頁面,還要控制跳轉,現在呢?
面向Api程式設計啊,只需要告訴我Api是什麼,我的每一個Api都是獨立的,互相之間沒有依賴。
App自己做控制,做快取,做跳轉,做互動。
後端神馬都不用管,只需要保證自己的Api介面是好的。Postman很好用啊。還能自我驗證。
但是不爽的在哪裡?
就是針對客戶端會有一個ApiServer,然後針對網頁,還會有一個Home。
兩個功能經常會一致,但是後端人員要寫兩套程式碼。一套是生成Json的,一套是生成Html網頁的。
前端JS也很羨慕客戶端的開發人員啊。過去前端就是一個打邊角料的角色,只能寫寫靜態檔案,看著後端去把頁面套的錯誤百出,偶爾寫個校驗,傳送一個請求。
可是人家客戶端!跟後端就沒什麼廢話說,你只需要把API保證正確,剩下的全部我來。
兩者之間的互動簡單方便,快捷省力。多好的方式?
所以網頁能否和客戶端一樣,也把決策權拿自己手裡?
實際上是可以的啊。Angular就這麼幹了!
這就是SPA的含義之一,總之,到這個時候,前後端分離的意義才展示出來。
再說什麼叫做動靜分離,這裡還牽涉到一個叫做打版本的概念。
一般而言,會分成開發,測試和線上的環境。
在SVN的年代,分成Trunk,Branches和Tags。
Tag,就是一個版本的快照。
為什麼要有版本的快照?是希望能夠在發生錯誤的時候回滾。
所以在前後端不分離的時候,如果發現網頁上有一個錯別字,怎麼辦?
不好意思,拉一個分支出來,重新打Tag,前端後端的程式碼一起打。不允許你手動修改。
但是後端的釋出是需要重啟服務的啊。
為嘛我改一個錯別字就需要重啟服務?有沒有辦法讓後端和前端不在一起部署?
互相獨立?前端你寫錯字了,你自己來,反正 你又不需要重啟?
這就是動靜分離的起源。
把動態程式和靜態程式分開,大家互相不影響,各自部署分開。
現在,你能區分出來這些概念了嗎?