Web 開發相關概念

前端 後端 全棧

• 前端 Front-end：網站中用戶看到的部分
• HTML CSS JavaScript
• 庫和框架
• 設計工具
• 後端 Back-end：網站中用戶看不到的部分
• 編程語言
• 框架
• 資料庫
• API
• 全棧 Full-stack：具備前端和後端的能力
• 計劃
• 架構
• 設計
• 開發
• 測試
• 部署
• 維護

Web 相關概念

網路和互聯網

網路(network)是指不少於 2 台以上的設備通過有線或無線的方式互相連接。

當網路中的設備數量增多時，需要使用網路交換器（switch）來作為中介。交換器可以連接其他交換器，也可以連接終端設備，否則網路中的終端設備需要兩兩連接，提高了網路的複雜性。

互聯網則是全球的網路互相連接，也被稱為“內部連接網路（interconnected network）”。

互聯網採用 B/S 或者 C/S 架構，由瀏覽器或客戶端訪問互聯網，互聯網訪問伺服器並返回請求。

Web 伺服器

伺服器(server)是指運行應用程式或服務的電腦，它提供給客戶端某種服務。

數據中心(data center)通常包含大量連接到互聯網的，運行不同服務的伺服器。數據中心中有不同的系統保證其運行，連接和冷卻。

許多網站使用離用戶最近的數據中心來保證用戶可以快速訪問網站內容。

根據伺服器的功能不同，其硬體也有所不同，例如存儲大量圖片的伺服器需要大量的硬碟，而執行大量運算的伺服器需要更快的處理器。

Web 伺服器（Web Server）存儲和分發（deliver）用戶請求的網站內容，例如文本，圖片，視頻和應用數據。

Web 伺服器和瀏覽器（客戶端）之間通過 HTTP 通訊，大多數網頁由 HTML 編碼，內容可以是靜態的或者動態的。大多數 Web 伺服器支持服務端腳本語言來編碼業務邏輯進行通訊。Web 伺服器處理請求和響應。

Web 伺服器是伺服器的一種，有以下功能：

• 網站托管（Web hosting）
• 內容管理系統（CMS）
• 資料庫（Databases）
• 控制面板（Control Panel）
• 電子郵件（Email）

Web 伺服器使用相同的軟硬體托管一個或多個網站，這被稱為虛擬托管（virtual hosting）。Web 伺服器會限制不同用戶的響應速度，防止某一用戶占有資源

網站,網頁和網路應用程式

網站（website）是由一系列網頁（web pages）組成的，網頁之間互相連接。

網頁是一種可編輯的文本文檔，使用 HTML，CSS，JavaScript 三種技術完成對網頁的編寫。

網站和網路應用程式（web application）之間的界限並不清晰，兩個概念經常混用。它們之間的差別是：交互性的強弱。網站更多時候展示內容，Web App 的交互性更強。

當 Web 伺服器發送完整的網頁到設備時，該設備會根據代碼從上到下一行一行解釋為構件塊，也就是用戶看到的內容，這個過程稱為“頁面渲染（page rendering）”。

瀏覽器

瀏覽器是一種使用戶瀏覽萬維網（world wide web）的軟體，它發送請求給 Web 伺服器並接受響應，然後渲染網頁給用戶。

瀏覽器的地址欄通過輸入 URL 地址來定位網頁和網站，URL 地址通常包含協議（protocol），功能變數名稱（domain name）和文件地址（file path）。

瀏覽器和伺服器之間的通信協議是 HTTP（Hyper Transfer Text Protocol / 超文本傳輸協議），發送時使用 HTTP request，返回時使用 HTTP response。

瀏覽器使用 cookies 保存用戶信息，其可以在用戶下次訪問時識別身份（記住用戶名和密碼）。還有其他 cookies 用於記錄用戶喜好、瀏覽模式（pattern）等。還有些被稱為第三方（third-party） cookies，其可以跨站追蹤並收集用戶信息並把信息賣給其他公司。

瀏覽器引擎

瀏覽器引擎（browser engine）也被稱為排版（layout）引擎、渲染（rendering）引擎，是所有瀏覽器的核心軟體組件。其主要任務是把 HTML 和其他文件轉化為用戶設備上的可交互和可視化內容。

雲計算

