目前前后端协作，遇到的问题及思考

前端与后端协同问题

• 前端出的页面是中间产品，不是最终产品。
  
  • 需要二次加工，提取公共部分，header、footer
  • 二次修改，前端修改好页面，后端工程师需要再修改一次
  • 前端中的页面与实际应用的页面，不一样
    
    • 比如后台工程师修改了关于样式的小问题，前端工程师手中的页面就跟实际的不一致了
• 前端修改时，依赖后端环境，依赖数据
  
  • 修改页面、样式，让前端工程师，来后端工程师处调试

从工程上来说存在的问题

• 缓存问题
  
  • 修改样式，替换图片后，浏览器有缓存
• 按需加载问题
  
  • 公共头部引入了全部的脚本、样式，比如jquery/bootstrap/date插件/下拉菜单插件/树插件，日期插件、下拉菜单插件，日期、树、下拉菜单不是每个页面都需要的
• 脚本压缩
  
  • 开发时是原始版，上线是压缩版

理想的状态

• 前端独立于后端
  
  • 前端工程可以独立启动，即时刷新，能提供数据，能测试。
  • 调样式，无须后台参与，前端工程师修改后，提交即可，后台工程师无需二次修改

解决方案

• 前后端工程师共享前端工程，共同维护，人维持原样。
  
  • 前后端从代码上完全分离，前端（页面、样式、图片、字体）一个工程，可以独立启动，有模拟数据
    后端，只提供接口数据
• 解决的问题
  
  • 前端产出的页面就是直接可用，无需二次加工
  • 前端开发、调试，都无需依赖后端
  • 实时刷新，生产效率高

具体操作步骤

• 最初，前端工程师出前端工程，可用的、无需二次加工的、带模拟数据？
• 前端开发完毕后，后台工程师接手，对接后台接口。
• 有改动，前端工程师启动前端工程，修改后，提交即可。

技术方案

• Nodejs+npm
  
  • 解决开发环境，依赖问题
• Gulp/webpack
  
  • 解决自动化，代码分析、压缩、打包、优化，版本号管理
• Babel
  
  • 编译es6语法
• Eslint
  
  • check js语法
• React/vue/angular?
  
  • 一期可以不使用，带来的问题，拼html等问题