前端軟體工程師職責是包含什麼？如何找到高薪前端職位？

網際網路於80年代出現，在40幾年的時間內，上網這件事早已成為了多數人生活中的一部分，許多人甚至在一天內會花數個小時的時間上網。在這個時代，人們越來越依賴這種網路以及軟體的生活模式。

國際電訊聯盟和聯合國教科文組織成立的可持續發展寬頻委員會（Broadband Commission for Sustainable Development）發表了一份報告，發現網路在全球人口的普及率為51%。2021年初，世界人口為78.3億，有超過52.2億人使用手機，相當於66.6％的總人口。

更好的證明就是全球市值前十大的公司，如Apple, Microsoft, Google, Amazon, Facebook等公司，核心的業務都是環繞著網路與軟體。而因為前端軟體工程師的技術也與之離不開關係，因此成為了不可或缺的角色。

Glints在這篇文章要介紹的前端工程師，包括他們的工作內容、需要的知識、未來會遇到的挑戰以及如何找到一份高薪的工作！

前端工程師工作內容

給大家一個 “經驗法則” ，只要是在網頁上發生的，就與前端有關係。

前端工程師 (Front-end developer ) 的工作內容通常負責網頁與使用者互動，設計使用者介面、以及編排網頁功能的流程、資訊的呈現提高使用者體驗。

無論是什麼樣的產業，只要需要利用網站建立或維持品牌以及產品的形象、就需要前端工程師。電子業、半導體產業這些偏實務導向的產業，也會需要前端工程師。只不過對前端工程師的要求就會不一樣，強調於商業邏輯以及網站功能的流暢；相對的，軟體產業或是產品導向的公司則是會希望前端工程師在美觀、風格方面有經驗。

但是大致上來說，前端軟體工程師的工作內容主要分為以下四大種類：

4 main responsibilities for front end engineers

1. 轉化設計為網頁

從設計師端得到設計草稿，前端工程師會利用寫程式的技術，把設計轉換為真實且有互動性的網頁。主要包含以下幾樣：頁面排版、不同的互動式元件 (下拉式選單、對話框) 、外觀或動畫等。在這過程中，設計好的使用者行為很難百分之百與實作行為相符，亦或是有時會出現資源不足無法實現的情況，屆時，要不斷的測試與優化並同時與設計組討論解決方案。

2. 伺服器資料連結

大部分的網頁都需要從網路上的伺服器取資料，作為瀏覽器上的呈現。而資料的讀取、儲存與傳遞也會依據使用者的操作而有所不同，包含對自家伺服器、第三方服務（最大可能就是Google, Facebook等) 進行請求與回應的處理。資料的連接與呈現是前端工程師的一大任務。

在各種需要處理的資料中，比較次要的業務大多會直接採用串接的服務，Google Analytics便是非常好的例子，其需要與各自服務的伺服器傳遞溝通各種不同類型的資料，這也會包含在前端工程師的工作內容中。

3. 裝置瀏覽器運行

在市場中有幾個最多人是用的瀏覽器：Chrome、Safari、Edge、Firefox、Opera、Brave等等，這些瀏覽器支援的標準都非常的成熟，但其功能與行為每一個瀏覽器都有所不同。相同的網頁在不同瀏覽器呈現必須一要好好的處理，若是沒有設計好，網頁外觀不好看算是小事，有可能讓人無法使用整個網頁。在這方面，前端工程師需要相當大的心力，讓網頁的運行及設計能夠在各瀏覽器保持順暢。

除此之外，不同的輸入與輸出裝置也非常之重要，RWD (Responsive Web Design) 大部分的人都聽過，主要是讓網頁能在各種螢幕，小至手機大到電視、投影都可以使用順暢，也包含輸入的滑鼠、觸控、鍵盤等。雖然介面的設計是事由設計師接手，但前端工程師會需要協助把這些設計現實化，比如尺寸、滑鼠與觸控的操作差異等必須解決的問題。

4. 優化體驗及效能

