Yuanlin Lin

Blog

菜雞也看得懂的前後端分離架構基本概念

Yuanlin Lin 林沅霖

2020-09-09

在本文,我們會從零開始解說前後端分離架構的概念。這些概念雖然看似簡單,但在這整個 Web 開發之路上,可謂是最重要的一章。如果本篇的概念沒有瞭解紮實,在未來的開發實作時,很可能會做出冗余的設計、或是缺乏安全性的設計哦!

在開始瞭解什麼是前後端分離架構之前,請讀者從下方選出一個每天都會遇到的日常情境,想想看他的前端和後端:

  1. 你打開 Instagram 滑了滑朋友發的限時動態
  2. 你去 ATM 領了 2000元現金
  3. 你在 Line傳訊息給你朋友

Frontend (前端):產品與使用者的橋樑

在一個前後端分離開發的產品專案中,前端扮演的角色就是使用者直接眼睛看到的部分,以及使用者直接進行操作的部分。從這個想法可以很容易的得知:如果以網路為界把整個服務分成兩邊,「前端」就是運行在使用者這一邊的程式。

因此如果退好幾步來說,前端工程師其實主要的工作就是如何讓一張圖片從左滑動到右邊、如何按下按鈕以後可以彈跳出警告窗口、如何根據設計師的需求把產品的設計稿變成一個真的 App 或是網站 … 等等這類使用者會直接看到以及摸到的部分。

那麼請問讀者你剛剛選擇的這個日常情境,他的「前端」是哪些部分呢?

HTML、CSS、Javascript 是網頁前端工程師的基本功

如果你剛剛選擇的是 1. 你在 Instagram 滑朋友的限時動態,那麼你手機上的 Instagram App 這個程式就是前端,他決定了限時動態的框框應該要是圓形、還沒看過的會有彩色外框 …

如果你剛剛選擇的是 2. 去 ATM 提款,那麼整台 ATM 包含機器和介面都算是前端,他決定了整台機器的外觀、介面的操作流程 …

如果你剛剛選擇的是 3. 從 Line 傳訊息給朋友,那麼手機上的 Line App 這個程式就是前端,他決定了訊息文字的大小、訊息輸入框的圓角有多圓、訊息列表的顯示有多密集 …

Backend (後端):資料的儲存及運算

從上一段我們知道,前端是運行在使用者那一側的東西。這個時候我們思考一個問題,我們可不可以直接把資料存在前端?

