[总结帖] 后端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技术的设计与实现第三弹——落地篇