最後是前端的介面，網頁不只需要有光鮮亮麗的外表，完整的功能與即時的反饋在前端的工作內容也無比的重要，必須要做到貼合使用者操作流程的需求，增加使用者的體驗。因此前端工程師的工作內容除了設計細節實作，也需要持續調整網頁效能，並在出現問題時即時做出優化的動作。

前端工程師需要什麼？

what you would need as a front end engineer

前端工程師到底需要什麼技能？前端工程師不僅需要高超的程式編程能力，同時也需要具備設計學、色彩學的知識。

大多數的時間，前端工程師會以切版作為入門，也就是HTML與CSS，這兩項能力是作為前端工程師來說最基礎的技能。可以把HTML比喻成一匹布料，CSS就是裁剪與上色的工具，兩者在一起才有可能做出一件漂亮的衣服。

現在技術多的元化，許多各產業的公司開始要求前端工程師以Sass (Syntactically Awesome Style Sheets) 代替CSS，Sass比起CSS更加有彈性，也可以說是技術價值的比較高的CSS。對Sass有興趣的人可以點擊連結，閱讀細節的討論。

語言及框架

以下為大家提供並簡單介紹，前端軟體工程師最常使用到的6種語言，以及其有用的框架。

JavaScript

JavaScript是本身一種網路腳本語言，被廣泛用於Web應用開發。以一個態程式語言來說，它的主要功用是增添網站的交互性。而以一個解釋型程式語言來說，它著重於實現跨平台、跨瀏覽器驅動網頁以及與用戶交互。

以下是JavaScript常用的框架，更多細節在這裡：

AngularJS
React
Backbone
Ember
JQuery
Underscore
Babylon.js

PHP語言

PHP語言對大的優勢，是他能夠快速的執行動態網頁，並且支持幾乎所有資料庫以及作業系統。不只如此，它還能用C、C++進行程序的擴展。PHP在幫助開發人員更快地構建應用程式，非常的有效率，有可擴展性和可靠性。最簡單的學習曲線、廉價的託管環境、豐富的學習資源和相對容易的開發環境能夠利用PHP快速完成，對初學者來說亦是一個不錯的選擇。

以下是PHP常用的框架，更多細節在這裡：

ThinkPHP
Yii
Laravel
CodeIgniter
Zend Framework
CakePHP
Symfony

HTML5

HTML (Hypertext Markup Language) ，中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言。網頁內容的組成包含段落、清單、圖片或表格等。HTML主要是為網頁創建和其他可在網頁瀏覽器中看到的信息而設計的語言。HTML5則是由全球資訊網發布的新的語言規範，是開放的Web網絡平台的奠基石。

以下是HTML5常用的框架，更多細節在這裡：

Foundation
Bootstrap – 可以參考Glints文章：【Bootstrap 教學】網頁設計小白也能輕鬆駕馭
AUI
Amaze UI
Pure

Ruby

Ruby是面向對象程式語言，其特性與Python相似。使用Ruby的語法，能夠充分的學習到如何了解面向對象的編程，其次Ruby的開發效率也非常的高。Ruby是個相當靈活的語言，可以讓使用者自由的去改變語言的各個部分。本質上這個語言也能夠隨意地移除或重新定義，以存在的部份也可以再次添加內容，是一個試圖不去限制程式設計人員的語言。

Ruby語言的框架基本上就是Ruby on Rails。

Java

Java也是面向對象的程式語言，在電子商務領域以及網站開發領域占有一席之地。Java對開發人員來說非常的實用，可以運用在很多不同的框架，以此創建並維護網頁。在政府的網站項目中也經常可以看到Java的影子。比如說用在醫療救護、保險、教育、國防以及其他的不同部門網站。

以下是Java常用的框架，更多細節在這裡：

Spring
Hibernate
Struts
Play
Google Web Toolkit
Grails

Python

眾所皆知，Python屬於通用型程式語言，作為一種直譯語言，它的實用性極高，當然也非常適合用來做Web開發。Python的設計哲學強調代碼的可讀性和簡潔的語法，優勢顯而易見，不僅開發效率高、擁有上百種Web開發框架、還有很多成熟的模板技術。使用Python開發Web應用，不但開發效率高，而且運行速度也非常的快。

