前端、後端、全端工程師必備技能與就業門檻比較 (2023, 6月更新)

內容目錄

許多人想要學程式，希望未來能轉職為軟體工程師，但往往在琳瑯滿目的程式語言和工具中迷航，不知道從何開始。好不容易學會了一個語言，那接下來要學什麼呢？若因為毫無頭緒而消耗了學習熱忱，實在很可惜。

想成為前端、後端與全端工程師，必備的核心技能和就業門檻有何不同呢？你比較適合走哪條路呢？為了給更多有志成為軟體工程師的人們一條清楚的方向，我們請教從 ALPHA Camp 畢業、已成功轉職軟體工程師的學長姐們，以及業界老師和助教，列出在實務上會應用到的核心技能與工具。本文統整出前端、後端與全端工程師技能表，希望能成為學習者在修習技能時的參考。

除了前端、後端與全端工程師，本文也會介紹 DevOps 工程師的技能與工作項目。雖然 DevOps 工程師需要一定的資歷才能勝任，但因為薪資待遇佳、工作挑戰大、也是一個不錯的職涯目標。

程式設計入門，4 週零基礎建立數位職涯基礎能力

前端工程師

職務簡介‍

前端開發者的目標，主要可以分為兩個層面，一是根據網頁設計師的設計圖，建立流暢、友善的使用者介面，讓使用者可以順利地與產品互動，並且有效率地找到介面上的各種功能；二是建立良好的雙向資料溝通，讓服務端的資料庫資料得以順利顯示在使用者眼前；反之，也會讓使用者的互動資訊帶給服務端做近一步的資料的交互、存取運作，所以前端工程師的職務已廣泛來說，可以含蓋到設計層面的實現，與資料層面的邏輯展現。

而現今也因為裝置載具越來越多元，不同的裝置的處理效能也有所限制，網路速度也會因地區性產生差異化，前端工程因而需要在產品效能上做適當的迭代優化，讓服務端可以盡可能地在有限的裝置使用資源下，涵蓋到最多的使用情境。

從各種機台上所操作的程式介面，到一個網站或是 APP的操作介面，只要是面向使用者的功能互動、介面呈現，都可以算是與前端工程師有關的範疇。舉例來說，登入畫面的操作、購物結帳的介面流程、各種功能的開關與操作按鈕、下拉選單、留言功能、圖文與影像呈現、網路廣告嵌入和呈現、私訊功能等，都算是前端工程師所實作出的功能。

另外，前端工程師也會因應公司的產品開發方向，或是使用者的需求，來更新網站介面和功能。這些開發上的需求來源，則是會需要前端工程師在 PM 的專案管理下，與設計師和後端工程師相互溝通協作；如何在產品的需求進程中，適時地在前端開發面向中反應可能遇到的問題或需要協助的地方，進而讓彼此能夠順利進行開發，也是前端工程師在實務上很重要的課題。

以一個網站在視覺外觀的定案來說，通常會先在產品開發團隊的需求確認後，再交由設計師根據需求規劃出網站的設計稿，最後再由前端工程師利用 HTML, CSS, JavaScript 等前端技術，把設計稿上的各種區塊功能，轉化實踐到瀏覽器上的真實操作介面。以上圖 Pinterest 的網站介面為例，不同的區塊都各自切分著不同的介面功能，小則可以是字體大小、主題顏色套用、區塊陰影的定義，大則可以涵蓋區塊在不同裝置上的不同排版呈現、區塊的編排定義、圖片顯示的方式等，都是需要前端工程師來掌握它們的呈現，讓這些介面可以在不同的裝置可視範圍中完美地顯示服務端所要傳達的各種資訊。

而在溝通上，前端工程師也必須和 UI（使用者介面）、UX （使用者體驗）設計師合作，適當地根據前端工程在實作設計稿上可能會遇到的問題進行反應，讓設計與開發之間取得平衡，進而讓介面美感和用戶體驗獲得提升；同時前端工程師也需要適當地根據畫面的資訊呈現，與後端工程師，甚至 PM（專案管理）討論當前開發的可行性，並共同評估工時與排程。

一個好的網站品質，可能意味著網站介面要能在不同的瀏覽器、不同載具上都能有舒適的視覺呈現，使用者體驗上則是要把握功能的完整性。以 Pinterest 為例，前端工程師除了要將後端資料庫的各種圖片資訊完整地呈現於網頁上，也要能將使用者的操作資訊，例如點擊收藏、點擊追蹤、新增圖片等資訊，順利地對接給後端做儲存，如何讓網站體驗在速度品質、功能正確性，以及視覺美感的完整性三向之間取得平衡，考驗著前端工程師的技術實力與經驗內化。

前端工程師該具備的能力

基本的美感與對設計概念的理解力：能從設計師提供的靜態設計領會在動態操作上的呈現。
同理心：能站在 使用者角度去思考、想像產品應該如何提供良好的互動方式與使用者體驗。
重視細節：連一個 pixel 的差異也不能放過，對於不同載具大小的呈現問題要有所意識，並能提出一定的解決方案。

前端工程師該具備的技能樹

精通 HTML：能夠對不同的內容運用適當的 HTML 標籤進行內容定義，並且安排適當的資料層級。
熟悉 CSS：

‍‍各種基本屬性的運用、區塊定義/定位的操作。
熟悉 CSS 框架的運作方式，例如 Bootstrap 的應用。
理解 CSS 的相關規範，例如：偽元素、偽類、CSS Specificity 的應用場景。

