前端与后端协同问题
- 前端出的页面是中间产品,不是最终产品。
- 需要二次加工,提取公共部分,header、footer
- 二次修改,前端修改好页面,后端工程师需要再修改一次
- 前端中的页面与实际应用的页面,不一样
- 比如后台工程师修改了关于样式的小问题,前端工程师手中的页面就跟实际的不一致了
- 前端修改时,依赖后端环境,依赖数据
- 修改页面、样式,让前端工程师,来后端工程师处调试
从工程上来说存在的问题
- 缓存问题
- 修改样式,替换图片后,浏览器有缓存
- 按需加载问题
- 公共头部引入了全部的脚本、样式,比如jquery/bootstrap/date插件/下拉菜单插件/树插件,日期插件、下拉菜单插件,日期、树、下拉菜单不是每个页面都需要的
- 脚本压缩
- 开发时是原始版,上线是压缩版
理想的状态
- 前端独立于后端
- 前端工程可以独立启动,即时刷新,能提供数据,能测试。
- 调样式,无须后台参与,前端工程师修改后,提交即可,后台工程师无需二次修改
解决方案
- 前后端工程师共享前端工程,共同维护,人维持原样。
- 前后端从代码上完全分离,前端(页面、样式、图片、字体)一个工程,可以独立启动,有模拟数据
后端,只提供接口数据
- 前后端从代码上完全分离,前端(页面、样式、图片、字体)一个工程,可以独立启动,有模拟数据
- 解决的问题
- 前端产出的页面就是直接可用,无需二次加工
- 前端开发、调试,都无需依赖后端
- 实时刷新,生产效率高
具体操作步骤
- 最初,前端工程师出前端工程,可用的、无需二次加工的、带模拟数据?
- 前端开发完毕后,后台工程师接手,对接后台接口。
- 有改动,前端工程师启动前端工程,修改后,提交即可。
技术方案
- Nodejs+npm
- 解决开发环境,依赖问题
- Gulp/webpack
- 解决自动化,代码分析、压缩、打包、优化,版本号管理
- Babel
- 编译es6语法
- Eslint
- check js语法
- React/vue/angular?
- 一期可以不使用,带来的问题,拼html等问题