先後端分離後的前端時代

什麼是先後端分離，要區分前端和後端，須要有個明確的界限。通常，用戶能夠直接看到的東西，都是屬於前端的範疇，除了前端以外都屬於後端了。

在傳統的像ASP，JSP和PHP等開發模式中，前端是處在一個混沌的狀態中，能夠說是沒有獨立的「人格」可言。

前端負責切圖和編寫靜態頁面模板，後端將數據渲染到前端提供的頁面模板中，最後將頁面渲染到瀏覽器展現。

這個過程當中，前端只提供頁面模板或者寫一些JavaScript腳本，有的甚至JS腳本都是後端來寫，前端的做用只侷限於切圖和樣式模板文件，這種角色就是傳說中的「切圖仔」。

這也是爲何行業內都以爲前端是一個很簡單的工做，只要花個一週，學下HTML、CSS和PS的簡單技巧就能夠勝任的工做。

如今看來，那時候的前端就是一個打醬油的，發展前景頗有限。那時候的JavaScript腳本也比較簡單，一個jQuery就能夠橫掃天下，因此對於精通語言類代碼的後端程序員來講，能夠很快的上手JavaScript，對前端來講，發展空間就更小了。

先後端分離，不僅是簡單的代碼的分離。

首先是要架構上分離解耦，逐漸擺脫先後端在架構上的依賴，先後端各司其職，分開部署在不一樣的服務器上，經過RESTful接口傳遞數據。減輕後端服務器的壓力，後端服務器再也不負責頁面渲染，只負責輸入數據，吞吐量提高了好幾倍。

其次是邏輯分離，不分離的時候，對於業務代碼的界限很不明確，業務邏輯基本都放在後端，分離以後，前端也承擔了一部分不應後端來寫的業務邏輯，數據處理更加清晰。

最後是系統分離，同一個後端系統，能夠將一樣的接口數據提供給PC端、Mobile端和Native端等不一樣的前端終端，不須要爲每一種終端提供一套接口。一樣，對於前端應用來講，能夠更方便的調用多個後端服務器的接口，處理和展現多個系統間的數據。

爲何要先後端分離

先後端分離，讓軟件開發的流程更加清晰，解決了開發階段的痛點。

從前，前端不止要學習後端的模板渲染語法，還要配置後端的開發環境，並不斷同步後端的代碼，這對於前端來講是很是痛苦的。

而如今，前端有本身的服務器，不須要再依靠後端服務器來支持項目運行，若是在開發階段，還可使用mock數據（要先和後端肯定接口數據結構），擺脫對後端接口的依賴，這樣極大的提升了開發效率，系統分工也更加明確。

固然，若是隻是提出一個概念，技術上不能實現也是空談。

隨着前端技術的更新發展，短短几年內就發展出了gulp、webpack等前端工程化工具，HTML5和JavaScript也不斷更新新特性，提供了前端應用場景和開發前端獨立應用的技術支持，React Native、PWA和微信小程序等也都是之前端技術爲基礎開發移動APP和小應用，前端邁入了一個最好的時代。

前端技術在近些年的發展，也使得後端不能再將前端束縛在本身麾下，必須放開手讓前端闖出本身的一片天，發揮大前端的優點。只是下面看一下，前端技術在近幾年有了哪些發展，使得先後端分離成爲可能。

微服務的興起，系統架構解耦合，先後端分離是必然的趨勢。

2009年，谷歌推出angularJS，將後端MVC的思想帶到了前端，模塊化、指令和雙向綁定等特性使得構建一個前端應用項目成爲可能。

2012年HTML5規範定稿，2014年10月標準落地，HTML5的新特性加速了前端領域的發展。2015年6月17日，ECMAScript 6發佈正式版本，帶來了不少語言新特性，如class，module和promise等。

Nodejs的出現，使得JavaScript編寫服務端程序成爲可能，用JavaScript就能夠開發一個從前端到後端的系統。Nodejs的事件驅動在負載均衡方面表現突出，愈來愈多的Nodejs服務器被應用到了生產環境。用npm管理的JavaScript模塊，能夠快速構建一個可插拔的系統。

