[總結帖] 後端MVC V.S. 前端MVVM

Web編年史：

Web1.0 —— 靜態頁面、簡單預處理語言草案：PHP、JSP、ASP

Web2.0 —— 企業級架構、一站式解決方案(MVC)：J2EE、Spring、Asp.net

Web2.5 —— 前端架構雛形、後端架構成熟：Ajax、jQuery、Bootstrap、Asp.net MVC

Web3.0 —— 先後端分離(MVVM + Restful API)、全棧化、跨平臺(Hybrid)：Angularjs、Ionic、Nodejs、Cordova

 

先後端分離就必定是必然的趨勢嗎？答：具體狀況具體分析並客觀對待

Web 先後端分離的意義大嗎？（來自知乎） 

https://www.zhihu.com/question/28207685

我的認爲 徐飛 的回答較爲客觀中肯：

-----------------------------------------------------------------------------

做者：徐飛
連接：https://www.zhihu.com/question/28207685/answer/39893889
來源：知乎
著做權歸做者全部，轉載請聯繫做者得到受權。

 

這兩年業界說的先後端分離，是限於偏展現類的系統（用A代替），而不是應用、管控類Web項目（用B代替），在B類項目裏，先後端是自然分離的，對此，除了少部分後端開發人員，基本全部人的認識都是一致的。上一段中這樣回答的人通常都是隻作B類項目，在B類項目裏，先後端分離是共識，不須要討論。

那麼，剩下的問題就是討論A類項目的先後端分離了。這個問題的核心在什麼地方呢，在於模板的與數據結合的位置，以及，模板的控制權在誰手裏。通過這兩年的討論，基本上咱們能夠達成的共識就是：模板應當由前端人員去控制，主要緣由有兩方面：

- 性能優化（尤爲是外部資源的管理與發佈，請求合併等等）
- 協做的順暢性（已造成模板的界面片斷的返工等問題）

那麼，模板到底應該在什麼地方跟數據結合？

這個問題就比較折騰了，有部分人嘗試像B類項目那樣，使用js模板，而後在瀏覽器端執行，這是存在一些問題的，好比說seo不友好，首屏性能不夠，尤爲對於首頁DOM量很大的電商類網站，差距很明顯。

因此咱們仍是得把主要的模板放在服務端來執行。在這個過程當中，阿里做了一些嘗試，那就是引入Node層，在這一層把模板與數據進行合成，而後瀏覽器拿到的就是生成好的HTML了，但也不是全部HTML都是這麼生成好的，仍是會有一些內容等到了瀏覽器以後，再用js去加載和生成。

因此這必定會是一個混合方案，同一個系統中存在兩種模板，一種在服務端執行，一種在瀏覽器中執行，互爲補充。

至於說這個方案中，是否中間層必定要是node，我以爲無所謂，只要是能正常作web項目的東西均可以，這個仍是要看所在企業的技術積累方向，固然node作這塊是有一些優點的，好比對前端人員的語言友好性，先後端模板的通用性等等，但這些都是細節，重點仍是總體方案和流程。

這時候回頭看你問題中的這句：

> 先後端分離的意思是，先後端只經過 JSON 來交流，組件化、工程化不須要依賴後端去實現。

我相信你這裏對先後端的限定是以瀏覽器爲準的，但事實上，A類項目中，先後端的分界必定要延伸到服務器端的模板層，也就是在這一層裏，把各類來源的數據整合到模板中，這個數據未必是JSON格式的，會存在有JSON，XML，特定的二進制等等。

組件化這個話題就更復雜了，在剛纔組織形式中，很難說出究竟什麼纔是組件。是某個商品的模板嗎？是數據嗎？是數據和模板的結合體嗎？無法回答。在此，我說一句本身的見解：像電商這種項目的前端部分，基本不存在組件的概念，甚至不存在組件化的價值，由於這裏面可複用的東西太少了，也不易提取，大多數東西都是不帶邏輯的界面模板。

最近由於ReactJS的流行，帶來了一個Isomorphic的概念，這是一種頗有意義的探索，可是否能解決這類問題，尚不得而知，根據個人理解，它對B類項目是較好的補充方案，但對A類項目暫時還缺少可用性，由於A類項目中，運行期的DOM變動並很少，可能是整片的改變，用這個方案去解決的話，有些牛刀殺雞的感受。

-----------------------------------------------------------------------------

還能夠參考：純粹AJAX開發Web的討論（來自 csdn smstong ）

 

關於兩種應用模式的總結：

 

後端爲主的MVC

典型技術：ASP.Net(MVC)、JSP、PHP（內嵌Html模式、模板引擎、Laravel、ThinkPHP）

應用場景：大型門戶網站開發

優勢：1.保密性好 2.對SEO友好 3.運行效率高

缺點：1.先後端耦合（後端人員須要根據前端人員編寫的html頁「套」模板）

 

前端爲主的MVVM

典型技術：angularjs、ajax

應用場景：WebApp、HybridApp（企業內部使用）

優勢：1.先後端分離 2.統一的跨平臺Restful接口 3.較好的使用體驗(先天無刷新)

缺點：1.代碼保密性較差

 

 

 

推薦：葉小釵

淺談Hybrid技術的設計與實現

淺談Hybrid技術的設計與實現第二彈

淺談Hybrid技術的設計與實現第三彈——落地篇