大學(xué)的時(shí)候，在所有不同系統(tǒng)的開(kāi)發(fā)模式中，對(duì)我個(gè)人來(lái)說(shuō)最困難的就是Web開(kāi)發(fā)，現(xiàn)在想來(lái)可能是因?yàn)樵赪eb開(kāi)發(fā)中，默認(rèn)就有多個(gè)運(yùn)行時(shí)環(huán)境共同作用，才能完成Web應(yīng)用的整個(gè)流程。這個(gè)過(guò)程中涉及的一些運(yùn)行時(shí)視圖，在當(dāng)時(shí)的認(rèn)知水平情況下，無(wú)法全面理解。

后來(lái)在實(shí)際的互聯(lián)網(wǎng)項(xiàng)目中，通過(guò)LAMP、Django、nodejs和Spring MVC等一系列不同語(yǔ)言和框架的開(kāi)發(fā)學(xué)習(xí)，從摸索到完全可以在大腦中構(gòu)建清晰的運(yùn)行時(shí)視圖，這個(gè)時(shí)候就可以像《架構(gòu)實(shí)踐》中所描述的籃球教練一樣，看到細(xì)節(jié)。在組建培訓(xùn)團(tuán)隊(duì)的過(guò)程中，我也發(fā)現(xiàn)，對(duì)于這個(gè)運(yùn)行時(shí)的理解程度，幾乎就決定的新人、中間水平一直到全棧工程師的表現(xiàn)能力，還有對(duì)架構(gòu)的理解。在面試的時(shí)候也能夠很好的考察開(kāi)發(fā)人員的全局視野。

因此，我認(rèn)為，理解從輸入網(wǎng)址，到網(wǎng)頁(yè)完整呈現(xiàn)出來(lái)的過(guò)程，對(duì)于Web應(yīng)用開(kāi)發(fā)，是至關(guān)重要的；具備了整個(gè)圖景的思考和實(shí)戰(zhàn)能力，就可以挑戰(zhàn)真正意義上的全棧開(kāi)發(fā)。本文將會(huì)試著簡(jiǎn)單描述這個(gè)過(guò)程，并且思考一下我對(duì)全棧開(kāi)發(fā)的理解。

運(yùn)行時(shí)組件

首先我會(huì)從運(yùn)行時(shí)的視角開(kāi)始，在整個(gè)過(guò)程中從多個(gè)粒度，解析所有發(fā)生的事情的運(yùn)行時(shí)。

最大粒度的劃分，由兩個(gè)運(yùn)行時(shí)，本地的瀏覽器和云端的服務(wù)器組成；兩個(gè)實(shí)體邏輯上是運(yùn)行在不同機(jī)器上的完全隔離的進(jìn)程里，因此，也可以把http協(xié)議理解為一種進(jìn)程間通信。

在瀏覽器這個(gè)運(yùn)行時(shí)里，至少需要三個(gè)必要的組件，才能完成工作，分別是進(jìn)行http遠(yuǎn)程通訊的http客戶端、javascript腳本解釋器還有html+css樣式的渲染；簡(jiǎn)單的來(lái)看，就是這三個(gè)組件，加上瀏覽器的運(yùn)行時(shí)控制器，組成了完整的Web瀏覽器。

在云端，也有必要的細(xì)分，可能物理上不一定完全分離，但是邏輯上必須由對(duì)應(yīng)的單元組成。http服務(wù)器負(fù)責(zé)處理http協(xié)議的通訊，以文本或文件形式將url指向的資源返回給客戶端；應(yīng)用服務(wù)器執(zhí)行特定語(yǔ)言的處理程序，進(jìn)行計(jì)算；數(shù)據(jù)管理軟件，負(fù)責(zé)提供和存儲(chǔ)數(shù)據(jù)。根據(jù)不同架構(gòu)和應(yīng)用場(chǎng)景，還可以有很多細(xì)分的組件，通過(guò)各自的接口相互協(xié)作，完成數(shù)據(jù)計(jì)算和資源處理，對(duì)資源進(jìn)行處理，并且返回給請(qǐng)求的客戶端。

