前端(Frontend): 給人看的(介面、使用者體驗),網頁的畫面、按鈕、圖片、排版。
這是使用者直接與之互動的部分,包括網頁的設計、佈局和內容。前端開發使用的技術包括HTML、CSS和JavaScript。
舉例來說:當你打開 104人力銀行,看到的畫面就是前端工程師控制的,包含不同裝置的畫面呈現~從電腦、平板或手機觀看,都是前端工程師需要留意的。
台灣整體而言前端工程師薪水中位數落在66.8萬~81萬間,天花板推估是91.3~101.6萬。
工作年資 | 年薪中位數 | 推估薪水天花板 | 職缺 |
---|---|---|---|
1年以下 | 66.8萬 | 94.1萬 | |
1~3年 | 71萬 | 91.3萬 | |
3~5年 | 78.1萬 | 96.7萬 | |
5~10年 | 81萬 | 101.6萬 |
以下為講座精華節錄
1.技術能力(Technical Skills),能否寫出高品質、可維護、效能優化的前端程式,並快速學習新技術應用在工作上,也能夠帶領內部技術前進(內部 Tech Talk 或自建部落格)
2.產品與專案影響力(Project & Product Impact),能有效率地完成任務,並確保產品的品質,過程中主動優化現有系統,提出新的技術方案,提升開發效率。
3.開發效率(Development Efficiency),高效產出高品質的程式,主動提出更有效率的開發工具或流程,寫出自動化測試(如 Jest、Cypress),減少回歸測試時間。
4.團隊合作與溝通(Collaboration & Communication),與其他工程師、PM、設計師、QA、數據分析師等合作單位順暢合作。指導新人、撰寫開發文件,幫助團隊快速上手。
跨部門溝通 | 與 PM 討論需求,提供技術可行性建議 與設計師合作,確保 UI/UX 最佳化 與後端工程師協作,確保 API 串接順暢 |
Code Review | 幫助同事提升程式碼品質 接受別人的建議,改進自己的程式碼 |
主動性 | 主動提出問題或改善建議 在團隊會議中有效表達技術方案 |
5.創新與影響力(Innovation & Leadership),完成自己的工作外,帶來更大的影響。有能力也主動推動團隊技術決策,如選擇新框架、優化開發流程。
能力 | 方法 |
---|---|
技術能力 | 深入學習前端框架、優化效能、提升可維護性 |
產品影響力 | 確保開發的功能有助於提升使用者體驗 |
開發效率 | 提高 Debug 能力、善用自動化工具 |
團隊合作 | 提高溝通能力、參與 Code Review、幫助同事 |
創新影響力 | 參與技術社群、提出技術改進方案 |
1. 後端工程師(Backend Developer)
👉 負責提供 API,讓前端能夠拿資料,確保功能運作
合作範例:你要做一個「應徵按鈕」,但這個按鈕要能讓使用者點了後,系統能自動送出履歷,這時候前端需要跟後端拿 API。
討論 API 的格式:
你問:「我這邊需要傳哪些資料才能應徵?」
後端說:「你傳 user_id、job_id 給我,我幫你送出履歷」
你:「那回應結果是什麼?我要顯示成功或失敗」
後端:「如果成功,我回 status: success,失敗的話會給錯誤碼」
💡 前端 + 後端 = 讓網站不只是畫面,而是能「動」起來!
👉 負責規劃產品功能,確保開發方向符合商業目標
合作範例:
💡 前端 + PM = 確保開發出來的功能,真的是「使用者需要的」!
👉 負責測試系統,確保功能正常、不出 Bug
合作範例:
💡 前端 + QA = 確保使用者「真的能順利使用」功能!
👉 負責分析使用者行為,讓前端能做出更好的優化
合作範例:
💡 前端 + 數據分析師 = 讓 UI/UX 變得更直覺、更有效!
👉 負責網站伺服器的運行與最佳化
合作範例:
💡 前端 + DevOps = 確保你的程式能「穩定、安全」地運行!
夥伴 | 主要合作內容 | 影響前端的地方 |
---|---|---|
後端工程師 | 提供 API,讓前端可以拿到資料 | 決定資料怎麼傳遞 |
UI/UX 設計師 | 設計畫面,確保用戶體驗 | 影響網頁排版、按鈕設計 |
產品經理(PM) | 決定功能需求與優先順序 | 決定要做什麼、怎麼做 |
測試工程師(QA) | 測試功能,找出 Bug | 確保程式正常運行 |
數據分析師 | 提供使用者數據,幫助優化 UI | 影響 UI 設計與功能調整 |
運維/系統工程師(DevOps) | 負責部署、效能優化 | 確保網站運行順暢 |