理解前後端分離概念
作者：技能樹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，前端後端的程式碼一起打。不允許你手動修改。
但是後端的釋出是需要重啟服務的啊。
為嘛我改一個錯別字就需要重啟服務？有沒有辦法讓後端和前端不在一起部署？
互相獨立？前端你寫錯字了，你自己來，反正 你又不需要重啟？
這就是動靜分離的起源。
把動態程式和靜態程式分開，大家互相不影響，各自部署分開。
現在，你能區分出來這些概念了嗎?