作者：zjruan 日期：2016-11-09
關(guān)鍵詞：前后端分離，nodejs， thrift
描述：本文討論的范圍是web開發(fā)，前端：前端開發(fā)工程師（html，css，js...），后端：后端web開發(fā)工程師（java，C#...）
近年來互聯(lián)網(wǎng)發(fā)展迅速， 乘著“互聯(lián)網(wǎng)+”的風(fēng)，各行各業(yè)都在與互聯(lián)網(wǎng)結(jié)合，產(chǎn)生了大量的web開發(fā)崗位，IT 行業(yè)悻悻向榮。
web開發(fā)分為多個崗位，可以大致分為 前端、后端、測試、運(yùn)維。今天我們來聊一聊前后端的那些事。
一、傳統(tǒng)的web開發(fā)模式
前端是近幾年才興起的一個職業(yè)，web發(fā)展初期是沒有前端工程是的，網(wǎng)頁只是向用戶單向的傳遞信息，只是一些簡單的html，后來加入了css以及一些簡單的 js ，用于美化頁面與添加一些用戶交互。個人感覺前端的高速發(fā)展是伴隨著 Ajax 技術(shù)的普及而開始的。html5 、css3 ，越來越多的網(wǎng)站從頁面開始想web 應(yīng)用化的轉(zhuǎn)換，導(dǎo)致網(wǎng)頁的制作難度越來越高，用戶體驗(yàn)已經(jīng)頁面的美觀要求越來越高，使得前端開發(fā)工程師逐漸分離成為一個獨(dú)立的職業(yè)。
目前，在大部分中小公司，前端實(shí)際上是處于一個附屬的階段（依附于后端），前端只寫一些 html，css，以及一個交互js，然后將寫好的的 html 交予后端套頁面。
后端拿到 html 頁面后將其轉(zhuǎn)換為后端模板，如 velocity，smarty，jade 等等。可能還會寫一些數(shù)據(jù)加載js。所以基本上每個后端都會一些 js，他們最怕的是瀏覽器兼容性。
這種模式的好處是對前端要求“很低”，以應(yīng)對現(xiàn)在稀缺的前端資源。壞處也很明顯，主要如下：
- 前后端的一部分工作（html->vm...）重復(fù)了，降低了工作效率【后端模板統(tǒng)一以vm為例， vm是 java velocity模板的文件】。
- 后端轉(zhuǎn)vm的過程中不能保證100%的轉(zhuǎn)化，有時會遺漏一些東西，比如少了個閉標(biāo)簽。
- 有時會出現(xiàn)三不管文件，前后端都不想維護(hù)它，這個文件就會變的越來越爛，越來越?jīng)]人維護(hù)它的惡性循環(huán)。比如一個 js 文件，第一手是一個前端寫的，寫了一些基礎(chǔ)的事件綁定以及交互邏輯然后就交給后端了，第二手是后端在里面添加了一個他們的代碼，用戶行為統(tǒng)計或者其他一些內(nèi)容。
不知道你們是怎樣的，反正一旦有人改了我的東西，我便不想維護(hù)它了，慢慢的這個文件就會變的越來越爛。作為一個前端工程師，不要指望一個后端按照你的規(guī)范去寫前段代碼，在他們眼里，這不是他的職責(zé)，才不管這代碼寫的爛不爛呢，至少我以前在做后端開發(fā)的時候是這樣想的。 - 前端很難搞出一套漂亮的代碼,原因很簡單，或者后端有時也會去修改它，或者dom掌握在后端的手里，前端很難去優(yōu)化它（dom結(jié)構(gòu)），或者前端工程化（注：近期遇到的問題，版本控制會在文件名后追加MD5摘要，但是相應(yīng)的要修改頁面中的文件引用地址，vm的控制權(quán)不在我們手上，讓后端頻繁的改這個是不可能的）上一些問題，反正就是各種各樣的問題，最后，前端代碼就是一坨亂麻。好在前端足夠簡單，我們理一理還不會出什么大的幺蛾子。
因?yàn)榍昂蠖诉@種工作的交集，有時會互相甩鍋，甚至出現(xiàn)一些對立。
二、前后端分離
前后端分離的最終目的是問題提高工作效率。
傳統(tǒng)的web開發(fā)模式，后端一定程度上依賴與前端頁面的開發(fā)，而前端一定程度的依賴后端的數(shù)據(jù)接口的開發(fā)。整個開發(fā)過程中部分階段處于串行狀態(tài)。而前后端分離的核心思路就是打破這種串行，使得前端與后端能夠并行開發(fā)，從而提高整體的工作效率。
很多公司都在嘗試前后端分離，根據(jù)公司的情況，分離的程度也不同。個人感覺，前后端分離的火候，一定程度上依賴該公司前端團(tuán)隊的實(shí)力。
階段1、頁面分離
得益于 nodejs 的成功，前端可以不必安裝后端開發(fā)環(huán)境，便可以直接編寫后端模板，這樣前端便直接提供的vm文件，而不需要后端去轉(zhuǎn)頁面，節(jié)約一部分后端的工作量。
這種模式下，前端開發(fā)工作量會稍微的增加一些，但不會太多，當(dāng)你熟悉后端模板后，幾乎不會有什么額外負(fù)擔(dān)。
前端團(tuán)隊需要搭建一套自編譯系統(tǒng)，將vm 自動轉(zhuǎn)化為html，并刷新瀏覽器。
主要node包：gulp、velocity、browser-sync
階段2、數(shù)據(jù)接口分離
數(shù)據(jù)接口分離，就是開發(fā)之前，前后端約定好一個接口，大家都基于這個接口開發(fā)。類似于app開發(fā)。
這樣前端就可以與后端接口解耦了，在后端接口還沒有開發(fā)完成時，也可以開發(fā)數(shù)據(jù)交互js。
主要工具： rap 或者 swagger
階段3、展現(xiàn)層分離（展現(xiàn)層由前端維護(hù)）
這個也算是前后端分離的究極體了。在一部分公司，PHP承擔(dān)著前后端分離的重要角色，有些人會有疑問，php不是后端語言么？
對，但是在這個階段，PHP 只負(fù)責(zé) MVC 模式下的 View 和 Controller 層，Model 層交由Java 或C#。關(guān)鍵一點(diǎn)，這里的 PHP 是由前端團(tuán)隊維護(hù)，如果交由后端開發(fā)去維護(hù)，便失去了前后端分離的意義。也因?yàn)槭乔岸巳ゾS護(hù)，我們隨其自然的將這里的 PHP 換成了 NodeJS。
該階段對前端是一個考驗(yàn)，沒有做后端開發(fā)的的同學(xué)入手比較困難，團(tuán)隊里至少有一個對mvc模式較為熟悉，且熟練掌握NodeJS 或者 PHP，在他的幫助下，最終每一個前端成員都能夠獨(dú)立的去寫 view 和對應(yīng)的 Controller。
當(dāng)做到這一步的時候，前后端也就真正的分離了。我們直接完全是接口化開發(fā)，并且有需要的話，針對后端接口編寫單元測試。
三、前后端分離Demo
基于階段3的一個demo。
該階段的一個難點(diǎn)在于web 與 services 的數(shù)據(jù)交互。好在facebook開源的一個項目 Thrift 為我們解決了這個問題。
Demo中使用了Nodejs 的Express搭建web服務(wù)，使用 Thrift 生成 Node 的client和server的接口文件。
Client:
/* javascript */
...
var client = thrift.createClient(Calculator, connection);
router.get('/', function (req, res, next) {
client.add(10, 100)
.then(function (response) {
res.render('index', { title: 'Express + Thrift', desc: '：1+1=' + response });
});
});
/* jade */
block content
h1= title
p Welcome to #{title}
p Thrift demo #{desc}
Server
/* Nodejs server */
...
var server = thrift.createServer(Calculator, {
add: function (n1, n2) {
var result = n1 + n2;
return result;
}
});
console.log("localhost:9090");
server.listen(9090);
Result
