初級前端工程師的求職門檻

這絕對能被列為我人生當中前十大最常被問到的題目之一,就趁這次機會來說明,究竟要達到什麼程度,才有辦法達到初級前端工程師的就業水平。

HTML、CSS 網頁版型是基礎功

初級 (Junior) 前端工程師在網頁版型上必須駕輕就熟,通常公司會聘請到前端,自然是因為需要有一個專人來負責跨螢幕跨瀏覽器的工程師來開發他們的產品。所以你至少必須要滿足以下條件:

  • 會考慮到各螢幕解析度,設計桌面、平版、手機都能夠自適應的網頁版型
  • 開發前詢問產品 TA 族群習性,瀏覽器兼容性需要滿足哪些特殊條件
  • 提供給企劃、設計師更好的網頁操作流程之可行性建議,優化使用者體驗。

至於 Bootstrap 的部分也建議你掌握起來,但在投入它之前,請你至少要使用 CSS Media Queries 有實作過一個多頁式的網頁,並可兼容手機、平版、桌機的網頁尤佳。因為你的本業是前端工程師,你必須在深入框架前要對 HTML 標籤、CSS 有足夠的開發經驗,絕對不要變成只會用 Bootstrap,但超出一點 Bootstrap 額外的東西就不會自己寫 CSS 增加網頁彈性的話,那不是一個合格的前端工程師。

設計動畫效果點綴網頁樣式

為了要讓網頁能夠與使用者產生互動,適量的動畫效果是絕對必要的。在初期時 CSS 必須要瞭解 transition、animation 的操作方式。但是若要能做到高彈性的互動,是絕對需要使用 JavaScript 來寫動畫效果的,如果你還不會自己刻,對 JavaScript 也還不會那麼熟悉,也可以先試著學 jQuery,就算不會 JavaScript,你也能透過他簡易的 API,自己設計出簡單的效果。

學會後也能夠自己去使用別人寫好的 jQuery 套件套用在網頁上,一些網站常見的動畫效果例如跑馬燈、圖片輪播、頁籤絕對要自己準備起來自己習慣用的插件清單,以備上戰場有足夠的武器應戰,如果你對熱門動畫套件不熟悉,之前我也整理了一份詳細清單,同時也曾經錄製兩個小時的 jQuery 影片教學,也提供給您參考。

JavaScript、AJAX、API 整合多方服務

接下來就是紮穩 JavaScript 基礎功,從最基本的變數、函數、陣列、物件你自然必須了然於胸,學 JavaScript 的用意是在於你能透過他去接收網頁瀏覽器上所有的資訊。例如說:

  • 想知道當下使用者的瀏覽器寬度與高度
  • 從 JS 去接收遠端伺服器的 API 資料再渲染到網頁上
  • 在瀏覽器的網頁上設計 2、3D 圖形動畫
  • 將訪客資訊記錄到瀏覽器上的資料庫

這些舉例只是小小的冰山一角,現在的 JavaScript 已經不只侷限在網頁瀏覽器,甚至能透過它設計 APP、桌面應用程式以及任何你想像不到的東西。

一開始在學 JavaScript 的朋友可能會覺得他是個無底洞,彷彿學無止盡是很正常的,但無論如何基礎功還是相當重要的,如果你是初學者,目前我會推薦你這本,並試著做一些線上題目,例如 Codecademy 上面的 Introduction to JavaScriptJavaScript,我也曾經設計過一個 JS 百題斬的題庫,若是你能答對 85 題以上,就代表你確實已經具備 Junior 的水平了。

但是若這樣還尚缺不足,在目前網頁趨勢來說,同時必須掌握 AJAX/API 整合的技術,以白話文來說明則是說在一個網頁上面,同時會介接三、四種服務已經是家常便飯的事情。舉例來說,假使我要做一個「高雄公車即時動線服務」的網站,首先你就必須接政府提供的公車動態 API,拉回來資料後再顯示在網頁上,如果你希望用地圖呈現時,就需要即時介接 Google Map API,假使你還需要做一個讓使用者儲存最愛資訊時,就可以用 Firebase 設計註冊登入邏輯與資料庫設計,在公司做專案跟後端工程師配合時,也會搭配他提供的 API 來設計各種服務。

在這裡你所必須掌握的是閱讀文件的能力,你如何將你已經會的 JavaScript,在獲得這些 API 資訊後,顯示在瀏覽器上便是一個相當重要的課題。如果你聽不懂這段也沒關係,在我推薦的那本書上也有提到 AJAX 的部分,當你越加瞭解 AJAX 後再回頭看我這章節,自然會更加透徹。