基本的運(yùn)行時(shí)組件：

• javascript解釋器，如Google V8
• html和css渲染
• http客戶端
• http服務(wù)器，如Apache httpd、tomcat和nginx
• 應(yīng)用容器，如Tomcat、PHP解釋器和Python運(yùn)行時(shí)
• 數(shù)據(jù)庫(kù)，例如：MySQL、MongoDB、Redis等
• 其他各種中間件，Kafka、ElasticSearch、ZooKeeper等

上面這些運(yùn)行時(shí)環(huán)境，參與并實(shí)現(xiàn)了從瀏覽器請(qǐng)求一直到完整網(wǎng)頁(yè)信息和交互效果的呈現(xiàn)。

簡(jiǎn)單過(guò)程描述

基于LAMP的簡(jiǎn)單描述

1. 用戶在瀏覽器中輸入一個(gè)鏈接地址，
2. 瀏覽器通過(guò)DNS服務(wù)，找到url指向的服務(wù)器。
3. 瀏覽器通過(guò)TCP協(xié)議，向Apache Httpd服務(wù)器請(qǐng)求資源。
4. Apache Httpd服務(wù)器根據(jù)配置，決定如何處理資源；并且處理請(qǐng)求及響應(yīng)的header和body。
5. 直接返回靜態(tài)資源，如果是配置了其他應(yīng)用服務(wù)器或者網(wǎng)關(guān)，那么apache將請(qǐng)求轉(zhuǎn)發(fā)給網(wǎng)關(guān)或應(yīng)用容器，例如Tomcat或者調(diào)用php解釋器，在應(yīng)用容器返回處理的結(jié)果之后，返回給客戶端。
6. php運(yùn)行時(shí)或者Tomcat分析路由和請(qǐng)求頭部，執(zhí)行相應(yīng)的服務(wù)端代碼，調(diào)用服務(wù)器配置的資源，根據(jù)請(qǐng)求，進(jìn)行計(jì)算。
7. php程序調(diào)用MySQL數(shù)據(jù)庫(kù)，通過(guò)mysql協(xié)議獲取程序?qū)?yīng)的數(shù)據(jù)。

云端服務(wù)器

服務(wù)器存儲(chǔ)了根據(jù)系統(tǒng)設(shè)計(jì)需要提供的各種資源，包括核心的MVC處理代碼，這里MVC和分層架構(gòu)是一種入門級(jí)的最佳實(shí)踐，可以應(yīng)付大多數(shù)的Web場(chǎng)景需要。整個(gè)MVC和三層架構(gòu)，都是通過(guò)代碼實(shí)現(xiàn)的一種邏輯結(jié)構(gòu)，運(yùn)行在PHP解釋器或者其他語(yǔ)言的對(duì)應(yīng)運(yùn)行時(shí)中；理論上說(shuō)，每個(gè)web應(yīng)用，通過(guò)MVC就可以實(shí)現(xiàn)業(yè)務(wù)邏輯，其他的所有資源，都可以通過(guò)MVC代碼的調(diào)用實(shí)現(xiàn)。

除了核心的業(yè)務(wù)邏輯以外，根據(jù)模塊化，設(shè)計(jì)的需要，或者現(xiàn)實(shí)的限制，單個(gè)Web應(yīng)用可能并不擁有所需的所有資源，就需要通過(guò)調(diào)用各種本地或者遠(yuǎn)程的資源來(lái)獲取自身沒(méi)有的數(shù)據(jù)。一般來(lái)說(shuō)，服務(wù)端的語(yǔ)言運(yùn)行環(huán)境，通過(guò)驅(qū)動(dòng)可以做物理機(jī)能做的任何事情。外部資源無(wú)論數(shù)據(jù)庫(kù)還是消息隊(duì)列，rpc都是基于互聯(lián)網(wǎng)通訊的，通過(guò)tcp或者h(yuǎn)ttp，以自己設(shè)計(jì)的一套協(xié)議提供對(duì)外服務(wù)。在mvc執(zhí)行的運(yùn)行時(shí)，可以自己實(shí)現(xiàn)對(duì)應(yīng)服務(wù)的協(xié)議來(lái)調(diào)用遠(yuǎn)程資源，但是更一般的情況，我們直接調(diào)用遠(yuǎn)程資源在對(duì)應(yīng)語(yǔ)言下提供的API來(lái)完成資源獲取，這些API和我們的調(diào)用程序會(huì)實(shí)現(xiàn)某種設(shè)計(jì)模式，使應(yīng)用和API以更有邏輯完整性的方式整合起來(lái)。

