許多人想要學程式,希望未來能轉職為軟體工程師,但往往在琳瑯滿目的程式語言和工具中迷航,不知道從何開始。好不容易學會了一個語言,那接下來要學什麼呢?若因為毫無頭緒而消耗了學習熱忱,實在很可惜。
想成為前端、後端與全端工程師,必備的核心技能和就業門檻有何不同呢?你比較適合走哪條路呢?為了給更多有志成為軟體工程師的人們一條清楚的方向,我們請教從 ALPHA Camp 畢業、已成功轉職軟體工程師的學長姐們,以及業界老師和助教,列出在實務上會應用到的核心技能與工具。本文統整出前端、後端與全端工程師技能表,希望能成為學習者在修習技能時的參考。
除了前端、後端與全端工程師,本文也會介紹 DevOps 工程師的技能與工作項目。雖然 DevOps 工程師需要一定的資歷才能勝任,但因為薪資待遇佳、工作挑戰大、也是一個不錯的職涯目標。
前端工程師
職務簡介
前端開發者的目標,主要可以分為兩個層面,一是根據網頁設計師的設計圖,建立流暢、友善的使用者介面,讓使用者可以順利地與產品互動,並且有效率地找到介面上的各種功能;二是建立良好的雙向資料溝通,讓服務端的資料庫資料得以順利顯示在使用者眼前;反之,也會讓使用者的互動資訊帶給服務端做近一步的資料的交互、存取運作,所以前端工程師的職務已廣泛來說,可以含蓋到設計層面的實現,與資料層面的邏輯展現。
而現今也因為裝置載具越來越多元,不同的裝置的處理效能也有所限制,網路速度也會因地區性產生差異化,前端工程因而需要在產品效能上做適當的迭代優化,讓服務端可以盡可能地在有限的裝置使用資源下,涵蓋到最多的使用情境。
從各種機台上所操作的程式介面,到一個網站或是 APP的操作介面,只要是面向使用者的功能互動、介面呈現,都可以算是與前端工程師有關的範疇。舉例來說,登入畫面的操作、購物結帳的介面流程、各種功能的開關與操作按鈕、下拉選單、留言功能、圖文與影像呈現、網路廣告嵌入和呈現、私訊功能等,都算是前端工程師所實作出的功能。
另外,前端工程師也會因應公司的產品開發方向,或是使用者的需求,來更新網站介面和功能。這些開發上的需求來源,則是會需要前端工程師在 PM 的專案管理下,與設計師和後端工程師相互溝通協作;如何在產品的需求進程中,適時地在前端開發面向中反應可能遇到的問題或需要協助的地方,進而讓彼此能夠順利進行開發,也是前端工程師在實務上很重要的課題。
以一個網站在視覺外觀的定案來說,通常會先在產品開發團隊的需求確認後,再交由設計師根據需求規劃出網站的設計稿,最後再由前端工程師利用 HTML, CSS, JavaScript 等前端技術,把設計稿上的各種區塊功能,轉化實踐到瀏覽器上的真實操作介面。以上圖 Pinterest 的網站介面為例,不同的區塊都各自切分著不同的介面功能,小則可以是字體大小、主題顏色套用、區塊陰影的定義,大則可以涵蓋區塊在不同裝置上的不同排版呈現、區塊的編排定義、圖片顯示的方式等,都是需要前端工程師來掌握它們的呈現,讓這些介面可以在不同的裝置可視範圍中完美地顯示服務端所要傳達的各種資訊。
而在溝通上,前端工程師也必須和 UI(使用者介面)、UX (使用者體驗)設計師合作,適當地根據前端工程在實作設計稿上可能會遇到的問題進行反應,讓設計與開發之間取得平衡,進而讓介面美感和用戶體驗獲得提升;同時前端工程師也需要適當地根據畫面的資訊呈現,與後端工程師,甚至 PM(專案管理)討論當前開發的可行性,並共同評估工時與排程。
一個好的網站品質,可能意味著網站介面要能在不同的瀏覽器、不同載具上都能有舒適的視覺呈現,使用者體驗上則是要把握功能的完整性。以 Pinterest 為例,前端工程師除了要將後端資料庫的各種圖片資訊完整地呈現於網頁上,也要能將使用者的操作資訊,例如點擊收藏、點擊追蹤、新增圖片等資訊,順利地對接給後端做儲存,如何讓網站體驗在速度品質、功能正確性,以及視覺美感的完整性三向之間取得平衡,考驗著前端工程師的技術實力與經驗內化。
前端工程師該具備的能力
- 基本的美感與對設計概念的理解力:能從設計師提供的靜態設計領會在動態操作上的呈現。
- 同理心:能站在 使用者角度去思考、想像產品應該如何提供良好的互動方式與使用者體驗。
- 重視細節:連一個 pixel 的差異也不能放過,對於不同載具大小的呈現問題要有所意識,並能提出一定的解決方案。
前端工程師該具備的技能樹
- 各種基本屬性的運用、區塊定義/定位的操作。
- 熟悉 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)在既有服務頁面下的導入
也都將越來越重要,也將更深入影響著服務端網站在外部搜尋引擎上的評分,進而影響頁面資訊能夠被搜尋到的程度。
後端工程師
職務簡介
雖然有前端工程師打造網站的「門面」,但若要將網站上的各種功能付諸實現,例如儲存使用者帳戶資訊、購物紀錄、推薦商品、驗證帳號密碼、計算用戶點讚的內容,則需要後端工程師。
以購物網站為例,當你點選了購物車,想看看自己收藏了哪些商品,此時,你「點選購物車」的指令,將會經由伺服器進行邏輯分析,從資料庫中找出你儲存的商品名單,伺服器再將名單傳到前台,讓你看到商品。
以上述的例子而言,後端工程師的目標,就是處理資料,讓伺服器在茫茫資料海中,最快速地做出適合的運算,提供使用者想要的資料。為了達到這個目標,後端工程師必須要建立並優化伺服器的性能、程式碼邏輯、以及資料庫結構。
除了資料庫、伺服器,演算法也是後端工程師常要負責的項目。演算法與商業邏輯息息相關,例如當臉書決定要減少塗鴉牆上的商業廣告、或是電商希望增加某樣商品出現在推薦系統的頻率,後端工程師就需要調整演算法,讓網站上的應用程式能夠實現業主期望的商業邏輯。
後端工程師該具備的能力
- 邏輯思考能力強
- 擁有設計和操作資料庫的能力
- 了解商業模式和產品特性(才能設計良好的系統架構)
後端工程師該具備的技能樹
- 瞭解 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) 操作,能夠和多人協作專案
若要邁向資深工程師,除了以上核心能力之外,可繼續精進系統設計、資料庫設計、系統效能優化。
同場加映:學習後端開發實務,打通前後端從寫程式進化到做產品!
全端工程師
職務簡介
在實務上,前端與後端並不能算是兩個完全獨立的領域,即使是前端工程師多少也需要瞭解後端的專業知識,反之亦然。
兼有前端和後端技能的開發者,可以更快速地做出產品 prototype、也能夠機動性地支援和協調各開發部門,在變化快速的新創圈中更是一大賣點。而自從臉書與 Google 的工程師透露他們偏好雇用「全端工程師」後,全端工程師已經變得越來越搶手。
一個全端工程師需要瞭解一個網站的全貌,包含伺服器、主機環境、資料庫、網站維護、前端架構、使用者體驗、自動化測試、資訊安全等。因為近乎「通才」,當接受到新問題和需求,全端工程師更能夠知道可以從哪些方面去解決。
雖然需要懂的知識很多,但全端開發者並不需要每樣都精通,也不一定每個領域都要能夠獨立開發。通常他們會特別專精其中幾項技術,並且和網站設計師、前端、後端以及 DevOps 工程師分工合作。
在團隊中,全端工程師除了會依任務需求投入前端或後端的開發,也有機會從事網站功能與架構設計、協調開發流程、協助排除問題等。對全端開發者而言,除了持續累積技能,能夠善用跨領域的能力,讓網站滿足商業邏輯和使用者需求,才是真正發揮價值所在。
而如果想自己獨立接案,瞭解基本的 RESTful API、知道如何提升網路安全性、運用 CDN 優化網路性能、監測流量並及時排除狀況,也是全端工程師需要累積的實戰經驗。
全端工程師該具備的技能樹
- 前端開發技術:
- HTML/CSS:能夠理解並實踐響應式網頁設計
- JavaScript:熟練使用包括ES6+在內的JS語法
- 前端框架:如React.js、Vue.js或Angular
- 能夠進行簡單的UI設計和UX考量
- 後端開發技術:
- 服務器端程式語言:如Node.js (JavaScript), Python, Java, Ruby, PHP等
- 資料庫技術:如MySQL, PostgreSQL, MongoDB等
- 伺服器技術:如Apache, Nginx等
- RESTful API設計和開發
- 資料庫技術:
- SQL語法以及資料庫管理與操作
- 了解NoSQL(如MongoDB)以及能夠選擇適當的資料庫技術來解決問題
- 版本控制與協作工具:
- 如Git和GitHub或其他版本控制系統
- 測試與調試:
- 單元測試、集成測試
- 使用瀏覽器開發者工具進行測試和調試
- 基礎架構與雲端技術:
- 對於如AWS, Google Cloud Platform, Azure等雲服務平台的基礎知識
- 容器技術,如Docker和Kubernetes
- 網路與安全知識:
- HTTP/HTTPS
- 理解常見的安全漏洞如跨站腳本(XSS)和SQL注入等,以及如何避免它們
DevOps 工程師
職務簡介
軟體開發的步驟可簡化為:開發(Development)、測試、營運維護(Operation),在較大的組織中通常會由不同團隊負責,而為了改善開發端與營運維護端的鴻溝和缺乏效率,DevOps 工程師這個職務便應運而生。
簡單來說,DevOps 工程師就是一位具有程式開發能力的系統營運工程師,主要工作目標是確保網站營運的可靠性和安全性,並同時兼顧軟體開發交付的效率。為了達成這個目標,DevOps 工程師的必須負責:建立自動化伺服器管理流程(包含自動化部署伺服器、自動化監控系統、自動化測試等等)來因應頻繁交付的需求,以提升開發與營運團隊的溝通效率。
舉例來說,開發者提交的軟體規格不符合部署環境,營運維護端就必須找出問題、並把軟體退回給開發者,如此將拖累產品交付速度。隨著軟體服務越來越龐大複雜,若能有效導入 DevOps 開發方法,將能夠減少退回率、人為錯誤,並加快上市時間。
許多軟體公司能夠快速推出服務改版的原因, DevOps 開發方法功不可沒。例如 Flickr 能夠在一天之內,因應功能需求推出十次小改版。因此,DevOps 雖然是相當新興的職涯領域,已經受到越來越多科技公司重視,除了 Google、Facebook、Amazon、LinkedIn 等互聯網公司,甚至連 Sony、星巴克也開始招募 DevOps 工程師。
DevOps 工程師核心能力與技能樹
- 程式設計和軟體開發知識:
- 精通至少一種程式語言(例如Python, Ruby, Java等)
- 瞭解軟體開發生命週期和敏捷開發方法
- 操作系統和網路基礎:
- 瞭解Linux系統管理,包括Shell scripting
- 對於網路協議如HTTP, DNS, TCP/IP等有基礎認識
- 持續整合與持續部署(CI/CD):
- 瞭解使用CI/CD工具(例如Jenkins, Travis CI等)自動化測試和部署的流程
- 版本控制系統,尤其是Git
- 基礎架構自動化和配置管理:
- 使用工具如Ansible, Chef, Puppet等進行基礎架構配置和管理
- 以程式碼形式定義和管理基礎架構的能力,也就是Infrastructure as Code (IaC)
- 容器和微服務:
- 瞭解Docker並有實際操作經驗,包括建立和管理Docker images和containers
- 使用Kubernetes或其他類似工具進行容器編排
- 對於微服務架構的認識
- 雲端技術:
- 瞭解至少一種雲服務平台如AWS, GCP, Azure等
- 瞭解雲服務中相關的服務和工具,例如AWS EC2, S3, RDS, Lambda等
- 監控和日誌管理:
- 使用工具如Prometheus, Grafana, ELK stack(Elasticsearch, Logstash, Kibana)等進行系統監控和日誌管理
- 安全性:
- 瞭解基礎的資訊安全概念,例如防火牆、網路安全、密碼管理等
- DevSecOps:將安全性考量整合進DevOps流程中
- 軟性技能:
- 項目管理和溝通能力
- 解決問題和疑難排解能力
- 快速學習新技術的能力
對於轉職者而言,不一定要每項技能都精通才能找工作,因為不同公司,對工程師的技能要求會有所不同。建議剛進入職場的工程師可以先在工作中邊做邊學,並自行補齊其他技能,未來有機會拿到好的 offer。
瞭解前端、後端、全端以及 DevOps 工程師所需的技能後,可參考這篇:前端、後端與全端工程師,哪種軟體工程師薪水更容易有百萬年薪
想要了解軟體工程師在台灣的薪資水平,可以看這篇:軟體工程師薪水多高?台灣網路IT業薪資行情
JavaScript 全端開發課程,16 週進度班帶你半年轉職工程師