雲計算（cloud-computing）是指通過付費在互聯網上獲得所需的 IT 資源。用戶可以從雲服務商獲得計算資源、存儲資源和資料庫資源等，而不用自行建造和維護實體的數據中心。

網站托管

網站托管指的是租用某公司或服務商提供的伺服器來托管用戶的網站，因此用戶不用自己去構建伺服器或數據中心。

幾種不同的托管服務：

• Shared hosting 共用托管

與其他的帳號 / 網站共同分享一個 Web 伺服器，包括處理器，存儲和帶寬資源，這可能使得你的應用速度變慢。 這種方式適合小網站，低成本的沙盒環境以及有限制的免費內容（廣告等）。

• Virtual private hosting 虛擬專用托管

這種方式也被稱為 VPS hosting，VPS 是一個運行在物理伺服器上的虛擬伺服器，帶有特定的 CPU，存儲和帶寬。每個物理伺服器下有多個 VPS，每個 VPS 的資源是固定的，因此 VPS 之間互不幹擾。這種托管方式比共用托管更貴，網站的規模也更大。

• Dedicated hosting 專用托管

這種方式是指所有的硬體資源服務於一個網站。比 VPS 更貴。

• Cloud hosting 雲托管

在雲托管中，網站運行在由物理伺服器和虛擬伺服器組成的雲環境中，如果某一種伺服器癱瘓，那麼其他伺服器可以保證網站正常運行。這種方式的好處是可以使用任意多的資源不受硬體的限制，費用也更貴，但是網站的規模更大。

動態和靜態內容

靜態內容指的是返回給客戶端的內容是其存儲在服務端的形式，例如：圖片和視頻。

動態內容是客戶端發出 HTTP 請求到 Web 伺服器再到應用程式伺服器後生成的內容。通常 Web 伺服器會調用應用程式伺服器，也就是後端，然後返回給客戶端。

應用程式伺服器 Application Server 的處理比 Web 伺服器更加複雜，一般包括：

• 運行應用程式邏輯
• 和資料庫進行交互
• 檢查許可權

如果每次請求都要應用伺服器做出響應，網站的性能就會比較差。Web 伺服器中通常有緩存（cache）來解決這一問題。當客戶端發出請求後，Web 伺服器會首先檢查請求內容是否在緩存中，如果在就直接返回，如果不在就去應用程式伺服器生成，返回給客戶端並保存一份拷貝到 Web 伺服器。經過一段時間的請求後，Web 伺服器就會保存和更新一定的緩存。這個功能也被稱為“web 加速（acceleration）”。

單頁應用程式

在 JavaScript 框架出現之前，網站幾乎都是多頁應用程式。但是 Web 伺服器一次性響應返回整個頁面會降低網站的性能。如果應用很複雜，網路連接又慢，用戶的體驗會非常差。

單頁應用程式（Single Page Application / SPA）並不是只有一個網頁，而是伺服器僅發送給瀏覽器一個 HTML 頁面，其他的內容會根據用戶的使用來動態更新。

SPA 使得用戶無需下載新的網頁，而是根據用戶操作重寫當前網頁。

SPA 有兩種提供代碼和資源的服務：

1. bundling 打包：伺服器把所有需要的 HTML，CSS 和 JS 文件發送到瀏覽器。也就是把所有視圖都發送給瀏覽器
2. lazy-loading 懶載入 / code splitting 代碼分割：伺服器僅發送剛好滿足需要的 HTML，CSS 和 JS 資源，其他資源當需要時再下載。也就是發送必要的視圖給瀏覽器

傳統的 Web APP 會返回整個頁面，然後瀏覽器渲染；SPA 會把頁面視為視圖 View 和模板 Template，然後發送 JSON 到瀏覽器，瀏覽器動態載入 JSON 的內容。

Internet 的核心技術

協議

IP

當在互聯網上傳輸數據時，需要 IP 地址作為傳輸的目的地。

IP （Internet Protocol）也叫網際協議，有 IPv4 和 IPv6 兩個常用的版本。其中 IPv4 使用 "." 來分割數字，總共有 4 個組成部分，例如：192.0.2.235；IPv6 使用 ":" 來分割數字，總共有 8 個組成部分，例如：4527:0a00:1567:0200:ff00:0042:8329。

