前言

纵观目前的前端发展趋势,由之前的WEB1.0(asp等古老页面)->WEB2.0(ajax的参与)->WEB3.0(现代化SPA),其发展的本质都是为了跟随市场,解放生产力,尤其是目前的前后端分离架构。

何为前后端分离

相关文章其实很多了,其本质是为了提高生产效率,解放生产力,专人做专事,在以往的开发模式往往是

image.png

设计前端后端设计稿好了,可以开始开发了ok,我开发完成了,这是静态页面,你这个交互跟我后端套页面有问题啊这个页面效果也不对啊好我改下静态页面这个是我改好的,你再看看吧我看你的静态页面不是这样的啊,你有同步静态页面没有?额,没有,时间来不及,我就直接在你后端模板上改了设计前端后端

这种开发模式和流程极大的浪费了人力,再加上来来回回的沟通时间等,导致项目的开发进度极慢,尤其是前端和后端需要维护两套一模一样的模板,中途有修改还需要做双方同步,导致项目开发时间增大。

现代化开发流程

image.png

设计前端后端设计稿好了,可以开始开发了ok,我用SPA框架开发完成了,打包了一个dist文件夹这个是FTP密码,你直接把dist文件夹上传到这里就行了这个页面效果也不对啊好我改下SPA页面,然后上传一下即可设计前端后端

纵比下来,传统的开发模式每改一次需求需要设计与前端对,后端与前端对,后端同步更新前端模板(套模板),额外多了一次步骤,那么可以得出一个公式 t=c*(2+1)其中t为时间,c为需求变动次数,每次变动需要3个步骤。

前后端分离的几种方式

SPA

SPA即为单页面模式,其优点在于

1.前端体验好,开发比较方便

但是缺点在于

  1. 不支持SEO
  2. 某些插件(full-page)实际上对SPA的支持性没那么好,通常SPA需要和jquery一起配合使用来完成需求

Middleware

Middleware即为中间层架构,即引用NODE作为中间层,其优点在于

  1. 支持SEO
  2. 可以直接操控数据库,缓存层
  3. 可以整合接口API,方便一次请求渲染
  4. 可以封装API暴露出去,免去直接请求后台
  5. 支持多模板化,方便开发
  6. 支持后端路由模式
  7. .....

其缺点在于

  1. 中间额外加了一层,需要额外的学习成本,在有架构的情况下,学习成本极低
  2. 如果只是用来做中间层则无需关注太多nodejs的项目,当成一个前端框架来看即可

Middleware+SSR

SSR即为服务端渲染,这里那vue的SSR来举例,简单来说就是SSR用nodejs做中间层,其模板渲染框架为VUE-SSR,这么做的目的是为了提升首屏渲染,并且前后端可共用一套模板语法(Vue),但由于其配置复杂性,在NODEJS无window变量等环境,对编码人员有一定的要求,其学习成本较高,目前常见的应用公司均为大企业。

适用性

针对于企业网站和博客网站,这两者都是对SEO有极大的要求,虽然SPA的SEO解决方案是有,但其本质上是利用chrome去访问目标网页,然后把渲染后的结果返回给搜索引擎,并且目标网页不能是hash的路由模式,其方案局限性太大。

所以针对于SEO的情况则剩下传统开发和NODEJS和SSR的模式,至此如何选择则不用我继续描述了吧。

那么如果使用NODEJS需要解决的问题其实很简单

  1. 简单的培训,在现用的NODEJS框架只需要写页面和JS即可,不需要写复杂的后端代码,不需要写复杂的后端代码,不需要写复杂的后端代码,重要的说三遍
  2. 招人维护也只需要维护前端代码即可
  3. 后端(java)只需要写API即可,前端对后端来说是黑盒的,即后端的API可对任意前端(安卓,ios,web,wechatapp)使用。

针对于不同的项目可灵活配置,但个人极不推荐传统的开发模式。

参考文档