作者：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ā)分為多個(gè)崗位，可以大致分為 前端绣硝、后端蜻势、測試、運(yùn)維鹉胖。今天我們來聊一聊前后端的那些事握玛。
一、傳統(tǒng)的web開發(fā)模式
前端是近幾年才興起的一個(gè)職業(yè)甫菠，web發(fā)展初期是沒有前端工程是的挠铲，網(wǎng)頁只是向用戶單向的傳遞信息，只是一些簡單的html寂诱，后來加入了css以及一些簡單的 js 拂苹，用于美化頁面與添加一些用戶交互。個(gè)人感覺前端的高速發(fā)展是伴隨著 Ajax 技術(shù)的普及而開始的痰洒。html5 瓢棒、css3 ，越來越多的網(wǎng)站從頁面開始想web 應(yīng)用化的轉(zhuǎn)換带迟，導(dǎo)致網(wǎng)頁的制作難度越來越高音羞，用戶體驗(yàn)已經(jīng)頁面的美觀要求越來越高囱桨，使得前端開發(fā)工程師逐漸分離成為一個(gè)獨(dú)立的職業(yè)仓犬。
目前，在大部分中小公司舍肠，前端實(shí)際上是處于一個(gè)附屬的階段（依附于后端）搀继，前端只寫一些 html，css翠语，以及一個(gè)交互js叽躯，然后將寫好的的 html 交予后端套頁面。
后端拿到 html 頁面后將其轉(zhuǎn)換為后端模板肌括，如 velocity点骑，smarty，jade 等等『诘危可能還會寫一些數(shù)據(jù)加載js憨募。所以基本上每個(gè)后端都會一些 js，他們最怕的是瀏覽器兼容性袁辈。
這種模式的好處是對前端要求“很低”菜谣，以應(yīng)對現(xiàn)在稀缺的前端資源。壞處也很明顯晚缩，主要如下：
- 前后端的一部分工作（html->vm...）重復(fù)了尾膊，降低了工作效率【后端模板統(tǒng)一以vm為例， vm是 java velocity模板的文件】荞彼。
- 后端轉(zhuǎn)vm的過程中不能保證100%的轉(zhuǎn)化冈敛，有時(shí)會遺漏一些東西，比如少了個(gè)閉標(biāo)簽鸣皂。
- 有時(shí)會出現(xiàn)三不管文件莺债，前后端都不想維護(hù)它，這個(gè)文件就會變的越來越爛签夭，越來越?jīng)]人維護(hù)它的惡性循環(huán)齐邦。比如一個(gè) js 文件，第一手是一個(gè)前端寫的第租，寫了一些基礎(chǔ)的事件綁定以及交互邏輯然后就交給后端了措拇，第二手是后端在里面添加了一個(gè)他們的代碼，用戶行為統(tǒng)計(jì)或者其他一些內(nèi)容慎宾。
不知道你們是怎樣的丐吓，反正一旦有人改了我的東西，我便不想維護(hù)它了趟据，慢慢的這個(gè)文件就會變的越來越爛券犁。作為一個(gè)前端工程師，不要指望一個(gè)后端按照你的規(guī)范去寫前段代碼汹碱，在他們眼里粘衬，這不是他的職責(zé)，才不管這代碼寫的爛不爛呢咳促，至少我以前在做后端開發(fā)的時(shí)候是這樣想的稚新。 - 前端很難搞出一套漂亮的代碼,原因很簡單，或者后端有時(shí)也會去修改它，或者dom掌握在后端的手里，前端很難去優(yōu)化它（dom結(jié)構(gòu)）坏挠，或者前端工程化（注：近期遇到的問題，版本控制會在文件名后追加MD5摘要屯阀，但是相應(yīng)的要修改頁面中的文件引用地址缅帘，vm的控制權(quán)不在我們手上，讓后端頻繁的改這個(gè)是不可能的）上一些問題难衰，反正就是各種各樣的問題股毫，最后，前端代碼就是一坨亂麻召衔。好在前端足夠簡單铃诬，我們理一理還不會出什么大的幺蛾子。
因?yàn)榍昂蠖诉@種工作的交集苍凛，有時(shí)會互相甩鍋趣席，甚至出現(xiàn)一些對立。
二醇蝴、前后端分離
前后端分離的最終目的是問題提高工作效率宣肚。
傳統(tǒng)的web開發(fā)模式，后端一定程度上依賴與前端頁面的開發(fā)悠栓，而前端一定程度的依賴后端的數(shù)據(jù)接口的開發(fā)霉涨。整個(gè)開發(fā)過程中部分階段處于串行狀態(tài)。而前后端分離的核心思路就是打破這種串行惭适，使得前端與后端能夠并行開發(fā)笙瑟，從而提高整體的工作效率。
很多公司都在嘗試前后端分離癞志，根據(jù)公司的情況往枷，分離的程度也不同。個(gè)人感覺凄杯，前后端分離的火候错洁，一定程度上依賴該公司前端團(tuán)隊(duì)的實(shí)力。
階段1戒突、頁面分離
得益于 nodejs 的成功屯碴，前端可以不必安裝后端開發(fā)環(huán)境，便可以直接編寫后端模板膊存，這樣前端便直接提供的vm文件导而，而不需要后端去轉(zhuǎn)頁面，節(jié)約一部分后端的工作量膝舅。
這種模式下嗡载，前端開發(fā)工作量會稍微的增加一些，但不會太多仍稀，當(dāng)你熟悉后端模板后，幾乎不會有什么額外負(fù)擔(dān)埂息。
前端團(tuán)隊(duì)需要搭建一套自編譯系統(tǒng)技潘，將vm 自動轉(zhuǎn)化為html遥巴，并刷新瀏覽器。
主要node包：gulp享幽、velocity铲掐、browser-sync
階段2、數(shù)據(jù)接口分離
數(shù)據(jù)接口分離值桩，就是開發(fā)之前摆霉，前后端約定好一個(gè)接口，大家都基于這個(gè)接口開發(fā)奔坟。類似于app開發(fā)携栋。
這樣前端就可以與后端接口解耦了，在后端接口還沒有開發(fā)完成時(shí)咳秉，也可以開發(fā)數(shù)據(jù)交互js婉支。
主要工具： rap 或者 swagger
階段3、展現(xiàn)層分離（展現(xiàn)層由前端維護(hù)）
這個(gè)也算是前后端分離的究極體了澜建。在一部分公司向挖，PHP承擔(dān)著前后端分離的重要角色，有些人會有疑問炕舵，php不是后端語言么何之？
對，但是在這個(gè)階段咽筋，PHP 只負(fù)責(zé) MVC 模式下的 View 和 Controller 層帝美，Model 層交由Java 或C#。關(guān)鍵一點(diǎn)晤硕，這里的 PHP 是由前端團(tuán)隊(duì)維護(hù)悼潭，如果交由后端開發(fā)去維護(hù)，便失去了前后端分離的意義舞箍。也因?yàn)槭乔岸巳ゾS護(hù)舰褪，我們隨其自然的將這里的 PHP 換成了 NodeJS。
該階段對前端是一個(gè)考驗(yàn)疏橄，沒有做后端開發(fā)的的同學(xué)入手比較困難占拍，團(tuán)隊(duì)里至少有一個(gè)對mvc模式較為熟悉，且熟練掌握NodeJS 或者 PHP捎迫，在他的幫助下晃酒，最終每一個(gè)前端成員都能夠獨(dú)立的去寫 view 和對應(yīng)的 Controller。
當(dāng)做到這一步的時(shí)候窄绒，前后端也就真正的分離了贝次。我們直接完全是接口化開發(fā)，并且有需要的話彰导，針對后端接口編寫單元測試蛔翅。
三敲茄、前后端分離Demo
基于階段3的一個(gè)demo。
該階段的一個(gè)難點(diǎn)在于web 與 services 的數(shù)據(jù)交互山析。好在facebook開源的一個(gè)項(xiàng)目 Thrift 為我們解決了這個(gè)問題堰燎。
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