經歷過RequireJS的模塊化，發展出了ReactJS、VueJS等前端框架，將前端模塊化推上了一個新高度，結合ECMAScript 6語言class、module等，用babel編譯成瀏覽器可識別的ES5語法，通過grunt、gulp、webpack和rollup等打包工具的編譯打包，構建一個前端應用變得很是的容易。

前端的場景也已經跳出PC端網頁，有了移動端H5頁面，微信端頁面，Hybird App內嵌頁面等。

使用前端技術，能作哪些事

網站

網站是前端最基本的形態了，最基本的是PC端網站、移動端網站。能夠在瀏覽器上打開，也能夠在微信或各類APP內打開（這也是一直APP內webview打開的方式）

H5遊戲

H5遊戲已經見怪不怪了，當年微信退出打飛機遊戲的時候，推進了H5遊戲的大發展。它無需安裝，經過手機瀏覽器便可訪問，最大的特色就是：輕量、簡單。

H5遊戲的開發採用HTML5的canvas等製做，或者也可使用webgl來作3D的H5遊戲。

移動APP

原生的移動APP，是用Native的開發語言作的，好比要開發IOS APP，你能夠用Object-c，swift等，要開發Android APP，你能夠用JAVA或Kotlin等。

咱們這裏說的移動APP，是指使用前端技術來作的。前幾年，比較火的Hybird APP框架是ionic，也有國內開發者作的mui和HTML5+框架，這些框架的技術是將html、css和JavaScript打包成一個文件，將文件放到webview中訪問，最後再在外層套上原生應用的殼，生成IOS和Android的安裝文件。這種APP能夠作不少簡單的APP，不適合交互比較複雜的APP，由於webview的性能仍是存在必定的問題，在Android設備上的卡頓變現比較明顯。

這兩年，以React爲語法基礎的React Native和以Vue爲語法基礎的Weex框架，成爲新一代使用前端技術開發移動APP的框架，它們拋棄webview使用新的渲染機制，極大的提高了APP的性能和體驗。目前這二者都處在完善階段，在將來很被看好。

桌面應用

以Nodejs和Chromium爲基礎的框架Electron，使得使用HTML、CSS、JavaScript開發跨操做系統的桌面應用成爲可能，應用能夠運行在windows、maxOS和linux系統上。

Chrome APP

Chrome瀏覽器上運行的插件，是運行在Chrome上的HTML應用，徹底使用前端技術開發製做。

2010年Google推出了基於Chrome開發的PC端操做系統Chrome OS，特色就是速度快，設計簡潔等，相對應的市場上也推出了不少基於Chrome OS的筆記本電腦，廠商有三星和戴爾等。

微信小程序

2017年1月，微信退出小程序，曾一度引爆前端行業。

小程序按照前端技術來設計開發，也作好了系統的兼容和不一樣設備的適配的設計，開發者只須要專一於實現業務代碼便可。因此，只要熟悉前端技術就能夠很快的作出一個小程序。

Web VR、Web AR

這兩年，新興並大火的技術是人工智能和機器學習，緊接着的應該就是VR、AR了吧，去年年末QQ和支付寶都在AR和VR方面作出嘗試，在搶紅包上進行實踐。

前端技術webgl，能夠在瀏覽器上很好的實現3D場景，Three.js是這方便很好的JavaScript框架。Chrome瀏覽器已經兼容Web VR，配合Daydream View，能夠瀏覽Web VR頁面。

先後端分離後，須要考慮哪些事情

分離後的前端，再也不是一個簡單的HTML文件，已是一個獨立的應用系統。除了要考慮頁面的數據渲染展現，還要用工程化的思想來考慮前端的架構，先後端的交互和數據安全等事情。

架構

前端應用部署在Nodejs、Nginx或者Nodejs和Nginx組合的服務器上，經過反向代理轉發頁面請求到後端服務器，至關於在傳統的流程中加了Nodejs這一層。固然，也能夠用Nodejs服務器來承擔一部分負載均衡的工做，業務邏輯也能夠放在Nodejs這一層來處理，例如：經過判斷請求是來自PC仍是APP，將請求發到不一樣的後端服務器。

