五分鐘搞懂網頁前端工程師、後端工程師、全端工程師的差別
在網頁開發中，網頁工程師又分為前端、後端以及全端
這三者之間到底有什麼不同呢？
我們先來了解以下幾點
一、使用者訪問網頁的過程
在了解前後端工程師差別之前
要先了解一下網頁的使用過程
故事場景：男友的生日快到了！阿美在 Love Shop 購物商城中買一件充滿愛意的禮物，以下是阿美的線上購物流程：
- 阿美打開Google瀏覽器
- 輸入 love_shop.com 網址，進入到 Love Shop 網站
- 逛了5頁商品，終於看到一件很適合男友的禮物
- 加入購物車，填寫買家個人資料
- 確認下單 完成刷卡付款交易
- 在歷史訂單中看到此筆訂單
阿美進入到 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跟我分享你轉職的疑難雜症:)