首次尝试前后端分离是在一个外包项目中:
点匠科技 o2o的家装类 移动项目微信平台前端开发主要工作内容是将原有的android、ios 应用 配合后端工程师开发一套 微信产品,个人角色为 前端开发工程师 负责界面 html css vue 前后端数据联调等工作
项目地址
(测试账号:15103585135 测试密码:123456)
这次的项目技术栈
- vue vue-router vuex
- weui
- sass
- es6 ajax
通过这次项目，让我体会到了这种前后端分离的快感，所以特来分享一波。
如果你没有尝试过前后端分离的工作流程，那么可以先试想一下这样的流程改变：
把流程从
- PM：“我要这个功能”
- 后端：“这个先找前端做个模板”
- 前端：“模板做完了”
- 后端：“我来对接一下，这里样式不对”
- 前端：“我改完了”
- 后端：“功能交付”
- PM：“春节要加这个活动”
- 后端：“这个先找前端改个模板”
- 前端：“模板做完了”
- 后端：“我来对接一下，这里样式不对”
- 前端：“我改完了”
- 后端：“功能交付”
变成
- PM：“我要这个功能”
- 前端：“我要接口”
- 后端：“接口完成了”
- 前端：“我来对接一下，功能交付”
- PM：“春节要加这个活动”
- 前端：“需要增加接口”
- 后端：“接口完成了”
- 前端：“我来对接一下，功能交付”
由此可见，前后端分离的主要概念就是：后台只需提供API接口，前端调用AJAX实现数据呈现。
前后端分离的实现对技术人员尤其是前端人员的要求会上升一个层次，前端的工作不只是切页面写模板或是处理一些简单的js逻辑，前端需要处理服务器返回的各种数据格式，还需要掌握一系列的数据处理逻辑、MVVM思想和各种主流前端框架(React, Vue..)。
意义
对于前后端分离的意义我们也可以看做是前端渲染的意义，我主要总结了下面四点：
1. 彻底解放前端
前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码，前后端解耦，增加可读性。
2. 提高工作效率，分工更加明确
前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。
3. 局部性能提升
通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。
4. 降低维护成本
通过目前主流的前端MVVM框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。
面对快速发展的前端，我们应该去适应其带来的工作方式和流程的改变，目前的前后端分离的工作方式必然是今后的趋势所在，作为一个前端开发人员，我们应当承担这个普及前端新知识和改变现状的职责。
我的Github
好了，装了一大波，溜了溜了。。。