精通 JavaScript / jQuery 函式庫：

‍‍能夠在「無框架」的前提下，利用原生 JavaScript 建立一定基礎的程式架構與網頁功能。
在上述基礎下，能夠理解、善用至少一個前端框架（React, Vue, Angular 等)，掌握系統性地建構更複雜的單頁應用（SPA）網站架構可能包含 Route建立、組件拆分、狀態控制、資料流建立等。
理解 JavaScript 中如何導入 Design Pattern，以及理解其使用場景。

響應式網頁設計（Responsive Web Design, RWD）已成為必備基礎，需能做出在跨平台、跨裝置都能完善呈現的網頁。
API 串接：

‍‍能夠理解閱讀後端的 API 文件。
能夠根據後端所開出的 API 規格來串接資料的交互。
能夠根據畫面呈現的資料層級，規劃出適當的資料規格來與後端進行調整討論，提升資料溝通上的正確性。

延伸閱讀：前端工程師要會什麼？工作上會遇到什麼挑戰

前端工程師會使用的工具

熟悉版本控制（Git）操作：能夠利用終端的 Git 命令或是 Git 的 GUI 工具（如: Source Tree, Git Fork）掌握版本之間的切換運作，並且在不影響其他開發者的開發版本前提下，同時與多個開發者進行專案協作。
程式碼編織器的使用 (如：VS code, Sublime Text, Atom)。
能夠掌握各種主流瀏覽器的開發者工具（如：Chrome DevTools）。
瞭解 CSS 預處理器 (pre-processor)，可以在 Sass/SCSS 和 Less 中選一個練習，體會預處理器與傳統 CSS 撰寫上的差異與優劣。

除了以上核心能力，前端工程師有時會因職務需求，而有偏向設計、或是偏向工程之分。如果偏向設計，則要會用 Sketch、Adobe Illustrator 、Figma 等向量繪圖軟體進行畫面的設計規劃，並進一步進行畫面切版規劃；如果偏向工程面，則會進行到後端資料串接、撰寫自動化測試、資訊安全等等的實作。但是不管是偏向哪一邊，兩邊基本上都還是需要有一定的技術基礎，並且持續精進，才能算是稱職的前端工程師。

隨著現今 Google 搜尋技術的持續進步，在前端網站優化的技巧，如：

後端渲染（Server-Side Rendering, SSR）應用時機的取捨、
搜尋引擎優化（Search Engine Optimization, SEO）在頁面的定義、
內容傳遞網路（Content Delivery Network, CDN）情境應用、
加速行動網頁（Accelerated Mobile Pages, AMP）在既有服務頁面下的導入

也都將越來越重要，也將更深入影響著服務端網站在外部搜尋引擎上的評分，進而影響頁面資訊能夠被搜尋到的程度。

成為前端工程師，你要懂的JavaScript前端完整基礎

後端工程師

職務簡介

雖然有前端工程師打造網站的「門面」，但若要將網站上的各種功能付諸實現，例如儲存使用者帳戶資訊、購物紀錄、推薦商品、驗證帳號密碼、計算用戶點讚的內容，則需要後端工程師。

以購物網站為例，當你點選了購物車，想看看自己收藏了哪些商品，此時，你「點選購物車」的指令，將會經由伺服器進行邏輯分析，從資料庫中找出你儲存的商品名單，伺服器再將名單傳到前台，讓你看到商品。

以上述的例子而言，後端工程師的目標，就是處理資料，讓伺服器在茫茫資料海中，最快速地做出適合的運算，提供使用者想要的資料。為了達到這個目標，後端工程師必須要建立並優化伺服器的性能、程式碼邏輯、以及資料庫結構。

除了資料庫、伺服器，演算法也是後端工程師常要負責的項目。演算法與商業邏輯息息相關，例如當臉書決定要減少塗鴉牆上的商業廣告、或是電商希望增加某樣商品出現在推薦系統的頻率，後端工程師就需要調整演算法，讓網站上的應用程式能夠實現業主期望的商業邏輯。

後端工程師該具備的能力

邏輯思考能力強
擁有設計和操作資料庫的能力
了解商業模式和產品特性(才能設計良好的系統架構)

後端工程師該具備的技能樹

瞭解 HTTP、TCP 等網路通訊協定
暸解 security,authentication等議題
至少精通一個後端語言，例如：Ruby、Python、PHP、Java、 JavaScript
至少精通活用一項後端開發框架，例如：Rails、Django、Node.js 等
瞭解前端語言基礎，例如：HTML、CSS、JavaScript
撰寫 Web API
專門來處理資料的 SQL
撰寫測試，並把測試自動化（e.g. RSpec ）

後端工程師會使用的工具

部署網站、資料庫的平台： e.g. Heroku、AWS、Google Cloud Platform
程式碼編織器 (e.g. Sublime Text, Atom)
Continuous Integration (e.g. Travis CI, Circle CI 等)
使用資料庫開發工具，例如 MySQL、Oracle 、PostgreSQL 或 SQL Server
Linux 或 UNIX 的作業系統、命令行介面 (Command Line Interface)
熟悉版本控制 (e.g. Git) 操作，能夠和多人協作專案

若要邁向資深工程師，除了以上核心能力之外，可繼續精進系統設計、資料庫設計、系統效能優化。

同場加映：學習後端開發實務，打通前後端從寫程式進化到做產品！