互聯網上傳輸的數據是被稱為 IP 數據包（packet / data gram 數據報）的一系列信息。IP 數據包由以下組成：

• IP Header 報頭：由目的地址和源地址以及一些附加信息組成
• IP Data 數據：具體要傳輸的數據

IP 數據包在傳送時可能出現以下情況：

• 數據包不按預定順序到達
• 數據包傳輸過程中受損
• 數據包傳輸過程中丟失

為解決上述問題，IP 數據包中還包含其他協議的信息，例如：TCP（Transmission Control Protocol / 傳輸控制協議）和 UDP（User Datagram Protocol /用戶數據報協議）。

TCP 可以解決上述三種問題，但是會導致一定的傳輸延遲，並且必須用於按順序到達的數據，例如文本，圖片。

UDP 只能解決數據包傳輸受損問題，並且數據報可能不按順序到達或者根本不能到達，用於可以承受一定損失的數據，例如流媒體（視頻）和錄音。

HTTP

HTTPS 是比 HTTP 更安全的協議，會使用密碼（secret code）對數據進行加密。

HTTP 是用於瀏覽器和伺服器傳輸之間的協議，用於傳輸 HTML 文檔，CSS 樣式，圖片，文件等。

HTTP 是基於請求-響應的。

HTTP 請求

請求行

所有的 HTTP 請求以請求行（request line）開始。請求行由 HTTP 方法，請求資源和 HTTP 協議版本組成。

HTTP 請求由請求行，請求頭，請求體組成。

• 方法描述了客戶端想要訪問資源的方式，常用的有 4 種：
• GET：獲取 Web Server 的數據
• POST：發送數據給 Web Server
• PUT：更新 Web Server 數據
• DELETE：刪除 Web Server 數據
• 路徑描述了資源被存放在伺服器的位置
• 最常用的版本是 1.1 和 2.0
• 請求頭包含了請求的附加信息。

請求頭

請求頭是大小寫敏感的，以 `:` 結尾，並帶有一個值.

• Host 頭：表示伺服器的主機和請求的來源
• User-Agent 頭：告知 Web 伺服器請求發出方所在的應用程式，通常包括操作系統，版本和瀏覽器
• Accept 頭：告知 Web 伺服器，客戶端接受資源的內容類型
• Accept-Language 頭：表示客戶端偏好的語言
• Content-type 頭：表示發送的 request body (請求體)中的內容類型

請求體

HTTP 請求選擇性地包含一個請求體，請求體通常使用 POST 或 PUT 方法傳送數據。

```http
PUT /users/1 HTTP/1.1
Host: example.com
Content-type: text/json

{"key1": "value1"}
```

HTTP 響應

當 Web 伺服器完成 HTTP 請求的處理後，會發送 HTTP 響應。

狀態行

HTTP 響應以狀態行（status line）開始，指示處理成功與否。狀態行以 HTTP 版本，狀態碼和原因短語（reason phrase）組成。原因短語是狀態碼的文本表示。

