小編精選 - 技術文章翻譯 · 04月02日

【35 歲零經驗也能理解】Web 系統全貌

前言

你好！
我是從35歲開始、沒有經驗就跳入工程師世界的人。

剛開始學習程式設計時，老實說理解非常模糊。

「因為連上網路就會動」
「按下按鈕就會有結果」

我完全沒有意識到這些背後發生了什麼事。

現在的開發現場「分工化」很進步。並不需要一開始就成為所有技術的高手！
但一定要把「整體架構」掌握住，知道各項技術各自負責什麼，這是絕對不能忽略的超級重要事項。

這次我要用比喻把我學習初期最一頭霧水的「Web 系統整體構造」淺顯說明清楚！

參考書籍：
小森裕介《成為專業的 Web 技術入門》

本文適合以下讀者：

剛開始學習程式，快被一堆片假名/英文術語淹沒的人
對「前端？後端？那是什麼？」完全一臉茫然的人
想像不出自己會負責系統哪一部分的人

什麼是 Web 系統？（一句話說明）

一句話：就是「超大型餐廳」！

我們平常稱之為「網路」的 Web 系統，大致可以拆成以下 4 個要素。我們把它比喻成一間餐廳來說明。

・Web 內容 ＝ 提供給顧客的「料理」
  在手機或電腦畫面上顯示的文字、圖片、影片等「資訊本體」。

・前端 ＝ 餐廳的「客席與服務人員（廳堂）」
  我們直接點按或輸入文字的「畫面」，以及為了在瀏覽器上運作該畫面的各種機制。

・後端 ＝ 餐廳的「廚房」
  使用者看不到的幕後，負責存放會員資料、計算並取出搜尋結果等「伺服器端的機制」。

・網路 ＝ 運送料理的「通道與道路」
  連接你的手機（客席）與遠方伺服器（廚房），用來交換資料的「通訊通道」。

只要把這些放在腦中，接下來的學習會容易很多！馬上來看各自的角色。

各部分的具體角色

1. Web 內容（提供給顧客的料理）

透過網站讓使用者看到或聽到的所有資訊，都稱為「Web 內容」。料理的提供方式有兩種。

・靜態內容（預先準備好的便當）
  預先準備好，任何人看都一樣。
  例：公司簡介的文字、圖片、影片等。

・動態內容（現點現做的料理）
  根據使用者的操作（訂單）即時製作。
  例：Google 的搜尋結果、Amazon 的商品推薦等。

2. 前端（客席與服務人員）

使用者直接接觸到的「表層」世界。

裝置：手機或電腦等，客人使用的「桌子」。

網頁瀏覽器：像 Chrome、Safari 等，提供與 Web 互動的應用程式。

  在瀏覽器裡面，還有幾個重要的內部角色在工作：

HTTP 客戶端：把訂單傳給廚房（伺服器）的服務生。

渲染引擎：讀取 HTML 與 CSS，將內容擺盤並顯示在畫面上的服務生（負責呈現）。

JavaScript 引擎：在畫面上處理動畫等互動效果的「表演者」。

3. 後端（幕後的廚房）

使用者看不到的「幕後」世界。雖然不同系統會用到不同的軟體，但共同的運作如下。

接收來自廳堂（前端）的訂單（請求），使用稱為 HTTP 的通訊規則來處理。

根據訂單製作料理（Web 內容），再回傳給廳堂。

接收這些訂單的窗口就是所謂的「HTTP 伺服器」。

廚房內的做法日新月異沒有單一正解，但大多會有以下這一套（軟體堆疊）。

Web 應用程式框架（烹飪手冊與方便的料理工具）

程式語言（烹飪技術與食譜）

資料庫（裝滿食材的大型冰箱）

4. 網路與互聯網（運送料理的道路）

當前端（客席）和後端（廚房）距離很遠時，連接它們的就是「網路」。
而由世界各組織運營的多個網路互相連接形成的大型道路系統，稱為「互聯網（Internet）」。

5. 執行環境（在哪裡開店？）

讓系統實際運作的「場所」。

前端的執行環境
過去主要是電腦，但現在的主流絕對是智慧型手機與平板。

後端的執行環境
這裡過去與現在有很大的變化。

・內部部署（自建機房 / 自家購置土地蓋店）
  自行購買與管理硬體。
  可以建立大型系統，但成本與管理工作多，維運人力開銷龐大。

・雲端（租用空間開店）
  因為內部部署很麻煩，雲端出現了！
  可以透過網路在需要時租用運算環境。

    IaaS（Infrastructure as a Service）：只租空的店面（基礎設施），按需使用。

    PaaS（Platform as a Service）：租來的是已備齊廚具的店面（平台），讓應用運行更方便。