前后端分离模式

我是做java出身的前端开发工程师经历过由前端视图逻辑和后端的业务逻辑混合的开发模式,

在到由ajax跨域请求来进行前后端的分离的模式,最后到由nodejs来进行前后端的分离,

今天就分别站在不同的视角上尽可能的为大家剖析下这几种模式的优缺点。

前后端逻辑混合开发模式:

这种开发模式在现在来看几乎没有什么优点,但是在很多互联网公司依然在用,我想这大概是历史原因造成的吧,
也有可能缺乏技术体系的整体思想,但是也不能完全否定其优点,与第二种开发模式相比较。
优点:

1. 用户体验好,在相同的网络条件和业务复杂度以及硬件环境下,他可以快速进行首屏展示,避免ajax请求所带来的渲染延时。
2. 有利于seo搜索引擎优化。
3. 方便静态化,在访问高峰期可以将某些访问量大并且业务数据大部分不变的页面生成静态页面进行缓存,有利于快速渲染。

缺点:1. 耦合度太高,在协作开发的时候前端的开发人员要与后端的开发人员互相等待来完成整体的功能,而且后端开发人员
        需要了解前端 的页面结构来填充逻辑代码,大大降低开发效率并且一旦出问题无法快速定位问题。
     2. 不易维护,由于对于一个页面的维护需要牵扯到两端的开发人员来共同进行维护,在需求变更后容易出现bug。
     3. 对后端开发语言进行了强依赖,一旦这两种语言参杂在一起,对于后端来讲前端是无法复用的。

ajax跨域请求前后端分离模式

这种分离模式可以在一定程度上弥补第一种开发模式的不足。

优点:
  1. 前后端的逻辑不需要混合在一起,两端的开发人员基本不需要参与对方的代码,大大提升了整体的开发效率,也方便定位问题。
  2. 与第三种开发模式相比较,前端人员不需要关注中间服务器的代码编写,从一定程度上减少了工作量。
  3. 在部署方面前后端可以分别部署,从一定程度上提升了前端的价值。

缺点:
  1. 首屏局部板块的渲染需要等到ajax请求数据返回后才能进行完全的展示,在网络比较慢的情况下表现的尤为明显。
  2. 在性能方面ajax请求的暴涨,会影响渲染性能。
  3. 异步请求的嵌套会让业务代码晦涩难懂。
  4. 不利于搜索引擎优化。
  5. 需要对请求的异常情况进行视图逻辑的处理。

nodejs前后端分离模式

这也是我目前非常推崇的一种分离模式。

优点:
1. node的异步特性,一个页面是被几十个HTML片段(每个片段一个文件)拼装成,之前PHP同步include这几十个片段,一定是串行 
   的,Node可以异步,读文件可以并行,一旦这些片段中也包含业务逻辑,异步的优势就很明显了,真正做到哪个文件先渲染完就先 
   输出显示。前端机的文件系统越复杂,页面的组成片段越多,这种异步的提速效果就越明显。
2. 前端发挥空间大大提升,能玩的东西变多,例如websocket,前端可以自己来玩并且在controller层和model层上有更多的发挥 
   空间,比如在node端自己做静态数据缓存等。
3. 服务器优势,node本身内置服务器功能,几行代码就可以启动一个服务器,免去了对apache,wamp等服务器的依赖。
4. 服务端和浏览器端公用一种语言降低了学习成本,写一套代码便可前后端同时运行。
5. 前后端彻底分离,node端只要启动一个http-proxy进行api请求转发类似于nginx的代理功能,前端只需要玩转json就可以,也 
   不存在跨域问题。
6. 服务器分别部署,可以单独进行优化,也方便node做静态化。
7. 可以进行首屏的渲染,目前像vuejs,react都可以在服务端渲染页面然后输出静态html代码,从而弥补了ajax请求的不足。

缺点:
1. 对于一般前端开发来说,觉得nodejs学习门槛比较高,牵扯到服务端就望而却步,其实没什么学的,很好上手。
2. node的单线程机制在部署的时候需要启动一个监控进程,在node挂了后能自动重启,例如在linux上配置一个supervisor。
3. 在node端调试相对比较麻烦,没有像java那样的远程调试机制,开发者一般通过console.log进行调试,当然也可以是用debug 
   模式启动node来进行调试。
4. 对开发人员的编码能力要求比较高,因为单线程的缘故,所以尽量避免写出同步执行的代码,对于cpu密集型的运算尽量不要让 
   node来做。

更多文章 请访问我的技术栈 前端架构解决方案

image.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值