[Day3] - 前端，後端是在做什麼？ --續前端後端的歷史及架構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

Software Development

使用Django Rest Framework, Docker, Docker Compose 製作後端服務應用系列第 3 篇

[Day3] - 前端，後端是在做什麼？ --續前端後端的歷史及架構

13th鐵人賽前端後端 api

無聊工程師 bored_engineer

團隊董事長清潔隊

2021-09-16 23:43:32

1694 瀏覽

分享至

其實每個時期程式流行的架構以及寫法會略有不同，每個時期前端後端負責的範疇也不盡相同，我們無法知道我們會碰到什麼樣的架構，也無法決定前人是如何設計，我們能做的只能增強自己的理解，讓自己能夠快速地理解架構並開發。我覺得了解不同架構之下的網站系統是如何運作的是一件很重要的事。就像是讀書之前先看單元大綱，可以能抓住重點輪廓一般，在開發和溝通上，更了解架構時可以更快的進入狀況～

網頁時代
還記得以前使用網路的情景嗎？過去的網路是要用撥接的(可能有點久遠....)
網站的一開始其實業務邏輯極其的簡單，就是基本的一個網頁，使用者去到一個網址，伺服器回傳一個html網頁給瀏覽器，單純簡單的美好，使人們開始可以透過網路取得資訊。但別小看這簡單的靜態網頁，許多的官方網站，其實用靜態的網頁也是可以完成的～

模板時代
等到網際網路變得持續發達之後，人們開始把越來越多的事情在網路上實現，單純的靜態網頁已經不夠我們使用，人們使用程式設計出應用，像是部落格，搜尋引擎，購物車等等。
一開始的網站應用，前端的部分主要是透過模板語言設計介面，此時還沒有那麼明確定義區分前端後端，因為業務邏輯主要是在伺服器處理。當我們收到一個請求，程式會在後端當中處理整合好之後，將檔案,數據，整理成最終的樣式，送給去給瀏覽器。以Django當作範例來看，我們見下圖

再來我們看看Template的程式碼，以下範例在中，會把things項目裡面的每一個項目的title , body 呈現在頁面當中，如此可以在伺服器端就生成完最後要呈現的版本，回傳給前端。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title> Something </title>
</head>

<body>
    <div id="content">
        {% for thing in things %}
            <h2>{{ thing.title }}</h2>
            <p>{{ thing.body }}</p>
        {% endfor %}
    </div>

</body>
</html>

在此階段沒有明確的前後端定義，而通常採用這種開發方法的團隊，滿多會以功能來進行一條龍的開發，不一定會有明確的前後端分工。現在仍含有許多服務是用此架構開發完成的。
此種開發的優點：

開發者皆會須熟悉整個網站的建置
若是功能單純的網站服務，又沒太多的開發人員，以此方式開發是適合的情境

但其中問題包括

若系統需要拓展，架構面上較難進行調整
同時有多個工程師開發時，較難有效率地進行分配

前後端分離時代
隨著網頁服務的需求越來越大，以及服務應用不僅止於電腦網頁，有時候有行動裝置，甚至是物聯網裝置，但如果是用過去的架構，三種服務就必須要開發三次。以及當需求越來越多元，以及流量越來越大，前後端分裏的架構可以方便系統更加有彈性。而此階段的前端就被獨立了出來，網頁的邏輯和介面由前端進行製作，而後端則專注於處理資料傳遞資料，在此架構中後端主要提供API供前端程式獲得資訊。