五分鐘搞懂網頁前端工程師、後端工程師、全端工程師的差別

在網頁開發中,網頁工程師又分為前端、後端以及全端

這三者之間到底有什麼不同呢?

我們先來了解以下幾點

一、使用者訪問網頁的過程

在了解前後端工程師差別之前

要先了解一下網頁的使用過程

故事場景:男友的生日快到了!阿美在 Love Shop 購物商城中買一件充滿愛意的禮物,以下是阿美的線上購物流程:

  1. 阿美打開Google瀏覽器
  2. 輸入 love_shop.com 網址,進入到 Love Shop 網站
  3. 逛了5頁商品,終於看到一件很適合男友的禮物
  4. 加入購物車,填寫買家個人資料
  5. 確認下單 完成刷卡付款交易
  6. 在歷史訂單中看到此筆訂單

阿美進入到 Love Shop 網站,看到網頁上的畫面

看到的這些畫面就是前端工程師的工作範疇

而看不到的那些資料處理,基本上就是後端工程師負責的範疇

什麼是看不到?

像是資料的傳輸,阿美在網站中填寫買家資料後

這些資料會被送到後端,後端會將這些資料儲存起來

在下次阿美重新進入到Love shop網站時,前端就會跟後端說:上次那個阿美又來了!請你給我她上次填寫的姓名、住址、聯絡電話、收貨地址

後端接收到前端的請求後,會從資料庫中撈取阿美的資料送給前端

前端就知道該呈現哪些個人資料

目前為止可以了解到:前端會跟後端拿資料,把這些資料呈現在畫面上

接著繼續探討最後阿美進行刷卡付款的過程

阿美輸入付款資料,前端帶著阿美的付款資料給後端:請你處理一下付款

後端會與金流商進行數據溝通,完成安全的線上交易付款後,回應結果給前端:付款成功

前端收到後端的付款成功結果後,呈現訂單已成立的畫面給阿美看

想像一下,平常在線上付款的時候,後端就是做了這些看不到的事情,看得到的只有:有沒有付款成功的畫面

再來探討阿美的訂單流程,前後端會做什麼事?

前端會將訂單資料送給後端,後端會將接收到的資料儲存到資料庫,並且做一系列關於訂單邏輯的處理,比如減少該商品庫存

之後阿美就可以在歷史訂單頁面中找到有哪些訂單

為什麼阿美看得到歷史訂單?因為是前端呈現資料

為什麼前端有這些資料?因為前端有跟後端拿資料

以上可以了解到

後端主要是在負責收送資料給前端、資料運算處理、資料溝通等等

而前端則是與後端溝通,把這些資料很有美感的放到畫面上提供使用者查看

畢竟使用者也不會接受網頁呈現像excel表中的一行行數據資料

這時候就需要前端變出美美的畫面增加使用者體驗!

想更了解前後端的詳細說明可以觀看此影片:

前端 與 後端 工程師

接下來就再更清楚說明一下前端與後端的主要工作職責為何?

二、前端工程師的工作範疇?

前端工程師(Front End Developer)的主要職責目標,就是 建立流暢的使用者介面

這些介面可能會由UI/UX(使用者介面、使用者體驗)設計師提供設計圖

前端再依照設計圖,將網頁畫面刻畫出來

包含一些互動或特效,比如:網頁頁面中的下拉選單、橢圓形的按鈕、去邊框的表格、彈跳視窗

我們看到的那些美麗的畫面、具有良好互動的體驗

都是前端工程師使用HTML、CSS、JavaScript 將設計圖轉成網頁

前端也需要考量在不同載具、不同瀏覽器下,網頁都能夠有一致的良好呈現

前端語言包含:HTML、CSS、JavaScript

學習順序:HTML → CSS → JavaScript

三、後端工程師的工作範疇?

後端工程師(Back End Developer) 主要的職責就是資料處理、提高數據處理的效能

依照不同專案的商業邏輯,與資料庫進行互動

當前端跟後端請求資料時,能把資料正確的傳輸給前端

相對前端需要有更通透的數據處理邏輯

所觸及的範圍可能也包含資料庫、伺服器等等

後端語言有很多:PHP、Java、Python、Golang

學習順序:HTML → 後端語言 & 資料庫

(網頁後端還是懂一點HTML好)

四、什麼是全端工程師?

全端工程師(Full Stack Developer)

顧名思義就是前端 + 後端,一打二的概念

在早期網頁工程師並沒有區分前後端

而隨著科技越來越進步,使用者對於畫面的質感要求越來越高

因此才漸漸衍伸出前端與後端分離

前端專注於使用者畫面

後端專注於數據資料處理

專業分工也能讓專案項目更加完善

五、前端、後端哪個比較好?

前端與後端沒有誰比較好的問題,主要依照自己喜好

對於畫面排版、動畫製作比較有興趣就可以選擇前端

對於數據處理、邏輯思考比較感興趣就可以選擇後端

而我本身屬於後者,邏輯與數據讓我覺得很有挑戰性

每次解決一個問題、完成一種功能,就會有像是遊戲打怪破關之後的喜悅及成就感

而前端也有把設計稿完美呈現、網頁動畫製作的挑戰性

也不是說前端不用邏輯!寫程式都要有邏輯^^

無法說誰較輕鬆、比較好,都有各自需要鑽研的技術!端看自己的喜好

如果喜歡我的分享歡迎下方留言板按讚~ 或是追蹤我的IG跟我分享你轉職的疑難雜症:)