如果今天我們開發的是一款通訊軟體,把資料存在前端的話,你的訊息就只有你自己看得到了,因為每個使用者的手機上都安裝了一個這個軟體,相當於是每個使用者都有一個自己的前端,對吧(那還叫通訊軟體嗎?

又或者,今天我們開發一個電商平台,我們如果把顧客的錢包餘額直接保存在前端,那顧客是不是可以直接去修改他錢包內的餘額了,花完了就幫自己再加一點餘額回去(?

從上面的兩個悲劇故事,我們知道了有些資料最好還是不要直接存放在前端的比較好,這個時候我們就需要一個人來幫我們統一集中管理這些資料了對吧,這就是後端的角色!

所以如果是通訊軟體,我發送訊息之後這個訊息應該會被送去後端,然後後端再幫忙把訊息分發給各個前端,這樣所有人都能接受到我的訊息了。如果是電商平台,客人還剩下多少錢應該是後端說了算,前端即使偷偷修改了餘額,也絲毫不影響後端紀錄的餘額,只能算是自欺欺人罷了。

再舉個例子,你現在在看的 Medium 的後端服務實際上就是保存了我們所有人上傳上去的文章、給文章的回覆還有我們給哪些文章按了幾個 Clap 等等 … (說到 Clap,看完文章以後請務必給我一個 Clap 作為鼓勵!)。

每當我想要上傳一篇新的文章,我就會從前端(我電腦上的瀏覽器打開的這個網頁)發送一篇新文章給 Medium 的後端伺服器。後端接收到我的文章以後就會把他儲存起來,這樣當你們(其他的前端)來查看我的新文章的時候,後端就可以把我的文章發給你們啦!

那麼請問讀者,你剛剛選擇的那個日常情境,他的後端儲存了哪些資料呢?他又是怎麼完成某個特定的服務的呢?

如果你剛剛選擇的是 1. 你在 Instagram 滑朋友的限時動態,那麼後端的工作就是接收你朋友上傳的限時動態,並把這篇限時動態發給你。

如果你剛剛選擇的是 2. 去 ATM 提款,那麼後端的工作就是檢查你的帳戶餘額還有多少,然後決定要不要讓你把錢領出來。

如果你剛剛選擇的是 3. 傳訊息給朋友,那麼後端的工作就是接收你傳的訊息,然後再把這個訊息發給你朋友。

Request (請求):前後端交流的方式

現在你已經懂了什麼是前端,什麼是後端。那麼,前端和後端是怎麼交流的呢?舉一個相同的例子,我想要從我瀏覽器打開的這個 Medium 網頁 (前端)發送一個新文章給後端,那麼我應該透過什麼管道呢?

我們可以從前端發送一個 Request 到後端,然後這個 Request 就夾帶了我想要發送的文章。當後端收到了我的 Request 以後,他可以針對我送過去的資料進行一些處理,接下來回傳一個 Response (回應) 回來前端。

你們是怎麼看到這篇文章的

如果你是第一次聽到這個 Request 還有 Response 的概念,我想告訴你,其實這個非常貼近我們的生活。請你打開瀏覽器的開發者工具(Windows 按 F12,Mac 按 Option + Cmd + I),切換到 Network (網路)這個分頁,然後在網址列隨便輸入一個你最熟悉的網址:

看看瀏覽器都發送了哪些 Request

你會發現本來空的 Network 分頁突然多了好多筆資料,這些每一筆資料其實都是一個 Request。所以你在打開一個網頁的同時,其實就相當於向這個網址指向的伺服器後端發送了一個或多個 Request。你從瀏覽器就可以看到關於每一個 Request 的完整訊息了。

這些 Request 經過網站的後端處理以後,發送了 Responese 回來,瀏覽器就會處理一下這些 Response,然後顯示到畫面上,這樣就順利的完成了一次請求。

關於 Request 以及 Response 更詳細的內容會在下一篇文章《菜雞也看得懂的 RESTful API 概念教學》做說明。

選擇用於開發的程式語言和框架

無論是前端還是後端,現在都有很多的語言還有框架可以幫助我們快速進行開發,因此在瞭解了前端和後端是什麼之後,下一步就是要選擇要用什麼程式語言還有什麼框架來開發。

前端

光是在前端方面就有 Vue、React、Angular 三種 Javascript 框架,他們都能幫助我們用有別於傳統 HTML + CSS + Javascri 的開發方式來更快速的搭建一個功能更強大的網頁應用。

這邊要特別提到 React 可以直接把相同的語法直接用於 React Native 進行雙移動平台(iOS + Android)的手機 App 開發,或是用 Electron.js 把 React 專案打包成三個桌面平台(macOS + Windows + Linux)的桌面應用程式,可謂是一招打天下,因此我目前自己主要都是選擇 React 來做前端的開發教學。

許多著名的服務如 Facebook, Instagram, Netflix, Medium … 都用 React 開發前端

當然,使用 Kotlin 或是 Java 來開發原生的 Android App,或是 Objective-C 和 Swift 開發原生的 iOS App,也是仍然目前主流的移動端前端開發技術。

後端

後端就更是五花八門,基本上只要能處理請求的語言都可以用來開發後端服務。現在較主流被使用的比如說:Python 的 Flask 、Python 的 Django、Ruby 的 Ruby on Rails、Javascript 的 Express.js、Javascript 的 Koa.js 、Golang 、PHP 的 Larvel … 。

五花八門的後端框架

哇,居然有這麼多,到底要選擇哪一個呢?每一個語言和每一個框架都有自己的特性以及優勢、劣勢,選擇自己寫的最順手還有最符合專案需求的後端框架才是重點!我自己的話目前習慣使用 Google 開發的程式語言 Go 來作為後端開發的主要程式語言。

結語

在這篇文章中,我們了解了基本的前後端基本架構。現在開始,讀者每次使用到一個覺得很不錯的 App 或是網站、服務等等的時候,不妨想想看他的前端是哪個部分、後端是哪個部分,以及後端具體上是負責做什麼事情的?

在下一篇文章中,我們將更詳細的介紹 Request 以及 Response 的規則,包含 Method 、Header、Body 和 Status 等等的概念。再加上 REST 的概念來說明如何設計一個簡介易用的 API 接口,讓前後端的共同能夠簡單順暢。

由於我也是從網路上反覆翻找大量資料,經過自己的解讀、理解以及實作後才打出這一系列的文章,難免可能會有觀念錯誤的部分,還請各位讀者可以向我指出,讓我有一個成長學習的機會 👍

如果你也是對專案開發有興趣的同學,或是正在跟著我們的系列教學,歡迎你加入我們 Chief Noob 的 Discord 菜雞開發社群,一起討論和互相學習:

Chief Noob 菜雞社群 - Discord

如果你喜歡我的文章,希望你可以給我一個愛心以及留言,這是對我持續創作的一個重要動力!

author-avatar

關於作者

Yuanlin Lin 林沅霖

台灣桃園人,目前就讀浙江大學,主修計算機科學與技術,同時兼職外包全端開發工程師,熱愛產品設計與軟體開發。

閱讀更多

回部落格首頁