前端 vs 後端｜網頁設計基本概念

大家經常在 1111、104 等各大找工作平台看到很多公司正在應徵前端工程師、後端工程師或是全端工程師，經常看到這三種工程師的我們，卻不了解三者之中到底誰誰誰是在幹什麼的？

同樣都是工程師，前端、後端和全端所做的內容都各不相同，在網頁開發都扮演重要的角色，今天就讓我們來分別了解這三者的差別吧！

內容目錄

1. 前端 (frontend)

前端的工作就是製作我們一般在瀏覽網站時所看到的畫面，包括瀏覽網站時看到的背景、顏色、字形、圖片等等，任何你在瀏覽網站所看到的視覺內容，都是前端工程師做出來的。

打個比方：

你去餐廳吃飯，服務生所端出來的食物都是經過烹調及擺盤後的，顧客吃到的菜色也就是一盤食物的“成果”，這就是前端工程師的工作之一。

上述的工作內容屬於前端工作的內容展示，前端工程師的另一個工作是與使用者交流。使用者交流包括使用者在頁面上點擊按鈕、輸入文字等等動作，對網站提供數據輸入，接著前端會對使用者進行回應，例如更新網頁內容。

舉個實際例子：

當你在看 IG 帖文時對內容按下愛心，IG 就會對你按下愛心的動作做出回應，即在後台數據庫把 IG 的愛心數量 +1，然後在頁面上顯示 +1 後的愛心數量。簡單來說，提高使用者體驗是前端工程師的任務。

那前端會需要用到什麼技術呢？

前端會用到的技術主要有 3 個，分別是 HTML、CSS 和 JavaScript。這三樣工具是前端的三大柱。

這三者的工作分別是：

a. HTML：控制網頁內容。

b. CSS：控製視覺內容。

c. JavaScript：主導使用者交流。

A. HTML

你在瀏覽網頁時右鍵點下“查看網頁源代碼”或是按下快捷鍵 CTRL+U，會跳出這頁網頁的 HTML 內容，你會發現 HTML 是由一堆各種類型的尖括號標籤組合而成的。

像是：

<html></html> 對應文件格式；

<title></title>是網頁主題；

<head></head>是標題開頭；

<body></body>是內容區段。

HTML 就是網頁內容的主導語言。

B. CSS

CSS代碼是用來指定每個 HTML 標籤要以什麼樣的風格和外觀來呈現。

例如長寬、顏色、居左/中/右、字體、顯示屬性等等。

CSS 代碼會被瀏覽器讀入呈現出你在肉眼上看到的視覺效果。

C. JavaScript

前端工程的開發編程就是 JavaScript，網站該如何與使用者交流、該如何與後端溝通，都是 JavaScript 的工作。通過以上介紹前端的內容不難發現，前端的工作不僅需要學會一些編程語言，還需要一點設計能力，但學會程式語言的門檻相對後端來說不高，甚至可以說 HTML/CSS 是程式語言的基本款。

2. 後端 (backend)

剛聊完前端，大家會問是什麼東西支撐著前端？前端的數據又會被存到哪裡？這就是後端的工作了。如果說前端是一道食物擺在顧客眼前的完成品，那後端就是廚師在廚房裡面的工作了。

廚師的手工、食材、鍋具都是在顧客看不到的廚房裡完成的，後端工程師就跟廚師一樣，會在後台進行工作。後端開發工作就是開發數據訪問服務，使前端可以針對後端服務對數據進行增（create）、刪（delete）、查（read）、改（update），讓前端可以針對使用者做請求回應。

舉個例子：

你在一個網站註冊的時候，該前端就會調用後端，把註冊信息寫進數據庫。爾後前端的使用者如果要調用個人資料，就會通過後端來查詢數據庫的數據，並把數據調來前端。

後端服務不僅可以被前端調用，它還可以被其他手機 APP 或其他後端服務調用，簡單來說，後端需要通過查詢數據庫，來完成前端的回應。除了後端開發工作，後端工程師還會花大量時間在數據庫上，無論是創建數據庫、優化數據庫還是分析數據庫。

數據庫往往是後端工作裡最慢的一項工程，也因此後端工程師在進行系統設計時也會運用很多種方法以提高數據庫的能力，避免被數據庫拖到後腿。

後端語言要學起來不比前端簡單，而且多樣化，不止有JavaScript、還有PHP、Java、Python 等等，每種程式語言都有各自的使用者，你問說是不是要全都學會才可以當上後端工程師？其實不用，只要你有辦法從數據庫把資料調出來給前端，學會任何其中一兩個語言就可以了，更多內容可以參考程式語言百百種｜剛入門該如何選擇。