前后端交互与分离的原因和选型

一、为什么要做前后端分离

1、从维护侧看：1）业务逻辑复杂，充斥着很多明眼不可见的业务。导致更改bug很容易引发其他的bug。2）代码巨长无比，可读性差。3）代码结构性差、分层模糊，逻辑层的代码充斥在View层中。找代码的时间占据解决bug的大部分时间。4）前端尚处在刀耕火种的年代，前端规范差、压缩混淆不彻底，难以适应新的浏览器渲染技术。

从性能侧看：单一请求，往往读取比页面所需要多得多的数据。频繁的拉取数据，不仅对后端资源是一种浪费，也会导致单一请求耗时过长。

从用户侧看：因为多页应用的频繁刷新，新的URL都需要页面重载。单一页面会触发多个HTTP请求（静态资源、Ajax）。这两个因素导致用户等待时间过久。

从开发人员侧看：1）开发者往往热衷于新技术。学习新技术不仅有利于团队技术成长，也有利于发挥成员的积极性。2）团队成员本身具有全栈开发的能力，转换成前后端分离的模式成本较低。

从业务本身来看：产品天生适合采用单页应用，无需SEO。

2、在以前传统的网站开发中，前端一般扮演的只是切图的工作，只是简单地将UI设计师提供的原型图实现成静态的HTML页面，而具体的页面交互逻辑，比如与后台的数据交互工作等，可能都是由后台的开发人员来实现的，或者是前端是紧紧的耦合后台。比如，以前淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。所以他们的开发模式依然是，前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了很久。

而且更有可能后台人员直接兼顾前端的工作，一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，比如提供API接口，进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs来搭建自己的本地服务器，直接在本地开发，然后通过一些插件来将api请求转发到后台，这样就可以完全模拟线上的场景，并且与后台解耦。前端可以独立完成与用户交互的整一个过程，两者都可以同时开工，不互相依赖，开发效率更快，而且分工比较均衡。

二、前端方案选型

在前端方案的落地中，团队花费了很长时间进行框架的预研，最终选择了Vue。对业务而言，框架需要提供双向数据绑定、模版引擎、组件化、前端路由，还有能与jQuery组件进行通信，定制化程度较高。

React意味着全局替换，替换成本过高，成果成型慢

JSX、TS对偏后台同学而言，学习门槛较高

在国内Vue显然更受欢迎，文档、社区也更活跃

React许可协议的具有潜在的不可控性

前端同学对Vue理解更深刻