<html>
<body>
</body>
</html>
```

響應頭下有信息體（message body），其包含了要返回的內容。

狀態碼

狀態碼（Status codes）和狀態信息（Status message）在響應頭中，表示了對請求的響應狀態，狀態碼取值 100 - 599。狀態碼的首位顯示其所屬的類別。

狀態碼共有 5 類：

1. Informational 消息 100-199：通常包含來自伺服器的暫時（Provisonal / Interim）響應，常見的是 

   1. 100 CONTINUE，表示伺服器已經接收了請求頭，並且應該繼續發送請求體。
   2. 101 Switching Protocols：客戶端請求服務端更換協議，服務端也同意了。

2. Successful 成功 200-299：表示請求已經成功被伺服器處理，常見的是 

   1. 200 OK：
      1. GET 對應找到目標
      2. POST 對應成功發送到伺服器
      3. PUT 對應成功發送到伺服器
      4. DELETE 對應成功刪除
   2. 201 Created：伺服器成功處理請求並且資源已經被創建
   3. 202 Accepted：伺服器接收了請求處理，但是處理還沒有完成
   4. 204 No Content：伺服器成功處理請求，但是沒有返回任何內容

3. Redirection 重定向 300-399：表示客戶端請求的資源被移動，常見的是

   1. 301 MOVED PERMANENTLY 永久移動：當前和未來的請求應該轉發到返回的地址
   2. 302 FOUND 找到：當前請求應該轉發到返回的地址

   這類狀態碼的響應頭中會包含資源的地址。

4. Client error 客戶端錯誤 400-499：表示請求的語法有錯或者內容不能被伺服器處理，常見的有：

   1. 400 Bad Request：客戶端或者瀏覽器提交了錯誤的數據或者數據太大，伺服器不能處理請求
   2. 401 Unauthorized：用戶必須登錄帳號
   3. 403 Forbidden：請求有效，但是伺服器拒絕處理。這通常是因為用戶的許可權不夠
   4. 404 Not Found：在 Web 伺服器上找不到請求資源
   5. 405 Method Not Allowed：Web 伺服器不支持使用的 HTTP 方法

5. Server error 服務端錯誤 500-599：表示伺服器處理請求的過程中出錯，常見的是

   1. 500 Internal Server Error 內部服務錯誤：一種常見的伺服器錯誤，處理請求的過程中出錯或者出現未預料到的錯誤
   2. 502 Bad Gateway：Web 伺服器收到來自應用程式伺服器的無效（invalid）請求
   3. 503 Service Unavailable：Web 伺服器不能處理請求

響應頭

和請求頭類似，響應頭的選擇也很多，常見的：

```http
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​
```

* Date 頭：表示 HTTP 響應生成的時間和日期
* Server 頭：描述生成響應使用的 Web 伺服器軟體
* Content-Length 頭：描述響應的長度
* Content-Type 頭：描述了返回資源的媒體類型

響應體

位於響應頭之下，是響應的主體內容。可能包含 HTML，圖片，視頻和其他媒體。

```http
HTTP/1.1 200 OK​
Date: Fri, 11 Feb 2022 15:00:00 GMT+2​
Server: Apache/2.2.14 (Linux)​
Content-Length: 84​
Content-Type: text/html​

<html>
  <head><title>Test</title></head>
  <body>Test HTML page.</body>