以下是Java常用的框架，更多細節在這裡：

Django
Diesel
Flask
Cubes
Kartograph.py

前端工程師會遇到什麼挑戰？

以實務上來說，前端工程師通常會處理到客戶端的產品介面，所以需要對產品以及品牌的理念、氛圍都要有一定的認知，工程師需要嘗試讓網頁內容傳達上述的訊息。在這些情況下，前端軟體工程師最常遇到以幾個挑戰：

要將設計師的設計稿以Pix e l Perfect為目標呈現在瀏覽器的畫面中，需要大量的使用CSS 的語言，經驗沒有很多的前端工程師，會需要花很多時間來設計這一塊。
要將靜態頁面轉變成具有動畫的動態設計，也必須加入美感的成分，讓頁面看起來不會太陽春。
要將切分文案的圖層，以及要如何在動態能夠滑順地呈現的基礎下，讓文案內容完整地呈現在頁面中。
要將文案的圖層拆分成不同類型的區塊，透過不同的圖層與資料層級去詮釋內容的意義，對使用者來說有何幫助，是做為後續實作畫面動態的基礎。
需要掌握的就是團隊之間的溝通。前端工程師在接收到畫面需求的時候，要能嘗試解讀並掌握設計師對於頁面每個區塊設計的可能原因，並嘗試在設計中根據開發工具的語言限制，找出可能存在的開發疑慮，最後找到與設計師協調溝通開發策略。

challenges that front end developers will face

前端軟體工程師的薪資待遇如何？怎麼找到高薪工作？

根據統計，初階前端工程師 (1年以下工作經驗) 的平均薪資大約能達到40000-50000元(年薪約60萬)，比起80％未滿30歲的受僱就業者還要優渥。而年資1-3年的薪資大部分能成長到80-90萬年薪，3-5年經驗的前端軟體工程師則有機會突破年薪100萬。5-9年以上工作經驗的只有極少數的人沒有超過100萬年薪，而有10年及以上經驗的人，薪資也有機會爬到200萬，甚至300萬。

對軟體工程師薪水想要了解的更仔細，可以下載並參考Glints的【台灣數位人才趨勢報告：薪資與企業文化特輯】

前端軟體工程師在台灣的薪資狀況本身就相對的高，但如果想要看到薪水的成長，就必須要做到幾件事情：

選擇學習並持續練習廣泛使用的程式語言。
在專案中找到可進步的事項並做調整。
加強與團隊的溝通能力，減少溝通的成本。
不斷的學習並關注新的趨勢。

做到以上這4件事情不僅可以讓自己的履歷更加豐富、面試問題應答如流，還能讓你在實際工作時能夠與團隊合作順利。這些都是公司在找一位前端軟體工程師會注意到的事情。

Glints建議也可以試試找外商公司，外商公司的薪資通常都能夠給的更加豐厚，原因是他們的資源大部分是從國外調進來的。不過要進外商公司的條件也須要增加外語的能力，如果本身就有很強的英文、日文能力，真的很值得一試。

到Glints搜尋自己有興趣的工作，也須你會發現新的機會！

結論

相信大家看完這篇文章後，對前端軟體工程師也有了更深的了解，不管你是不是在考慮轉職，或是想簡單了解，甚至已經是一位前端軟體工程師，這篇文章都可以幫助你加深基礎。

Glints也再一次強調網頁的重要性，現在不管是在生活中，亦或是在工作中，網路都是不可或缺的。而要讓網站受到大眾的喜愛，就要靠前端軟體工程師的技術了！由此可見前端軟體工程師的重要性，沒有想成為工程師的人，也須要了解到這一點！

如果你希望可以得到更多資訊，可以追蹤Glints的臉書粉絲頁，每個星期都可以看到熱門職缺與職涯資訊。

你也可以到Glints – Taiwan去了解更多！或是註冊帳號，收到職缺通知！

延伸閱讀：

對軟體工程師求職有興趣的人，可以看看Glints的其他精選文章