而瀏覽器端的主角javascript，除了nodejs之外，在服務(wù)端看來(lái)，跟另外兩個(gè)主角html、css一樣，從html誕生之初，就與普通文本無(wú)異，是一種超文本。雖然通過(guò)語(yǔ)法和語(yǔ)義需要，服務(wù)端也可以實(shí)現(xiàn)處理文本的API，更優(yōu)雅的生成最終的三大主角，例如freemarker對(duì)應(yīng)html，或者grunt、gulp的uglify、less等構(gòu)建過(guò)程放在服務(wù)器端處理。

瀏覽器客戶端

用戶在瀏覽器里看到的一切，從輸入url獲取對(duì)應(yīng)的html文本開(kāi)始，在html解析階段，script、link標(biāo)簽所指向的資源，會(huì)發(fā)起新的http請(qǐng)求來(lái)獲取，這個(gè)跟img加載圖片是一樣的。css樣式的解析也是并行發(fā)生的，從link到style各個(gè)優(yōu)先級(jí)的css將會(huì)應(yīng)用到瀏覽器建立的dom結(jié)構(gòu)中，用戶自定義的css樣式加上瀏覽器為每種標(biāo)準(zhǔn)html標(biāo)簽內(nèi)置的style結(jié)合起來(lái)，就是用戶看到的頁(yè)面效果。script標(biāo)簽加載執(zhí)行javascript代碼也是同步開(kāi)始的，尤其是現(xiàn)代前端，單頁(yè)面web時(shí)代，javascript扮演了更加重要的作用，包括在前端更像一個(gè)完整的客戶端應(yīng)用，前端通過(guò)mvc、mvvm、amd等技術(shù)具備了完整端系統(tǒng)的能力。通過(guò)瀏覽器的ajax支持，websocket實(shí)現(xiàn)異步通訊，就能夠?qū)崿F(xiàn)純粹前后端分離的應(yīng)用。

這樣我們就可以去試著理解各種web應(yīng)用如何構(gòu)建，并且自己親自權(quán)衡取舍，設(shè)計(jì)構(gòu)建一個(gè)合適的web應(yīng)用。

對(duì)開(kāi)發(fā)的意義

web全棧開(kāi)發(fā)，對(duì)于我自己而言，我覺(jué)得來(lái)自于達(dá)芬奇更早的維特魯威，在2000多年前的古羅馬時(shí)代對(duì)建筑師所需要具備的能力和素質(zhì)的描述，要構(gòu)建永恒之道的系統(tǒng)，理所當(dāng)然需要理解整個(gè)系統(tǒng)如何構(gòu)建。

從系統(tǒng)架構(gòu)的角度，軟件系統(tǒng)，本身就是復(fù)雜的有機(jī)系統(tǒng)，任何構(gòu)建的系統(tǒng)，應(yīng)該是可以被一個(gè)人能夠清晰完整的理解，在大腦中建立模型的。否則就需要將系統(tǒng)的復(fù)雜性分散到不同的子系統(tǒng)，對(duì)于一個(gè)邏輯完整邊界清晰的系統(tǒng)應(yīng)該能夠理解。

從開(kāi)發(fā)角度，在精益mvp模式開(kāi)發(fā)中，團(tuán)隊(duì)總是處在能力不足的困擾之下，圍繞系統(tǒng)的薄弱環(huán)節(jié)，應(yīng)該有人既能看到整體，又有能力實(shí)現(xiàn)具體的細(xì)節(jié)。