概念普及
后端渲染
后端采用JSP，freemarker，jdea，babel等渲染框架对前端模板进行预编译。html
假设有这么一组数据你想展现在界面上：前端
| name |
|---|
| MrXu |
| MrXu0 |
| MrXu1 |
<#list list as item>
<div class="font">姓名:${item.name}</div>
</#list>复制代码
以上采起的是freemarker语法进行的html预编译，编译的结果以下:webpack
<div class="font">姓名:MrXu</div>
<div class="font">姓名:MrXu1</div>
<div class="font">姓名:MrXu2</div>复制代码
在没有Vue，React，Angular的年代（此处指代任何的前端渲染框架），不借助后端渲染工具你想界面上根据数据实现界面效果你须要多少步骤:ios
1.ajax请求web
2.写一大堆加号拼接数据:ajax
var model +="<div>" +list[i].name + "</div>"复制代码
3.获取某个元素添加到元素里面npm
如今大部分人应该都没感觉过拼接字符串的恐惧。axios
先后端分离
你若是了解APP跟后端的开发，你会很简单的了解这个概念。APP开发的时候若是接口文档齐全都不须要跟后端开发人员产生交流就能够实现一个完整的项目（理想状态下）。像如今的各类前端脚手架，都可以帮你快速的实现一个简易的前端项目。后端
缘由
像不少非互联网公司，技术并非第一辈子产力，作项目仍是比较保守的，不可能快速迭代技术。一切以“稳”字为主。若是没有巨大的诱惑是不会迭代技术的，毕竟像Jquery，十几年的沉淀，几乎知足各类要求，很是稳定。promise
那么这个巨大的诱惑是什么呢？看我慢慢分析。
咱们公司优先推出的是一套APP，如今要开发微信商城。这样就确保了后端其实已经有一套成熟的接口可以知足业务须要了。若是前端还采用后端渲染的模式将面临其中大部分的接口重写，维护俩遍的问题。这可不是一个很小的工做量，而且还会一直迭代这就是目前面临的主要问题，因而我给公司提供了如下三种方案：
1.采用后端渲染的方式，部分界面我本身借助框架渲染，例如购物车这种大量界面交互的界面。开发速度快。可是后期转型极其麻烦
2.后端统一配置前端界面，将路由权限放宽，由前端自由把握，不在采用后端渲染，全部界面彻底由前端自由渲染。开发方向往前端偏移，可是开发速度较快，后期转型要容易的多
3.采用网上的各类脚手架进行SPA开发模式。一步到位，不存在转型问题，可是开发速度慢
以上的开发速度是基于我本身的公司现状分析的，上面的第三种模式开发速度3实际上是最快的，其次是2最后是1,如今之因此慢是由于公司目前缺乏符合这方面的人才。我虽然技术方面没有问题，对相关的技术站早已经学会了，可是没有实操经验。在时间充足的状况下我还挺有把握的，可是项目工期是在太紧张了，我可不想闲着没事就加班到凌晨4,5点的。最后我从延长时间，减小需求，添加人员三方面着手。但愿可以给与支持。不过没有一方面可以知足个人，因此只可以采起折中的办法，使用了方案二，先把首版推上去。推上去以后再进行一次大的重构,从而完全实现先后端分离。
技术选型
目前比较火的前端渲染框架主要是Angular，React，Vue。我选择了比较轻量级的Vue，缘由主要出于如下几点：
1.简单易学，Angular目前使用的是TS开发这使得学习成本提升，React官网对中文支持不好，Vue是中国人搞的，因此中文翻译挺棒的，并且主要用于Web开发。
2.支持不打包只引入资源便可跑项目，适合目前的方案
界面布局采用rem布局，缘由以下：
1.能够跟设计图同尺寸做图，很方便
2.公司一直采用这种方式，已经习惯了这个套路。
不过也带来了不少麻烦，这里先卖个关子，后面再说。
数据请求axios：
1.采用了promise的方式，至关于对如今的ajax的一个扩展
2.拥有钩子机制，能够监控拦截请求前，请求后状态。
MintUI：
1.这是我接触的第一个集成自Vue的UI框架
2.可以支持一次性加载和分开加载
3.教程中文，上手简单
4.由饿了么团队开发，大厂家莫名的细分
因此选择这个有些任性，嘿嘿。以上的选择也是为了后期进行完整的分离方案设计的，可以最简化工做量的移植。
后期完整的先后端分离方案
采用Vue的全家桶进行SPA模式开发，得到更好的用户体验。
1.Vue-Router:路由管理系统，模拟浏览器的history机制，使用方便。不反人类
2.VueX：官方的解释是这就像你的眼镜，你天然知道何时去用它。
3.axios：用来作数据请求
4.Mint：UI框架
5.npm：包管理工具
6.webpack：打包工具
7.Vue：数据渲染框架
本文分享自微信公众号 - 点滴前端（DDIWEB）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。