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

您現在正在閱讀 , 的文章

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

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

 

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

1. 前端  (frontend)

在計算機上編碼的女人

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

 

打個比方:

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

 

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

 

舉個實際例子:

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

 

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

前端會用到的技術主要有 3 個,分別是 HTMLCSS JavaScript。這三樣工具是前端的三大柱。

這三者的工作分別是:

a. HTML:控制網頁內容。

b. CSS:控製視覺內容。

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

 

筆記] 透過javascript擷取HTML元素(讀取radio, select, id 的值) ~ PJCHENder<br>那些沒告訴你的小細節

 

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、還有PHPJavaPython 等等,每種程式語言都有各自的使用者,你問說是不是要全都學會才可以當上後端工程師?其實不用,只要你有辦法從數據庫把資料調出來給前端,學會任何其中一兩個語言就可以了,更多內容可以參考程式語言百百種|剛入門該如何選擇。

 

3. 全端(Full stack

全端的定義很簡單,就是前端 + 後端,能夠自己獨立建構一個完整的網頁或 APP,能夠自己獨立編寫前端語言和後端語言的人都有資格當全端工程師。

 

但不一定全端工程師就會比單獨選邊站的前端工程師和後端工程師還要好,選邊站的工程師往往會比較專精在自己擅長的那一項,往往單邊能力也就超越全端工程師了。

 

對於不知道要如何選邊站的朋友們,這裡有 3 個建議:

a. 如果喜歡看得見東西並且可以獲得及時回饋的人,可以選擇前端工程師。

b. 如果喜歡數據分析或是討厭設計的人,可以選擇後端工程師。

c. 如果還不確定自己喜歡哪一項,那就不要學小孩子做選擇,像大人一樣全部都要,去當全端工程師吧,搞不好做久了你就發現自己真正的喜好了。

 

以上就是前端、後端和全端的介紹,希望有讓各位夥伴們知道他們三種之間的區別,大家上網滑滑找工作時看到這三種工程師時就知道他們是在幹嘛的嘍。

 

推薦書單:

前端開發實戰必修教典:JavaScript標準化規範超絕基礎入門

頂級網站技術長高度:前端工程進階大師指南

最輕巧前端框架首選:Vue.js完整專案開發實作

設計師一定要學的 Bootstrap 5 RWD 響應式網頁設計–行動優先的前端技術

 

推薦課程:

從入門到業界實戰 – UI / UX 前端網頁設計

專為前端工程師準備的Node.js後端實戰課程

最新文章: