傳統(tǒng)后臺(tái)架構(gòu)
上古時(shí)代
<!DOCTYPE html>
<html>
<body>
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, firstname, lastname FROM MyGuests";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<div> id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "</div>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
這種模式非常適合創(chuàng)業(yè)型小項(xiàng)目挨下，不分前后端，經(jīng)常 3-5 人搞定所有開(kāi)發(fā)下面。頁(yè)面由 JSP、PHP 等工程師在服務(wù)端生成绩聘，瀏覽器負(fù)責(zé)展現(xiàn)沥割。基本上是服務(wù)端給什么瀏覽器就展現(xiàn)什么凿菩，展現(xiàn)的控制在Server 層机杜。
后端MVC時(shí)代
為了降低復(fù)雜度，以后端為出發(fā)點(diǎn)衅谷，有了 Web Server 層的架構(gòu)升級(jí)椒拗，比如 thinkPHP 、Laravel获黔、 Spring MVC 等蚀苛。
Ajax時(shí)代
XMLHttpRequest異步調(diào)用服務(wù)器端來(lái)獲取數(shù)據(jù)，并將數(shù)據(jù)應(yīng)用在客戶端玷氏，實(shí)現(xiàn)了無(wú)刷新的效果堵未，這使得Google Maps依賴(lài)其極好的用戶體驗(yàn)獲取了巨大的成功，Ajax這個(gè)概念開(kāi)始火爆盏触，SPA （Single Page Application 單頁(yè)面應(yīng)用）時(shí)代就開(kāi)始了渗蟹。
前端 MV* 時(shí)代
為了降低前端開(kāi)發(fā)復(fù)雜度，除了 Backbone赞辩，還有大量框架涌現(xiàn)雌芽，比如 EmberJS、KnockoutJS辨嗽、AngularJS世落、Vue、React等等糟需。
好處很明顯：
1岛心、前后端職責(zé)很清晰。前端工作在瀏覽器端篮灼，后端工作在服務(wù)端忘古。清晰的分工，可以讓開(kāi)發(fā)并行诅诱，測(cè)試數(shù)據(jù)的模擬不難髓堪，前端可以本地開(kāi)發(fā)。后端則可以專(zhuān)注于業(yè)務(wù)邏輯的處理，輸出 RESTful 等接口干旁。
2驶沼、前端開(kāi)發(fā)的復(fù)雜度可控。前端代碼很重争群，但合理的分層回怜，讓前端代碼能各司其職。這一塊蠻有意思的换薄，簡(jiǎn)單如模板特性的選擇玉雾，就有很多很多講究。并非越強(qiáng)大越好轻要，限制什么复旬，留下哪些自由，代碼應(yīng)該如何組織冲泥，所有這一切設(shè)計(jì)驹碍，得花一本的厚度去說(shuō)明。
3凡恍、部署相對(duì)獨(dú)立志秃，產(chǎn)品體驗(yàn)可以快速改進(jìn)。
但依舊有不足之處：
1嚼酝、代碼不能復(fù)用洽损。比如后端依舊需要對(duì)數(shù)據(jù)做各種校驗(yàn)，校驗(yàn)邏輯無(wú)法復(fù)用瀏覽器端的代碼革半。如果可以復(fù)用碑定，那么后端的數(shù)據(jù)校驗(yàn)可以相對(duì)簡(jiǎn)單化。2又官、全異步延刘，對(duì) SEO 不利。往往還需要服務(wù)端做同步渲染的降級(jí)方案六敬。
3碘赖、性能并非最佳，特別是移動(dòng)互聯(lián)網(wǎng)環(huán)境下外构。
4普泡、SPA 不能滿足所有需求，依舊存在大量多頁(yè)面應(yīng)用审编。URL Design 需要后端配合撼班，前端無(wú)法完全掌控。
Node全棧&同構(gòu)
前端為主的 MV* 模式解決了很多很多問(wèn)題垒酬，但如上所述砰嘁，依舊存在不少不足之處件炉。隨著 Node.js 的興起，JavaScript 開(kāi)始有能力運(yùn)行在服務(wù)端矮湘。
React 同構(gòu)渲染
Koa+React
有了服務(wù)端渲染的基礎(chǔ)斟冕，后端和前端的路由也可以做到統(tǒng)一。
同構(gòu)的實(shí)現(xiàn)彌補(bǔ)了前面提到的單純前端實(shí)現(xiàn)的SPA的提到前后端代碼復(fù)用缅阳，SEO磕蛇，URL Design這些問(wèn)題。
引入NodeJS實(shí)現(xiàn)前后端分離
- 為什么要前后端分離十办？
由于之前的Web基本上都是基于后端的MVC框架秀撇，架構(gòu)決定了前端只能依賴(lài)后端。前端寫(xiě)好靜態(tài)demo橘洞，然后根據(jù)分工前端或者后端改寫(xiě)成相應(yīng)的模版語(yǔ)言捌袜，比如 blade说搅，smarty等等炸枣。這種基于后端環(huán)境開(kāi)發(fā)是很痛苦和低效率的，后端沒(méi)法擺脫對(duì)展現(xiàn)的強(qiáng)關(guān)注弄唧，從而專(zhuān)心于業(yè)務(wù)邏輯層的開(kāi)發(fā)适肠，前端也吐槽后端亂改他們的代碼。所以加上一個(gè)nodejs中間層來(lái)分離候引。
- 怎么做前后端分離侯养？
前端：負(fù)責(zé)視圖和交互層。
后端：負(fù)責(zé)Model層澄干，業(yè)務(wù)處理/數(shù)據(jù)等逛揩。
掘金的架構(gòu)
- leancloud
leancloud 是核心功能基于 Clojure 開(kāi)發(fā)的云端數(shù)據(jù)存儲(chǔ)解決方案，不同于傳統(tǒng)關(guān)系型數(shù)據(jù)庫(kù)麸俘，提供了標(biāo)準(zhǔn)的 REST API 和在其上封裝的各平臺(tái)的 SDK辩稽，數(shù)據(jù)對(duì)象以 JSON 格式隨存隨取，全平臺(tái)支持?jǐn)?shù)據(jù)增刪改查操作从媚。
- 掘金前后端架構(gòu)
掘金使用了Vue作為核心的前端框架逞泄，部署在leancloud云引擎的Nodejs服務(wù)器做為API服務(wù)器。Nodejs直接對(duì)接以json為數(shù)據(jù)模型的Leancloud拜效。
參考
https://github.com/lifesinger/blog/issues/184
http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
https://zhuanlan.zhihu.com/p/20669111
