前後端分離後的前端時代

本文從前端開發的視角，聊一聊前後端分離之後的前端開發的那些事兒。閱讀全文，大約需要8分鐘。

  什麼是前後端分離

要區分前端和後端，需要有個明確的界限。一般，使用者可以直接看到的東西，都是屬於前端的範疇，除了前端之外都屬於後端了。

你負責貌美如花，我負責賺錢養家

在傳統的像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    // ES6、react等語法轉換工具，將程式碼轉換成ES5
• forever * pm2     // nodejs專案部署工具
• karma & mocha & PhantomJS      //自動化測試框架
• ……

後記

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

說是最好的時代，是因為各種前端技術都更新換代，開始應用於更多場景，發揮出更大的優勢和作用。對於前端開發者來說，是充滿很多的機會的。

說是最壞的時代，是因為技術更新迭代速度非常快，可能在兩三年內，整套技術棧都要更新一遍，需要開發者不斷的取學習，更新自己的知識庫，才能在技術更迭的大潮中被拍打到浪頭之後。