先后端分离思考

起源

公司随着开发人员的增多，项目数量的增长，先后端沟通的成本不断加大。原有的项目先后端未分离，做为前端还须要对PHP等后端语言有所了解，这极大增长了前端开发的学习成本，特别是遇到数据库的报错，不明因此，花费大量的时间去解决。所以，根据咱们目前的业务须要，咱们从一些新的项目中开始尝试进行先后端的分离。

目标

1）代码分离。先后端代码使用独立的项目目录进行分离，前端开发环境不须要配置PHP或者Java环境，所有改用Git管理项目代码。

2）开发流程改进。开发流程将会分为local【本地开发】，dev【先后端联调】，beta【QA测试】和prod【线上发布】。 

工具

Nodejs

Webpack

Command pad

HostProfiles

Git

Sftp

方法论

1）肯定需求，设计接口。

在整个开发流程中，当肯定了需求和设计以后，前端和后端要先对接口进行设计，肯定对应接口的参数和返回数据的JSON结构，而后独立进行开发。

 

2）本地开发

本地开发环境的构建能够借助Grunt，Gulp，以及Webpack等来搭建，咱们一般是采用Webpack来实现，由于Webpack可以支持模块化，对React、VUE等开发支持度比较好，社区热度也比较高，遇到问题能够比较快的解决。使用Webpack和Webpack-dev-server能够快速的搭建一个本地服务，支持代码的热加载刷新。固然简单的服务你能够经过express来搭建。

这个时候咱们一般使用Command Pad来管理命令行，好比经常使用的npm start，或者npm run dist 等等，方便快捷。

图片资源是统一目录进行管理，提早进行部署到七牛上面去。

本地开发将使用mock数据的方法，来进行接口的模拟，进行页面逻辑的开发。在一部分存在jquery的项目中咱们使用了 jquery.mockjax.js 做为mock工具。一般会建立一个api目录，集中管理全部的接口数据，经过一个index.js来统一加载和屏蔽。

 

3）先后端联调

先后端分离以后，先后端数据的联调就会很是的简单高效，只须要各自将代码部署到DEV服务器上，而后使用chrome提供的开发工具进行调试便可。调试过程当中若是遇到问题，能够随时进行修改和提交。前端将不依赖后端的开发环境，即使DEV环境出现问题，后端也能够及时的进行处理，分工明确。特别是引入了Docker以后，咱们能够方便的建立多个DEV开发环境，这样即使出现多人同事开发一个项目，也不会互相影响DEV的联调。

在发布代码的时候，引入了Sublime Text的插件sftp，来直接将本地编译好的代码推送到DEV服务器上，全程速度飞起。

 

4）QA测试

进入QA的测试阶段，几乎和联调阶段相似，只不过是提供了一个相似于线上的环境，单独提供给测试使用的。

 

5）线上发布

发布以前须要进行代码的压缩的打包，也是借助Webpack完成的。值的提到的是当线上出现bug的时候，咱们须要将线上的代码映射到本地进行调试，用到了HostProfiles 和 nginx。借助git的分支功能，建立hotfix分支进行处理。

 

这是一个简单的先后端分离的方案，只是针对公司现有的项目状况提出的解决方案，固然还有不少地方能够改进。好比淘宝提出的中途岛计划，增长nodejs的中间层进行模板渲染和业务处理。