什么是前后端分離，要區(qū)分前端和后端，需要有個明確的界限叔锐。一般，用戶可以直接看到的東西见秽，都是屬于前端的范疇愉烙，除了前端之外都屬于后端了。

在傳統(tǒng)的像ASP解取，JSP和PHP等開發(fā)模式中步责，前端是處在一個混沌的狀態(tài)中，可以說是沒有獨立的“人格”可言禀苦。

前端負責切圖和編寫靜態(tài)頁面模板勺择，后端將數(shù)據(jù)渲染到前端提供的頁面模板中，最后將頁面渲染到瀏覽器展示伦忠。

這個過程中省核，前端只提供頁面模板或者寫一些JavaScript腳本，有的甚至JS腳本都是后端來寫昆码，前端的作用只局限于切圖和樣式模板文件气忠，這種角色就是傳說中的“切圖仔”。

這也是為什么行業(yè)內(nèi)都覺得前端是一個很簡單的工作赋咽，只要花個一周旧噪，學下HTML、CSS和PS的簡單技巧就可以勝任的工作脓匿。

現(xiàn)在看來淘钟，那時候的前端就是一個打醬油的，發(fā)展前景很有限陪毡。那時候的JavaScript腳本也比較簡單米母，一個jQuery就可以橫掃天下，所以對于精通語言類代碼的后端程序員來說毡琉，可以很快的上手JavaScript铁瞒，對前端來說，發(fā)展空間就更小了桅滋。

前后端分離慧耍，不只是簡單的代碼的分離身辨。

首先是要架構(gòu)上分離解耦，逐漸擺脫前后端在架構(gòu)上的依賴芍碧，前后端各司其職煌珊，分開部署在不同的服務器上，通過RESTful接口傳遞數(shù)據(jù)泌豆。減輕后端服務器的壓力定庵，后端服務器不再負責頁面渲染，只負責輸入數(shù)據(jù)践美，吞吐量提升了好幾倍洗贰。

其次是邏輯分離，不分離的時候陨倡，對于業(yè)務代碼的界限很不明確敛滋，業(yè)務邏輯基本都放在后端，分離之后兴革，前端也承擔了一部分不該后端來寫的業(yè)務邏輯绎晃，數(shù)據(jù)處理更加清晰。

最后是系統(tǒng)分離杂曲，同一個后端系統(tǒng)庶艾，可以將同樣的接口數(shù)據(jù)提供給PC端、Mobile端和Native端等不同的前端終端擎勘，不需要為每一種終端提供一套接口咱揍。同樣，對于前端應用來說棚饵，可以更方便的調(diào)用多個后端服務器的接口煤裙，處理和展示多個系統(tǒng)間的數(shù)據(jù)。

為什么要前后端分離

前后端分離噪漾，讓軟件開發(fā)的流程更加清晰硼砰，解決了開發(fā)階段的痛點。

從前欣硼，前端不止要學習后端的模板渲染語法题翰，還要配置后端的開發(fā)環(huán)境，并不斷同步后端的代碼诈胜，這對于前端來說是非常痛苦的豹障。

而現(xiàn)在，前端有自己的服務器耘斩，不需要再依靠后端服務器來支持項目運行沼填，如果在開發(fā)階段，還可以使用mock數(shù)據(jù)（要先和后端確定接口數(shù)據(jù)結(jié)構(gòu)）括授，擺脫對后端接口的依賴，這樣極大的提高了開發(fā)效率，系統(tǒng)分工也更加明確荚虚。

當然薛夜，如果只是提出一個概念，技術(shù)上不能實現(xiàn)也是空談版述。

隨著前端技術(shù)的更新發(fā)展梯澜，短短幾年內(nèi)就發(fā)展出了gulp、webpack等前端工程化工具渴析，HTML5和JavaScript也不斷更新新特性晚伙，提供了前端應用場景和開發(fā)前端獨立應用的技術(shù)支持，React Native俭茧、PWA和微信小程序等也都是以前端技術(shù)為基礎(chǔ)開發(fā)移動APP和小應用咆疗，前端邁入了一個最好的時代。

前端技術(shù)在近些年的發(fā)展母债，也使得后端不能再將前端束縛在自己麾下午磁，必須放開手讓前端闖出自己的一片天，發(fā)揮大前端的優(yōu)勢毡们。只是下面看一下迅皇，前端技術(shù)在近幾年有了哪些發(fā)展，使得前后端分離成為可能衙熔。

