高見龍

Git/Ruby/Rails/iOS app Developer & Instructor, 喜愛非主流的新玩具 :)

「自學程式現場」什麼是前端工程師?

Coding

Photo by Ferenc Almasi on Unsplash

前端工程師,英文全名是 Front-End Developer 或 Front-End Engineer,有時也會縮寫成 F2E。

現在大家聽到這個職稱,想到的大概就是可以在網站上做很炫的特效的工程師,但在當年我一開始學習寫程式的年代,並不存在這個名詞。一來那個時候就是一個人從 HTML、CSS 的切版到資料庫的架設、存取甚至連主機的架設跟設定都得一條龍自己包辦(硬要用現代的名詞講就是所謂的「全端工程師(Full Stack Developer)」,但我其實沒有很喜歡這個名詞)。

二來也是因為網路技術的發展十分迅速,印象中,當年 Google Map 剛推出的時候,超炫的地圖拖拉、放大縮小功能,整個把 AJAX 這個名詞給炒紅了,自那之後就越來越多 JavaScript 的應用。

當年只是用來做簡單的表單驗證的 JavaScript 已經複雜到不是一個人可以輕鬆搞定的程度了,於是逐漸特化出「前端工程師」這樣的角色出來。即然有「前端」,那自然也有相對的「後端」工程師,但請繼續容我在後續的文章再介紹。

其實手機 App 的開發者很常常也需要存取網站的 API 然後呈現在 App 裡,所以在我認定裡手機 App 工程師也算是前端。以下我就以網站的前端工程師來舉例說明,到底當一個網站前端工程師的工作內容有哪些,以及需要具備哪些的技術。

網站前端工程師所需技術

我認為一個合格的前端工程師要學的技術很多也很雜!但最少最少最少一定需要具備的有三個技能:

  • HTML
  • CSS
  • JavaScript

HTML

學習難度:★★☆☆☆

HTML 是一種標記語言(Markup Language),用來描述網站頁面的結構,例如 <h1> 用來代表最大的標題,<p> 代表的是段落,而 <ul><li> 等標記則是用來表示列表等等。

就以學習上來說,這應該算是在這三項技術裡最容易的。

CSS

學習難度:★★★★☆

HTML 負責網頁的結構,CSS 則是負責樣式。有些人可能覺得 CSS 不就調調顏色、設定按鈕的圓角而已嗎?那你就太小看 CSS 了。光是要把設計師的設計稿精準的重現成網頁格式,有時候還得面對不同廠牌的瀏覽器,例如 Chrome、IE、Firefox 跟 Safari(Safari 還有分電腦版的跟桌機版的不同)。

現在大家都習慣用手機上網,所以要做出適應各種大小尺寸的 RWD(Responsive Web Design)也是 CSS 的守備範圍。

近年來 CSS 的發展越來越厲害,甚至不需要 JavaScript 的程式碼就能做出很炫的效果,有興趣可到 CodePen 看看那些厲害的人拿 CSS 做了什麼變態的事。

JavaScript

學習難度:★★★★★★★★★★…xN(咦?)

JavaScript 又簡稱 JS,這應該算是當一個前端工程師最難的上手的大魔王等級技能,要學的深度跟廣度都很驚人,如果你不覺得 JS 很難學,如果不是天生神力,就可能表示你還學的不夠透徹。

JS 有多難學以及該怎麼學,請容我之後用另外的文章再專門介紹。

另外,在這個「自學程式現場」的系列文章裡,我會實際拍幾部短片讓大家感受一下 JavaScript 寫起來是什麼樣子,也歡迎大家到時候可以跟著影片動手寫看看。

網站前端工程師的工作內容是什麼?

假設,客戶想要做一個工作職缺媒合網站,專案開始的時候,通常負責這個專案的 PM 會先把功能條列出來跟客戶確認,同時也會跟前、後端開發者們確認工時以及可行性。

開始動工後,最源頭也許是網頁設計師先做出設計稿,客戶確認設計稿合乎需求後,就會進到下個步驟,開始把設計稿想辦法透過 HTML 跟 CSS 技術轉換成網頁,這個步驟通常業界都會叫它做「切版」。

「切版」的工作切分比較不一定,每家公司不一樣,而且也跟人員的配置有關。切版有時是由網頁設計師自己處理,也可能是由前端工程師來進行。切完版後,如果沒有太複雜需要跟後端資料庫做互動的話,也許再做一些選單或做一些頁面上的特效就差不多可以收工了。

但通常都沒有這麼好命,我就以「收藏職缺」的功能為例,網站使用者在登入網站之後,看到喜歡的職缺,按下收藏按鈕。這時通常在前端會需要使用 JavaScript 發動一個請求(HTTP Request),並且把相對應的參數,例如職缺的編號,一併跟著這個請求傳給後端程式。

後端程式收到請求並且處理完之後,會回應訊息給前端的程式,由於剛剛前端來的請求通常是「非同步(asynchronous)」,也就是前端程式收到後端給的資訊後,會依據成功或失敗以及得到的訊息做出回應。如果成功,就要把那顆按鈕做一些樣式上的變換,也許是讓按鈕變深色,好讓使用者知道剛剛的「收藏職缺」功能生效了;如果失敗,要再看失敗的原因是什麼,然後適當的在頁面上告知使用者出了什麼問題。

所以,前端工程師要做的事其實很多,不是只有切切版就叫前端工程師,有時候得與網頁設計師一起協作,把設計變成真的會動的東西;也得跟後端工程師協作,討論資料要怎麼傳、API 要怎麼串接等事情,如果後端工程師沒辦法生 API 給你用,你可能得自己先想辦法弄個模擬的 API 來測試。

除了各種廠牌的瀏覽器最好都能正常運作外,還得支援各種行動裝置,讓網站在手機上也能順利操作,同時效能還不能太差…。

所以如果只會切版的,我通常會稱它叫「切版員」。

容易找工作嗎?薪水如何?

還算容易,在人力銀行上搜尋「前端工程師」或「Frontend」等關鍵字就可以搜尋到不少的職缺,也常常在社群網路上可以看到公司或獵頭主動來張貼職缺,薪資也都滿漂亮的。

薪資要看工作地點也得要看產業,台北、高雄會高一些,另外博奕產業也會高一些。就以我自己的體感,在台北的 Junior 前端工程師,差不多月薪在 40,000 元上下,比較菜的可能會被砍個二、三千塊,比較有談判籌碼的也許可以談到月薪 45,000 或更高。另外博奕業加成差不多是 5,000 ~ 10,000。

至於前端的面試該怎麼準備、要不要刷題、要不要學框架、框架要學哪一款,又或是要怎麼變強或怎麼談薪水,還請期待這個系列後續的文章介紹 :)

…to be continued ✌️

工商服務:
實體課程:ASTRO Camp 三個月轉職全端工程師實戰培訓營

Comments