浅谈前后端分离与实践 之 nodejs 中间层服务
一、背景
书接上文,浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务,前后端开发过程中只需定义好接口规范,便可以相互进行各自的开发任务。联调的时候,按照之前定义的开发规范进行数据联调便可以了。前后端的职能更加清晰:
后端 | 前端 |
---|---|
提供数据 | 接收数据,返回数据 |
处理业务逻辑 | 处理渲染逻辑 |
Server-side MVC架构 | Client-side MV* 架构 |
代码跑在服务器上 | 代码跑在浏览器上 |
这里分离干净了,分工也很明确了,看似一切都那么美好,but...我们也很容易发现问题的所在:
- Client-side Model 是 Server-side Model 的加工
- Client-side View 跟 Server-side是 不同层次的东西
- Client-side的Controller 跟 Sever-side的Controller 各搞各的
- Client-side的Route 但是 Server-side 可能没有
也就是说服务端和客户端各层职责重叠,大家各搞各的,很难统一具体要做的事情。并且可能会伴随着一些性能上的问题。最具体的表现就是我们常用的SPA应用:
- 渲染,取值都在客户端进行,有性能的问题
- 需要等待资源到齐才能进行,会有短暂白屏与闪动
- 在移动设备低速网路的体验奇差无比
- 渲染都在客户端,模版无法重用,SEO实现 麻烦
紧接着,我们代码量越来越大,我们需要校验的表单也会越来越多,有时候,前端提交需要校验一次表单。
服务端任需要进行校验来达到数据的可靠性;前端的路由可能在服务端并不存在....等等这一系列重用性的问题。所以我们之前的重构可能需要更深层次的思考。
二、开始重构
在开始重构之前,我们需要对前后端界线做一个划分,也就是说什么是属于前端的范畴,什么是属于后端的范畴,最传统的前后端划分可能是这样的:
那么问题来了:我们前后端划分的接线,是依照工作职责来划分的前后端;还是依照硬体环境划分的前后端?自从了nodejs之后,我们可以从工作职能上重新定义前后端的范畴:
可以看到,这里的前端比之前多了个nodejs,也就是在前后端之间我们构建了一个 nodejs 服务作为中间层!
为什么我们选择的中间层是nodejs呢?因为我们把中间层归在了前端的范畴,那么对前端小伙伴来说,nodejs毕竟还是个js,那么从语法角度来说,上收起来应该没有什么问题。其次开发转移成本也想对较低,不必来回切换语言的逻辑和语法:
- 前端熟悉的语言,学习成本低
- 都是JS,可以前后端复用
- 体质适合:事件驱动、非阻塞I/O
- 适合IO密集型业务
- 执行速度也不差
好了,提前说了这么多东西,那么这个中间层能给我们带来什么了?要知道引入nodejs的开发成本也是很大的,首先就是多了一层服务,多的不说,单凭传输时间,就多了一层的传输时间啊!下面我们来研究一下什么应用场景下的nodejs能给我们带来利大于弊的东西。
三、开始中间层之旅
引入nodejs之后,我们来重新划分一下前后端的职能:
这个就是中间层nodejs的主要思路,下面我们来看一下常见的业务场景:
1. 接口数据可靠性修复
有的时候服务端返回给我们的数据可能并不是前端想要的结构,所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。但是后端经常提供后端的数据逻辑,在前端还需要去处理这些数据逻辑。比如我再开发一个功能的时候,有时候会碰到这样的问题:
服务端返回的某个字段为 null 或者服务端返回的数据结构太深,前端需要不断写这样的代码去判断数据结构是否真的返回了正确的东西,而不是个null 或者undefined:
-
if (params.items && params.items.type && ...) {
-
// todo
-
}
对于这种情况,我们前端其实不应该去重复校验数据的格式,这也本不应该是浏览器端js需要做的事情。我们可以在中间层做接口转发,在转发的过程中做数据处理。而不用担心数据返回的问题:
-
router.get('/buyer/product/detail', (req, res, next) => {
-
httpRequest.get('/buyer/product/detail', (data) => {
-
// todo 处理数据
-
res.send(data);
-
})
-
})
2. 页面性能优化 和 SEO
有点时候我们做单页面应用,经常会碰到首屏加载性能问题,这个时候如果我们接了中间层nodejs的话,那么我们可以把首屏渲染的任务交给nodejs去做,次屏的渲染依然走之前的浏览器渲染。(前端换页,浏览器端渲染,直接输入网址,服务器渲染)服务端渲染对页面进行拼接直出html字符串,可以大幅提高首屏渲染的时间,减少用户的等待时间。这种形式应用最广的比如 Vue 的服务端渲染,里面也有相关的介绍。
其次对于单页面的SEO优化也是很好地处理方式,由于目前的ajax并不被搜索百度等搜索引擎支持,所以如果想要得到爬虫的支持,那么服务端渲染也是一种解决方法。(PS:如果觉得服务端渲染太麻烦,我这里还有一篇介绍处理SEO的另一种思路处理 Vue 单页面 Meta SEO的另一种思路可以参考)
3. 淘宝常见的需求解决方案
需求:在淘宝,单日四亿PV,页面数据来自各个不同接口,为了不影响体验,先产生页面框架后,在发起多个异步请求取数据更新页面,这些多出来的请求带来的影响不小,尤其在无线端。
解决方案:在NodeJS端使用 Bigpiper 技术,合并请求,降低负担,分批输出,不影响体验。同时可以拆分大接口为独立小接口,并发请求。串行 => 并行,大幅缩短请求时间。
三、Node.js的用途
Node.js适合应用在高并发、I/O密集、少量业务逻辑的场景
善于I/O,不善于计算。因为Node.js最擅长的就是任务调度,如果你的业务有很多的CPU计算,实际上也相当于这个计算阻塞了这个单线程,就不适合Node开发。
当应用程序需要处理大量并发的I/O,而在向客户端发出响应之前,应用程序内部并不需要进行非常复杂的处理的时候,Node.js非常适合。Node.js也非常适合与web socket配合,开发长连接的实时交互应用程序。
比如:
● 用户表单收集
● 考试系统
● 聊天室
● 图文直播
● 提供JSON的API(为前台Angular使用)
不适合的场景:
1.计算密集型应用
2.单用户多任务的程序
3.逻辑十分复杂的事务
4.unicode与国际化
原文地址:https://www.cnblogs.com/yuanjili666/p/11377182.html
- Numpy 修炼之道 (13)—— 将python函数向量化
- 洛谷P1887 乘积最大3
- 18.CSS
- R语言可视化——ggplot图表系统中的形状
- [机器学习Lesson 1 Introduction] 机器学习的动机与应用
- 洛谷P3377 【模板】左偏树(可并堆)
- Numpy 修炼之道 (12)—— genfromtxt函数
- 19.JavaScript
- 20.DOM
- 洛谷P3273 [SCOI2011]棘手的操作
- [机器学习Lesson 2]代价函数之线性回归算法
- Docker初尝试1.What is Docker?2.Try It3.Use It
- 洛谷P1456 Monkey King
- 21.jQuery
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《一起学sentinel》五、Slot的子类及实现之AuthoritySlot和SystemSlot
- Python 之pyaudio使用随笔
- Determining 32 vs 64 bit in C++
- 在线、离线激活鉴权实战
- Spark vs Dask Python生态下的计算引擎
- 表达差异基因分析
- threadlocal记录
- 2020-09-22:已知两个数的最大公约数,如何...
- 【超详细】分布式一致性协议 - Paxos
- MySQL 8.0新特性 — 降序索引
- TRTC横竖屏切换2,重力感应
- Elasticsearch 日志配置详解【技术创作101训练营】
- HashMap源码分析
- SpringBoot分组校验及自定义校验注解
- BERT详解