微服務的興起登颓，系統(tǒng)架構(gòu)解耦合，前后端分離是必然的趨勢红氯。

2009年框咙，谷歌推出angularJS，將后端MVC的思想帶到了前端脖隶，模塊化扁耐、指令和雙向綁定等特性使得構(gòu)建一個前端應用項目成為可能。

2012年HTML5規(guī)范定稿产阱，2014年10月標準落地婉称，HTML5的新特性加速了前端領(lǐng)域的發(fā)展。2015年6月17日构蹬，ECMAScript 6發(fā)布正式版本王暗，帶來了很多語言新特性，如class庄敛，module和promise等俗壹。

Nodejs的出現(xiàn)，使得JavaScript編寫服務端程序成為可能藻烤，用JavaScript就可以開發(fā)一個從前端到后端的系統(tǒng)绷雏。Nodejs的事件驅(qū)動在負載均衡方面表現(xiàn)突出头滔，越來越多的Nodejs服務器被應用到了生產(chǎn)環(huán)境。用npm管理的JavaScript模塊涎显，可以快速構(gòu)建一個可插拔的系統(tǒng)坤检。

經(jīng)歷過RequireJS的模塊化，發(fā)展出了ReactJS期吓、VueJS等前端框架早歇，將前端模塊化推上了一個新高度，結(jié)合ECMAScript 6語言class讨勤、module等箭跳，用babel編譯成瀏覽器可識別的ES5語法，經(jīng)過grunt潭千、gulp谱姓、webpack和rollup等打包工具的編譯打包，構(gòu)建一個前端應用變得非常的容易脊岳。

前端的場景也已經(jīng)跳出PC端網(wǎng)頁逝段，有了移動端H5頁面，微信端頁面割捅，Hybird App內(nèi)嵌頁面等奶躯。

使用前端技術(shù)，能做哪些事

網(wǎng)站

網(wǎng)站是前端最基本的形態(tài)了亿驾，最基本的是PC端網(wǎng)站嘹黔、移動端網(wǎng)站∧玻可以在瀏覽器上打開儡蔓，也可以在微信或各種APP內(nèi)打開（這也是一直APP內(nèi)webview打開的方式）

H5游戲

H5游戲已經(jīng)見怪不怪了，當年微信退出打飛機游戲的時候疼邀，推動了H5游戲的大發(fā)展喂江。它無需安裝，通過手機瀏覽器即可訪問旁振，最大的特點就是：輕量获询、簡單。

H5游戲的開發(fā)采用HTML5的canvas等制作拐袜，或者也可以使用webgl來做3D的H5游戲吉嚣。

移動APP

原生的移動APP，是用Native的開發(fā)語言做的蹬铺，比如要開發(fā)IOS APP尝哆，你可以用Object-c，swift等甜攀，要開發(fā)Android APP秋泄，你可以用JAVA或Kotlin等琐馆。

我們這里說的移動APP，是指使用前端技術(shù)來做的印衔。前幾年啡捶，比較火的Hybird APP框架是ionic姥敛，也有國內(nèi)開發(fā)者做的mui和HTML5+框架奸焙，這些框架的技術(shù)是將html、css和JavaScript打包成一個文件彤敛，將文件放到webview中訪問与帆，最后再在外層套上原生應用的殼，生成IOS和Android的安裝文件墨榄。這種APP可以做很多簡單的APP玄糟，不適合交互比較復雜的APP，因為webview的性能還是存在一定的問題袄秩，在Android設備上的卡頓變現(xiàn)比較明顯阵翎。

這兩年，以React為語法基礎(chǔ)的React Native和以Vue為語法基礎(chǔ)的Weex框架之剧，成為新一代使用前端技術(shù)開發(fā)移動APP的框架郭卫，它們拋棄webview使用新的渲染機制，極大的提升了APP的性能和體驗背稼。目前這兩者都處在完善階段贰军，在未來很被看好。

桌面應用

以Nodejs和Chromium為基礎(chǔ)的框架Electron蟹肘，使得使用HTML词疼、CSS、JavaScript開發(fā)跨操作系統(tǒng)的桌面應用成為可能帘腹，應用可以運行在windows贰盗、maxOS和linux系統(tǒng)上。