Nodejs的架構中，分層以下：

RESTful接口交互

先後端分離以後，更多的是採用RESTful風格的接口與後端進行數據交互。

REST是「呈現狀態轉移（REpresentational State Transfer）」的縮寫，一種API的架構風格，在客戶端和服務端之間經過呈現狀態的轉移來驅動應用狀態的演進。

在 REST 樣式的 Web 服務中，每一個資源都有一個地址。資源自己都是方法調用的目標，方法列表對全部資源都是同樣的。這些方法都是標準方法，包括 HTTP GET、POST、PUT、DELETE，還可能包括 HEADER 和 OPTIONS。
RESTful的API設計，使得後端經過接口向前端傳遞數據，數據的格式一般是JSON這種通用的格式。對前端來講，只要後端返回過來的是RESTful的數據就行，無論後端是用Java寫，仍是用python或PHP，拜託對後端的依賴，作到前端系統的獨立。

工程化構建

Nodejs不止能夠用來作前端服務器，在開發階段，它也能發揮很大的做用。

前端生態的發展，是圍繞着Nodejs進行的。用npm來管理項目依賴，能夠很好的維護和運行在Nodejs環境上。

打包工具grunt、gulp、webpack和rollup等，都是運行在nodejs上，再結合語法編譯、打包部署等插件，將應用輸入成一個完整的應用。

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

SPA

SPA是單頁Web應用（single page web application，SPA）的簡寫，就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

像Angular、React或Vue就是爲了SPA而設計的，結合前端路由庫（react-router、vue-router）和狀態熱存儲（redux、vuex）等，能夠開發出一個媲美Native APP的Web APP，用戶體驗獲得了很大的提高。

固然，SPA也不是完美的，也不是適合全部的web應用，須要結合項目和場景來選擇。

SPA有以下缺點：

初次加載耗時增長。能夠經過代碼拆分、懶加載來提高性能，減小初次加載耗時。

SEO不友好，如今能夠經過Prerender或Server render來解決一部分。

頁面的前進和後端須要開發者本身寫，不過如今一些路由庫已經幫助咱們基本解決了。

對開發者要求高，因爲作SPA須要瞭解一整套技術棧，因此，要考慮後期是否有合適的人選進行維護。

掌握哪些技術才能更好的開發前端應用

前端技術突飛猛進，發展迅速，做爲一個與時俱進的前端工程師，仍是要不斷的學習，更新技術棧。既然這樣，咱們要掌握的技術有哪些呢？

如下列出一些前端技術，有些已經不會再應用在新系統中，可是仍是有不少老系統是使用它們作的。

語言知識

ES5 & ES6 & ES7 // ES語言基礎

HTML5 API & CSS3 // HTML5和CSS特效

Less & Sass // CSS預編譯語言

SVG & Canvas & D3.js // 圖形數據可視化

WebGL & Three.js // 3D場景

CMD & AMD & CommonJS // 語言標準

RequireJS & SeaJS // ES模塊化庫

CoffeeScript & TypeScript // ES語言風格庫

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

TCP & HTTP & WebSocket // 網絡協議

框架、庫

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 // 瀏覽器開發者工具

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

React DevTools // react調試工具

Redux DevTools // redux調試工具

Vue DevTools // vue調試工具

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

Babel // ES六、react等語法轉換工具，將代碼轉換成ES5

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

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

......

最後

前端時代的到來，對於前端開發來講，是一個最好的時代，同時也是最壞的時代。

說是最好的時代，是由於各類前端技術都更新換代，開始應用於更多場景，發揮出更大的優點和做用。對於前端開發者來講，是充滿不少的機會的。

說是最壞的時代，是由於技術更新迭代速度很是快，可能在兩三年內，整套技術棧都要更新一遍，須要開發者不斷的取學習，更新本身的知識庫，才能在技術更迭的大潮中被拍打到浪頭以後。