关于前后端分离的思考

1.前端技术的演化

静态网页：

最早的HTML页面是完全静态的网页，他是预先编译好的存放在web服务器上的html文件，当浏览器请求某个url时，web服务器就把指定的html文件返回给浏览器，显示文件内容

动态网页：

显然我们不可能预先储备所有的页面。很多时候都需要动态生成网页。

这样是否可以通过编程语言，动态拼接成html文件给浏览器

于是，后面研究发现，大多数的html片段是不变的，变化的只有少数和业务相关的数据。

从而出现新的创建动态html的方式：ASP,JSP和PHP等

 MVC模式

需要服务器端的配合，JavaScript可以在前端修改服务器渲染后的数据。

问题是所有的通信都是单向的, view 传送指令到controller

controller完成业务逻辑后，要求model改变状态

model将新的数据发送到view，用户得到反馈

MVVM模式

该模式，借鉴了桌面应用程序的mvc思想，把model用纯JavaScript对象表示，view负责显示。两者做到最大限度分离。核心思想是关注model的变化。让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来。

 

 

2.前后端分离的优缺点

前后端分离的核心是后端提供数据服务接口，前端消费数据实现人机交互

优缺点：

彻底解放前端。

提高工作效率，分工更加明确。

局部性能提升。

降低维护成本。

前端注重用户体验后端注重业务逻辑。

3.前后端技术划分和职责划分

技术划分：

前端把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。

后端把精力放在java基础，设计模式，jvm原理，spring+springmvc原理及源码，linux，mysql事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，java性能优化，以及相关的项目管理等等。

后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。

职责划分：

前端：数据展现和收集

           事件响应和处理

           Dom操作

           请求的发送和响应处理

           页面渲染

           路由

数据转发

后端：提供服务接口

            封装业务逻辑接口

            序列化

 

 

3.睿达控前后端架构

4.前后端分离是如何提高工作效率的

前后端开发人员可以独立开发、独立运行、独立调试，他们之间的接口就是通过API文档服务器定义的。通常，一个页面的加载或者表单的提交，都有数据在客户端和服务器端之间传输，而API文档服务器就是专门用来生成API文档的。有了API文档，前端开发人员就可以基于API文档产生模拟数据（mock），然后使用mock的数据完成页面样式和页面交互；有了API文档，后端开发人员就可以基于API文档完成请求的处理以及返回响应数据。

 

5.快速定位bug技能掌握

1. css样式问题，debug
2. js功能问题，debug，打段点，click触发，调用，发送请求（和api对接口参数），接口接收参数，数据层持久化调用，逻辑处理开始，结束，接口返回json数据格式（json.cn）

   

 

 

课外技术补充：

组件化架构-react+node+springcloud

优缺点：

 业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务。

 项目可维护性更强，提高开发效率。

 更好排查问题，某个组件出现问题，直接对组件进行处理。

 开发测试过程中，可以只编译自己那部分代码，不需要编译整个项目代码。

 方便集成