Chrome APP

Chrome瀏覽器上運行的插件阳欲，是運行在Chrome上的HTML應用舵盈，完全使用前端技術(shù)開發(fā)制作。

2010年Google推出了基于Chrome開發(fā)的PC端操作系統(tǒng)Chrome OS胸完，特點就是速度快书释，設計簡潔等，相對應的市場上也推出了很多基于Chrome OS的筆記本電腦赊窥，廠商有三星和戴爾等爆惧。

微信小程序

2017年1月，微信退出小程序锨能，曾一度引爆前端行業(yè)扯再。

小程序按照前端技術(shù)來設計開發(fā)芍耘，也做好了系統(tǒng)的兼容和不同設備的適配的設計，開發(fā)者只需要專注于實現(xiàn)業(yè)務代碼即可熄阻。所以斋竞，只要熟悉前端技術(shù)就可以很快的做出一個小程序。

Web VR秃殉、Web AR

這兩年坝初，新興并大火的技術(shù)是人工智能和機器學習，緊接著的應該就是VR钾军、AR了吧鳄袍，去年年底QQ和支付寶都在AR和VR方面做出嘗試，在搶紅包上進行實踐吏恭。

前端技術(shù)webgl拗小，可以在瀏覽器上很好的實現(xiàn)3D場景，Three.js是這方便很好的JavaScript框架樱哼。Chrome瀏覽器已經(jīng)兼容Web VR哀九，配合Daydream View，可以瀏覽Web VR頁面搅幅。

前后端分離后阅束，需要考慮哪些事情

分離后的前端，不再是一個簡單的HTML文件盏筐，已經(jīng)是一個獨立的應用系統(tǒng)围俘。除了要考慮頁面的數(shù)據(jù)渲染展示，還要用工程化的思想來考慮前端的架構(gòu)琢融，前后端的交互和數(shù)據(jù)安全等事情界牡。

架構(gòu)

前端應用部署在Nodejs、Nginx或者Nodejs和Nginx組合的服務器上漾抬，通過反向代理轉(zhuǎn)發(fā)頁面請求到后端服務器宿亡，相當于在傳統(tǒng)的流程中加了Nodejs這一層。當然纳令，也可以用Nodejs服務器來承擔一部分負載均衡的工作挽荠，業(yè)務邏輯也可以放在Nodejs這一層來處理，例如：通過判斷請求是來自PC還是APP平绩，將請求發(fā)到不同的后端服務器圈匆。

Nodejs的架構(gòu)中，分層如下：

RESTful接口交互

前后端分離之后捏雌，更多的是采用RESTful風格的接口與后端進行數(shù)據(jù)交互跃赚。

REST是“呈現(xiàn)狀態(tài)轉(zhuǎn)移（REpresentational State Transfer）”的縮寫，一種API的架構(gòu)風格，在客戶端和服務端之間通過呈現(xiàn)狀態(tài)的轉(zhuǎn)移來驅(qū)動應用狀態(tài)的演進纬傲。

在 REST 樣式的 Web 服務中满败，每個資源都有一個地址。資源本身都是方法調(diào)用的目標叹括，方法列表對所有資源都是一樣的算墨。這些方法都是標準方法，包括 HTTP GET汁雷、POST净嘀、PUT、DELETE摔竿，還可能包括 HEADER 和 OPTIONS面粮。

RESTful的API設計，使得后端通過接口向前端傳遞數(shù)據(jù)继低，數(shù)據(jù)的格式通常是JSON這種通用的格式。對前端來說稍走，只要后端返回過來的是RESTful的數(shù)據(jù)就行袁翁，不管后端是用Java寫，還是用python或PHP婿脸，拜托對后端的依賴粱胜，做到前端系統(tǒng)的獨立。

工程化構(gòu)建

Nodejs不止可以用來做前端服務器狐树，在開發(fā)階段焙压，它也能發(fā)揮很大的作用。

前端生態(tài)的發(fā)展抑钟，是圍繞著Nodejs進行的涯曲。用npm來管理項目依賴，可以很好的維護和運行在Nodejs環(huán)境上在塔。

打包工具grunt幻件、gulp、webpack和rollup等蛔溃，都是運行在nodejs上绰沥，再結(jié)合語法編譯、打包部署等插件贺待，將應用輸入成一個完整的應用徽曲。

