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技术的设计与实现第三弹——落地篇

[总结帖] 后端MVC V.S. 前端MVVM的更多相关文章

  1. 前端开发中的 MVC、MVP、MVVM 模式

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. Android App的架构设计:从VM、MVC、MVP到MVVM

    随着Android应用开发规模的扩大,客户端业务逻辑也越来越复杂,已然不是简单的数据展示了.如同后端开发遇到瓶颈时采用的组件拆分思想,客户端也需要进行架构设计,拆分视图和数据,解除模块之间的耦合,提高 ...

  4. 聊聊MVC和模块化以及MVVM和组件化

    原文链接 小寒的博客,带你理解更深的世界 面向对象,模块化和MVC 面向对象是指把写程序映射到现实生活,从而一来逻辑性更强,更容易写好代码,二来代码很贴切,通俗易懂,更被人理解,三来更加容易拓展和管理 ...

  5. 不要再问我MVC、MVP、MVVM了

    网络上有很多类似的讨论.包括一些大v,比如 阮一峰:MVC,MVP 和 MVVM 的图示 廖雪峰:MVVM 司徒正美: 各自用一句话来概括MVC.MVP.MVVM的差异特点 ... 但是说的往往比较概 ...

  6. 浅谈MVC、MVP、MVVM架构模式的区别和联系

    MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...

  7. js架构设计模式——你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?

    你对MVC.MVP.MVVM 三种组合模式分别有什么样的理解? MVC(Model-View-Controller)MVP(Model-View-Presenter)MVVM(Model-View-V ...

  8. 学习设计模式之MVC、MVP、MVVM

    引言:认真学习了下广义MVC模式下前端怎么写,狭义的MVC其实是有一个变化过程:MVC MVP MVVM,网上看了很多的关于这方面的介绍,以前总是将视图数据逻辑写一个模块,最近尝试分开并用组件式的开发 ...

  9. mvc、mvp和mvvm理解

    MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...

随机推荐

  1. js 滚动条滚动到底部触发事件

    一.前言 在开发项目时,常常需要展示大量数据.如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了. 面对这种问题,PC里使用了分页效果,将数据分成一页页 ...

  2. for 续4

    ---------siwuxie095             (四)tokens=x,y,m-n 显示指定的列     tokens=x 只显示第 x 列 tokens=x,y,z 只显示第 x,y ...

  3. __next__和__iter__实现迭代器协议

    ---恢复内容开始--- #_*_coding:utf-8_*_ __author__ = 'Linhaifeng' class Foo: def __init__(self,x): self.x=x ...

  4. ubuntu 出来菜单栏和任务栏

    http://blog.csdn.net/terence1212/article/details/51340595 命令行输入:sudo apt-get install compizconfig-se ...

  5. Windows环境和Linux环境下Redis主从复制配置

    Windows环境下和Linux环境下配置Redis主从复制基本上一样,都是更改配置文件.Windows环境下修改的配置文件是:redis.windows.conf.redis.windows-ser ...

  6. 12个优秀的国外Material Design网站案例

    眼看2017年就快完了,你是不是还没完全搞懂Material Design呢?是嫌说明文档太长,还是觉得自己英文不好?都没关系,小编今天给大家整理了一份干货满满的学习笔记,并列举了一些国外的Mater ...

  7. asp.net 自定义节配置 (configSections下的section)

    <configuration> <configSections> <!--.自定义一个节 CustomSection --> <section name=&q ...

  8. PostgreSQL CPU满(100%)性能分析及优化

    业务场景:大批量更新时,数据库长时间CPU占用超过90,影响其他正常业务流程,参考阿里云上的一篇文章:https://help.aliyun.com/knowledge_detail/43562.ht ...

  9. mysql 统计一个字符在字符串中出现的次数

    CREATE  FUNCTION `str_pcount`(str varchar(255),p varchar(255)) RETURNS int(11)BEGIN    #统计一个字符在字符串中出 ...

  10. [label][JavaScript] 自动填充内容的JavaScript 库

    一个帮助你针对不同标签自动填入内容的轻量级javascript类库 - fixiejs http://www.gbtags.com/technology/javascript/20120802-fix ...