</html>
```

DHCP

當電腦連接到一個網路時，動態主機配置協議（Dynamic Host Configuration Protocol）分配給電腦一個 IP 地址。你的電腦通過用戶數據報協議(UDP)使用協議與一種稱為 DHCP 伺服器的伺服器進行通信。這個伺服器追蹤網路上的電腦和它們的 IP 地址。它將為你的電腦分配一個 IP 地址並通過協議做出響應，讓它知道要使用哪個 IP 地址。當你的電腦有了 IP 地址後就可以和其他電腦通信了。

DNS

當你通過瀏覽器訪問網站時，電腦需要知道該網站的 IP 地址。功能變數名稱系統協議（Domain Name System Protocol）提供該功能。電腦隨後檢查與該功能變數名稱相聯繫的 DNS 伺服器然後返回正確的 IP 地址。

IMAP

你的設備需要下載郵件或者管理伺服器郵箱中存儲的郵件，網際網路消息訪問協議（Internet Message Access Protocol）提供該功能。

SMTP

簡單郵件傳輸協議（Simple Mail Transfer Protocol）用於發送郵件。該協議使得郵件客戶端通過一個 SMTP 伺服器發送提交的郵件。SMTP 也可以用於接收郵件，但是 IMAP 用得更多。

POP

郵局協議（Post Office Protocol）是下載郵件到郵件客戶端的舊版本協議。POP 和 IMAP 的不同在於：一旦郵件在本地設備下載成功，POP 會立刻刪除伺服器上的郵件。儘管該協議不再常用，但開發者會用 POP 實現自動化的郵件服務，因為比 IMAP 更直接。

FTP

如何實現本地電腦和伺服器的文件傳輸？文件傳輸協議（File Transfer Protocol）可以列出，發送，接收和刪除伺服器上的文件。這需要在伺服器上運行 FTP 伺服器併在本機使用 FTP 客戶端。

SSH

如何遠程登錄並和伺服器交互？使用安全外殼協議（Secure Shell Protocol）可以做到這一點。使用 SSH 客戶端連接到伺服器上的 SSH 伺服器來對遠程的電腦進行操作。所有通過 SSH 發送的數據都是加密的，第三方不能理解傳輸的數據。

SFTP

SSH 文件傳輸協議 / 安全外殼的文件傳輸協議用於通過 SSH 協議傳輸文件，這保證了傳輸的安全性。大多數 FTP 客戶端都支持 SFTP 協議。

HTML CSS JavaScript

• HTML: 網頁的架構
• CSS: 網頁的樣式
• JavaScript: 網頁的動態交互

文檔對象模型

文檔對象模型（Document Object Model / DOM）是針對 HTML 和 XML 的編程 API，它定義了文檔的邏輯結構和訪問修改文檔的方式，使得 JavaScript 可以操縱 HTML 元素。

DOM 是一種樹形結構模型，其作為 JS 對象保存在瀏覽器的記憶體中。瀏覽器會為每個已下載的網頁生成 DOM。

編輯本地網頁的 DOM 並不會影響保存在伺服器的文檔。

開發者工具

每個瀏覽器都內置了開發者工具（developer tools），常用的幾個功能：

• Console 控制台：可以運行 JavaScript 代碼，可以給出日誌和錯誤信息
• Sources 資源：顯示當前網頁的所有內容
• Network 網路：顯示 HTTP 請求和響應的時間線
• Performance 性能：測試網頁的性能
• Memory 存儲：顯示使用存儲資源最多的代碼段
• Elements 元素：可以看到 HTML 和 CSS 代碼

框架和庫

框架（framework）和庫（libraries）對關鍵問題完成封裝，使得開發速度變得更快。

框架和庫可以是開源的（open-source）也可以是專有的（proprietary）。

這兩個詞有時也是混用的，其區別是：庫是可重用（re-usable）的代碼，用於解決某個特定問題。而框架則給了開發者一種構建的結構。

一個應用程式通常使用一個框架，一個框架通常使用多個庫。一個應用程式使用了一個框架的同時還可以使用其他庫。

框架比庫要更加 opinionated，自由度更小。

框架-應用-庫流：框架調用應用程式，應用程式調用庫，框架包含庫。

框架和庫在使用前需要引入，否則應用會報錯，所以它們也被稱為“依賴（dependency）”。

框架的優點：

• 節省時間
• 結構化
• 最佳實踐

框架的缺點：

• 結構限制
• 相容性

庫的優點：

• 可以替換為更好的庫

庫的缺點：

• 需要挑選一系列庫
• 相容性

API 和服務

API（Application programming interface / 應用程式介面）是一種服務，應用程式，介面，它以簡單的語法提供了高級功能。

API 是一系列函數和序列用於訪問操作系統，應用程式或服務的特征或者數據。API 經常作為組建和應用之間的橋梁。所以 API 也被稱為網關（Gateway）或者中間件（Middleware）。

對於 Web 開發，常見的 API：

• DOM API：把 HTML 文檔流轉化為樹形的 JavaScript 對象。
• Geolocation API 地理位置 API：獲得瀏覽器當前所在的地理位置坐標
• Fetch API：獲取數據
• Canvas API：做 Canvas 圖像
• History API：保存歷史數據
• Web Storage API：客戶端存儲

REST 是用於構建高效 API 的一系列原則。這類 API 經常用於發送和取得資料庫的數據。

API web servers 提供了取得資料庫數據的能力，包括 GET，POST，PUT 和 DELETE 幾種方法。這些 API 使用斷點（endpoints）表示不同的資源如何被訪問。斷點包含在 URL 中，一旦斷點被激活，API 就會產生響應。常見的兩種響應是：

IDE

IDE（Integrated Development Environment / 集成開發環境）類似文本編輯器，可以編寫代碼。IDE 通常支持多種編程語言。

IDE 通常有擴展，語法高亮，自動補全，錯誤提示，協作，重構等功能。

依賴和包管理器

框架和庫有時被稱為依賴。

依賴可能會形成樹形結構，被稱為依賴樹。

包管理器（package manager）用來自動下載和安裝依賴，也可以發佈自己的包。包管理器可以保證你的依賴版本和團隊中其他人所使用的是同一版本。

最常用的包管理器是 NPM（Node Package Manager）。

打包工具

打包工具（bundler）把所有的依賴包裝為單一的文件，也可以把過大的依賴分割為多個包。

常用的打包工具是 Gulp 和 Webpack。