如果你使用了Angular、React或Vue框架麸塞，或者你使用瀏覽器暫時還不兼容的ES6語法秃臣，還需要在應用打包前用babel將語法編譯成瀏覽器可識別的ES5的語法。

SPA

SPA是單頁Web應用（single page web application喘垂，SPA）的簡寫甜刻，就是只有一張Web頁面的應用绍撞，是加載單個HTML 頁面并在用戶與應用程序交互時動態(tài)更新該頁面的Web應用程序。

像Angular得院、React或Vue就是為了SPA而設計的傻铣，結(jié)合前端路由庫（react-router、vue-router）和狀態(tài)熱存儲（redux祥绞、vuex）等非洲，可以開發(fā)出一個媲美Native APP的Web APP，用戶體驗得到了很大的提升蜕径。

當然两踏，SPA也不是完美的，也不是適合所有的web應用兜喻，需要結(jié)合項目和場景來選擇梦染。

SPA有如下缺點：

初次加載耗時增加∑咏裕可以通過代碼拆分帕识、懶加載來提升性能，減少初次加載耗時遂铡。

SEO不友好肮疗，現(xiàn)在可以通過Prerender或Server render來解決一部分。

頁面的前進和后端需要開發(fā)者自己寫扒接，不過現(xiàn)在一些路由庫已經(jīng)幫助我們基本解決了伪货。

對開發(fā)者要求高，由于做SPA需要了解一整套技術(shù)棧钾怔，所以碱呼，要考慮后期是否有合適的人選進行維護。

掌握哪些技術(shù)才能更好的開發(fā)前端應用

前端技術(shù)日新月異蒂教，發(fā)展迅速巍举，作為一個與時俱進的前端工程師，還是要不斷的學習凝垛，更新技術(shù)棧懊悯。既然這樣，我們要掌握的技術(shù)有哪些呢梦皮？

以下列出一些前端技術(shù)炭分，有些已經(jīng)不會再應用在新系統(tǒng)中，但是還是有很多老系統(tǒng)是使用它們做的剑肯。

語言知識

ES5 & ES6 & ES7 // ES語言基礎(chǔ)

HTML5 API & CSS3 // HTML5和CSS特效

Less & Sass // CSS預編譯語言

SVG & Canvas & D3.js // 圖形數(shù)據(jù)可視化

WebGL & Three.js // 3D場景

CMD & AMD & CommonJS // 語言標準

RequireJS & SeaJS // ES模塊化庫

CoffeeScript & TypeScript // ES語言風格庫

NodeJS & Express & Koa // Node的WEB服務器

TCP & HTTP & WebSocket // 網(wǎng)絡協(xié)議

框架捧毛、庫

jQuery

Backbone

Ember

Angular & Angular2 & Angular4

React

Vue & Vue2

Ionic & Ionic2

React Native

Weex

Electron

…

工具

Sublime Text & Atom & Webstorm & VS code //編輯器、IDE

SVN & Git //代碼管理、版本控制

Chrome Dev Tools & FireFox Developer Edition // 瀏覽器開發(fā)者工具

ESLint & JSLint // JavaScript代碼語法檢查

React DevTools // react調(diào)試工具

Redux DevTools // redux調(diào)試工具

Vue DevTools // vue調(diào)試工具

Grunt & Gulp & browserify & Webpack // 代碼打包工具

Babel // ES6呀忧、react等語法轉(zhuǎn)換工具师痕，將代碼轉(zhuǎn)換成ES5

forever * pm2 // nodejs項目部署工具

karma & mocha & PhantomJS //自動化測試框架

…

最后

前端時代的到來，對于前端開發(fā)來說而账，是一個最好的時代胰坟，同時也是最壞的時代。

說是最好的時代泞辐，是因為各種前端技術(shù)都更新?lián)Q代笔横，開始應用于更多場景，發(fā)揮出更大的優(yōu)勢和作用咐吼。對于前端開發(fā)者來說吹缔，是充滿很多的機會的。

說是最壞的時代锯茄，是因為技術(shù)更新迭代速度非诚崽粒快，可能在兩三年內(nèi)撇吞，整套技術(shù)棧都要更新一遍俗冻，需要開發(fā)者不斷的取學習，更新自己的知識庫牍颈，才能在技術(shù)更迭的大潮中被拍打到浪頭之后。