Git、GitHub 是首要必學之路

Git 是版本控制語言,可以紀錄程式碼修改了哪些東西,當你不小心刪除、覆蓋檔案時,就可使用 Git 來進行還原。而 GitHub 則是來存放 Git 數據庫的東西。

你可能會想說,這跟前端又沒有太大關係,我處理檔案時小心一點不就好了?這樣就讓我來仔細為各位解釋:

多位工程師協作同個專案,不用版控簡直找死

當一個中大型專案,可能就會分派兩個前端三個後端,後端 A 去處理金流、B 處理報表、C 處理系統架構,前端 D 負責使用者端、前端 E 主要為後端介面。但一個專案該如何讓那麼多人協作程式碼卻又不打架呢?絕對是會仰賴到版本控制語言的。

我在學校教前端時,曾經有位被我教過的學生請我寫推薦函,一看公司大有來頭,雖然下意識覺得他應該不會上,但摒著年輕人總該去磨練經驗碰壁一下的想法,那時還是盡力地協助他。最後竟然意外被錄取了,後來試用期轉為正職時,學生好奇問了帶他的主管為什麼那時會錄取他。主管回他說:「其實那時面試一輪下來,你的前端能力只能算差強人意。但你 Git 卻是觀念最好的,我們也不怕你搞爛我們的 Code,以前曾經有個實習生 Git 下錯指令搞爛 project .. 害我們一直有陰影。」

從這故事就可以看得出來,你要有機會進入到大公司或是有心要培養你的公司,你有辦法觀看他們的專案或試著參與,不會 Git 你就連基本的門票都拿不到。

所以在我門下的學生,我絕對會請他學 Git 再去投履歷,機會也相對大得多。

為你自己的 Code 把關嚴謹性

你可能會想說,我就只有一個人,哪還需要去做版控?這種觀念大錯特錯,Git 有辦法追蹤到每個檔案的每一行程式碼的更動,所以在你新增一個功能時,就可以進行版本控制。至少在你搞爛檔案時也能進行版本還原。面試官也會從你更新功能中觀看到你對程式碼的嚴謹度,例如程式碼縮排、命名規則、版控觀念來進行初步審核,所以自己盡早培養版本控制的觀念,你才不會進入公司後才在後悔當初沒學好 Git。

GitHub 是最大的程式碼開放平台

GitHub 上擁有許多開發者發佈的專案內容,你可以從中觀看許多程式碼邏輯,而你也可以上傳自己練習的專案上去,如果有開發者對你的程式碼有興趣,並發現一些問題,他也會主動發 Issue (問題單) 給你,或是佛心地幫你修改,並發 Pull Request (合併請求) 給你,你一定會心裡 OS 「so what?」,讓我講一個故事給你聽。

多年前我想要做一個 D3、C3.JS 的 SVG 圖表能夠匯出 PNG 格式並下載的功能,我那時候找到一個 Angular 國外開發者有出一個完整的 sample,但因為我是用 jQuery 寫的,於是在 GitHub 問他一些原理,後來我終於搞出來也回饋給他,他也很替我高興。但故事還沒有結束,在那之後的半年一年期間我仍然會收到各個開發者詢問我這段的原理,原因他一直在幫我宣傳我有實作出來,請他們來請教我,儘管我已經完全沒在理那個功能了。

從那時開始我才開始嚐到一些甜頭,透過這些 Open Source 能夠與各國的開發者接軌,在相互交流技術的正能量環境上,我的開發程式能力也大幅提昇!

如果想自學 Git 的話,這裡也推薦一些資源給你:

接下來,開始為自己找職缺

如果以上的條件你都滿足,就能開始找工作了,我自己也有一份前端就職關卡文件,你可以依照每個關卡條件來關關闖過,在後面也有提到一些履歷寫法與面試教戰手則影片,也提供給各位參考。

曾經有學生問我,老師感覺那些公司都是要找「有經驗的」,甚至會提到一、兩年經驗,那種可以投嗎?當然可以啊,如果職缺內容提到的技能你都有涉獵的話。公司在尋找人才會有很多面向,例如資淺但有潛力拉進來培訓,或你的能力已經有滿足公司的條件等等,老實講也蠻看緣分的,所以初期就當做是磨練面試經驗也蠻 ok 的。

如果不曉得如何觀察公司職缺工作內容,也歡迎找來詢問,更多的面試細節,在後面章節也會一一介紹到的。