概念普及
後端渲染
後端採用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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。