為什麼新創公司很難找到前端工程師？

原文為 Why can’t we find Front End developers? 作者是 Jose Aguinaga，一個前端工程師，使用者體驗設計師跟熱愛 Javascript 的軟體工程師。全文轉載自Lock Chou 臉書，以下由作者編譯。

為什麼要翻譯這篇文章？

對我而言，前端工程師是一群，橫跨設計與工程領域，美感理性兼備，對於 Web 充滿熱情，相信自己可以利用 Web 改變世界的傢伙。

而這篇文章點出一些對前端工程師的迷思，包括：前端門檻是否較其他軟體工程師的門檻低？為什麼我們需要前端而不是全端。經歷過這些年網站開發變革的前端們，閱讀這篇文章會特別的有感觸

有趣的是，就算是發展較成熟的歐美網路產業，對前端仍然會有這些迷思與誤解，可想而知，台灣在這塊領域上，仍有很多路要走。透過這篇文章，可以了解所謂專業的前端工程師，需要具備的技能；也能知道何謂不及格的前端工程師。什麼是你不可錯過的前端奇才。業內的讀完可以三省吾身，業外或是對這塊領域有興趣的人，也能窺知一二。

任何意見，或是翻譯有誤的地方，也歡迎討論或來信。

lockchou@gmail.com

—————————————— 正文開始 ————————————————

有天，作者偶然在 Quora 上發現一個跟前端工程師及新創公司有關的問題：「為什麼新創公司很難找到前端工程師？」

該討論串的的原 po 提到：

(前略) 我想多數人都同意前端開發比其他軟體工程領域簡單一些，那到底為何那些新創公司還是很難找到前端工程師？

我看到幾個不錯的回應，這些回應大多一針見血。而根據過去我尋找前端職缺，面試前端工程師，以及平常在前端專案裡的工作經驗，以下提出我的個人意見：

這是個相對新的領域

首先最簡單的答案就是 「這是個新領域」。很多人可能不同意這句話。因為前端工程幾乎等同於網站開發，而網站開發領域也發展超過 20 年了。 然而，作為一門實作使用者介面 (Interface) 及使用者體驗 ( User Experiences) 的技術，以特定的領域而言，前端工程仍是個相當新的觀念。其中「工程」的部分更是在幾年前才開始發展。

近年來，前端工程師在 Google Trends 上的趨勢視覺化圖表

時至今日，搞混 Web 開發與前端工程的情況仍所在多有，這怨不了誰。對多數置身 Web 產業外的人來說：Web 開發介於網頁視覺設計與其實作技術之間，存在著模糊的空間。說到底，前端工程師還是在做一些網站開發的工作，不同之處在於，他們只著重在牽涉使用者的部分。

「前端」 這個實作使用者介面 ( UI ) 與使用者體驗 ( UX ) 的技術領域，是近年來才出現的名詞。在 15 年前或更久之前，人力被分成網頁視覺設計與技術開發兩種。但隨著 Web 的成長，網頁不再只有到達頁 (landing page) 與行銷的目的，對工程師的需求也明顯增加。人們開始學習 JavaScript，後端技術，使用者體驗，資料庫，甚至是網站系統設計。如今，像是 AirBnB、Facebook 或是 Quora 等網頁應用程式，在工程師的人力資源投注上也比在設計師上來的多。換句話說，產出網頁的視覺設計，然後實作出來變得更加快速。這並不代表網頁視覺設計較不重要，或是投注在其中的資源比 20 年前來的少，而是今時今日對於 Web 工程師的需求比以前更大了。

因為網站實作的技術牽涉到很多不同領域，90 年代中期的 Web 工程師們可以說是十八般武藝。他們可能兼做資料庫管理者、系統管理者、後端工程師、軟體維運人員 (DevOPs)、軟體工程師、使用者體驗工程師跟前端工程師。最近也是大家最怕去做的一件事，就是用 JavaScript、HTML 跟 CSS 把設計圖上的樣子刻出來，還要讓他在瀏覽器上看起來有模有樣。我想要能在前端的領域裡悠然自得，除了得對視覺設計有些興趣，某種程度還要是個被虐狂。

這張 gif 常用來表示很多前端初心者都碰過的鳥事。CSS 是一種呈現樣式的語言，它用來將視覺設計呈現在網頁上。但大部分的時候，它呈現出來的都不是你想的那樣。

很明顯的，當你應付了幾次 Web 應用程式大量的需求後，你會發現這一拖拉庫的技術工作，需要各種不同角色的人分工完成。我不知道哪些工作比較費時，或哪種角色比較累 (注 1)。但現實就是，很多公司或網頁設計公司發現：一個人不可能處理好各種技術細節。我之前提到的那些工作描述：像是後端工程師，資料庫管理者等，都屬於 Web 產業的一部分。記住，這些工作多數已經行之有年，但在 Web 產業中，都是在近十年才明白這些職缺所要求的技術能力。

時至今日，仍有一些可憐的靈魂 (在受苦) 必須處理 Web 應用程式中所有的技術問題，我們管他們叫「全端工程師」，這麼棒的人才可說比獨角獸 (註 2) 還難找。當然設計師也沒多好找啦，需要更多資訊的話你可以參考這篇：如何僱用一個設計師 (https://insideintercom.io/how-to-hire-designers/)

註 1:  我其實是在說謊，舉例來說：做一個能在 IE 正常運作的網站就是件浪費時間的工作，而且你同時也在浪費你的生命值來作這件事。

註 2: 多數的全端工程師缺乏建立一個 Web 應用程式的技術深度，包括前端，後端或營運上。在資金充足的新創公司裡，期待一個諸葛亮來處理三個正職的臭皮匠才能做完的事，是不切實際的。然而，我知道武林裡有少數的高手 (Ninja) 可以單槍匹馬解決上從 GUI，下至殭屍程式的問題。假如你們團隊中有這樣的高手，幫大夥一個忙，不要放他走。

誤解

另一個很難找到前端工程師的重要原因 ( 對我來說這點最重要 )，因為這是一個被誤解的領域。如同原 po 在他提問中所述，大多數人認為前端工程師是一個「相對簡單的領域」。用一個之前流行的比喻 -「大多數人覺得 XXX 是 (What most people…)」，我們來看看套上前端工程師會是怎樣：

大多數人認為前端工程師是：

1. 拿 PSD 檔，圖片或是草稿，然後把他轉成網頁。
2. 有時候只是拿以前的 PSD 檔，圖片或是草稿來設計 (改一改)。
3. 用 Javascript 來寫動畫，做出網頁裡的過場效果。
4. 用 HTML 跟 CSS 來寫網頁裡的內容跟外觀。

前端工程師真正在做的事：

1. 建立一種設計師與工程師之間 (溝通用) 的圖像化語言。
2. 從視覺設計的角度來看，定義一組元件來呈現內容、品牌跟功能等…
3. 建立一套 Web 應用程式的基礎，包含規範、框架、需求、圖像化語言 ( Visual language ) 跟規格。
4. 定義 Web 應用程式支援的範疇，包含裝置、瀏覽器、螢幕與動畫。
5. 寫一份 QA 指南，以確保品牌忠誠度、程式碼品質，以及產品都有讓相關人士審視過。
6. 刻 (Style) 一個 Web 應用程式，要運用適當的空間、圖片、排版 (typography)、標題、字型、icon、內外邊距 (padding / margin)、格線系統 (grid) 等。
7. 刻 (Style) 一個 Web 應用程式，要能考慮到不同解析度的圖片，多種裝置為導向的樣版圖，還要兼顧設計指南。
8. 下 Web 應用程式的標籤時，要考慮到語義 ( semantic )，accessibility，SEO，schemas 和 microformats.
9. 連 API 抓資料時，要能採用友善，不耗電，了解目前用戶端與裝置狀況的方式 ( 譯者按：舉例來說：針對行動用戶的網路與硬體的限制，改變拉資料的方式來避免電池與頻寬的消耗 )。
10. 用戶端的程式開發，要能呈現順暢的動畫、過場效果、延遲載入 (lazy loading)、互動效果及操作流程，其中大多數的時間都耗費在漸進增強與向下相容標準。 ( 譯者按：漸進增強：例如為了在設計與效能間取得平衡，某些前端的效果，例如漸層色，陰影等，只能有條件的支援舊版 IE)
11. 確保與後端間的連線是安全的，考慮使用跨網域資源分享 Cross Origin Resource Sharing (CORS) 時，要避免 XSS 跟 CSRF 的狀況發生。
12. 不要忘了，不管多嚴格的結案期限，專案相關人士多靠北的要求，以及裝置的限制，永遠都要把使用者擺在第一。

為了達到上面這些目標，前端工程師也使用很多工具，從視覺設計師常用的 ( Photoshop、Adobe、Macaw、Sketch ) 到程式開發工具 ( IDE、指令列、版本控制、bash script、Build Task)。

有時候我們甚至要考慮行銷 ( 電子報、廣告活動、用戶資料分析、SEO、社群媒體 )，使用者經驗 ( 動畫、過場、反饋、使用者介面、圖像化語言 ) 到內容調整 (斷行、避免斷字、可讀性跟色彩)。

• 不好的前端工程師 

也許大多數顯而易見的理由指向為什麼很難找到前端工程師，是因為市面上充斥不好的前端工程師。如同 Quota 上一篇文章所陳述的答案，前端工程師擁有比較低的進入門檻。Javascript, CSS 跟 HTML 不是很難掌握的程式語言。任何人只要花幾天就可以在  CodeAcademy 或是 Codeschool 學到基礎，當你學習像是 Erlang, Go 或是 ANSI C 等語言時，你就需要掌握很多電腦工程的技巧。調個顏色跟在網頁中插入一張圖片真的非常簡單，但那跟了解 Web 的眉眉角角完全是兩回事。

最終，市場上充斥著假貨前端工程師：

不及格的前端工程師會做出這些事 ( 同時也傷害真貨的前端工程師 )

1. 濫用 Javascript 函示庫，因為他們不懂怎麼使用原生 Javascript (例如：無處不用 jQuery )。
2. 濫用 Javascript 外掛，用別人寫的程式碼但沒辦法看懂別人寫什麼 (例如：jQuery.doParallaxPls.js )。
3. 不看需求，設計文件，也沒做任何比較跟評估，就在 Web 應用程式裡用了 CSS 框架 ( Bootstrap, Foundation, Skeleton )，卻只用其中 5% 的 CSS / JS。
4. 用了 CSS 框架，網站是響應式 (RWD) 的，或認為響應式設計只是一種你隨時可以可以加到 Web 應用程式裡的調味料而已。
5. 把「響應式網頁設計 (Responsive Web Design」掛在嘴邊，卻不知道 Server 端有哪些解決方案可以用。
6. 不遵守規範，不使用前置處理器 (Pre-processor)，命名規則，好的典範，並且同時過度的使用 CSS selector，id，CSS 裡面有某個神奇的數值, !important。
7. 忽視效能，memory leak (或是根本不知道這是什麼)，也不做程式碼的檢查跟評量。
8. 展示成品的時候沒做任何的評估，或者評估就是「這在我的電腦 / 瀏覽器 / 裝置上會動」
9. 過度的閉門造車 (譯者按：就是重複打造輪子的意思吧)，忽略了已經發展 30 年的軟體工程。

很多情況下，你想找一個資工背景，然後決定走前端工程的人。要當一個好的前端工程師，資工背景並不能當作是條件，但那些電腦與軟體的基本功的確應該被考慮進來，無論這些人是用 Javascript 寫程式，或是在瀏覽器上寫程式。好的前端工程師了解 Web 或許是一個有史以來最威的平台與環境，程式碼可以在上面直接執行，跟其他在 virtual machine 或 runtime 上執行的語言相比，開發時同樣要小心，甚至更小心。

一個好的前端工程師不會只重視 Web 技術跟其使用的語言，反而是在不同的元件，系統跟概念上擁有豐富的經驗。

下列是一些老鳥前端工程師應該知道，或是比一般前端工程師做得更好的部分 ( 這些人才是你應該要找的人才 )：

1. DNS 解決方案，使用 CDN，把資源檔的請求分散到多個不同域名上。
2. HTTP Headers (Expires, Cache-Control, If-Modified-Since )
3. 所有 Steve Sounders 說的規範，參考：高效能網頁 (http://shop.oreilly.com/product/9780596529307.do )
4. 如何解決所有 PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline 上列出的問題。
5. 什麼時候要把事情交給 Server，什麼時候要交給前端。
6. 利用快取 (cache), 預先抓取 (pre-fetching) 跟 延後載入 (post-load) 技巧
7. 原生 Javascript，知道何時要自己刻，何時要去找別人的程式碼來參考，同時還能夠評估出優點跟缺點再去做。
8. 新潮的 MVC Javascript 函式庫知識跟用法 ( 例如：AngularJS, EmberJS, ReactJS )，圖形函式庫 ( 例如：D3, SnapSVG )，DOM 操作函式庫 ( 例如：JQuery, Zepto )，延遲載入 (lazy loading) 或是 package 管理函式庫 ( 例如：RequireJS, CommonJS ), 任務管理 ( 例如：Grunt, Gulp )，package 管理 ( 例如：Bower, Componentjs ) 及 測試 ( 例如：Protractor, Selenium ).
9. 圖片格式，優點，何時使用哪一種，如何使用。圖片的優化技巧，載入的策略 ( Sprites, lazy loading 技巧, 快取刷新, PNG 交錯)
10. CSS 標準的知識與用法，現代規範與策略 ( 例如：BEM, SMACSS, OOCSS )
11. Javascript 在電腦科學的部分 ( memory management,single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns )

• 結論

時至今日，尤勝於前，前端工程師已在網路佔了一席之地。可能是因為各種裝置，瀏覽器跟網頁標準的進化，使得人們能專注在 Web 應用程式的使用者上。全世界的前端工程師跟開發者以經能夠打造出讓人興奮的產品，網路不再只是我們過去所認為：一個讓人看到你餐廳菜單，或是公司營業時間的地方。現在我們擁有從3D 圖庫，即時影音溝通，電台，甚至是整套辦公室工具 ( 例如：Google Apps, Microsoft Office Online )。所有東西都在雲端，無所不在的儲存了我們所寫下，所聽見，電子郵件甚至我們所觀賞的影片。

雖然前端工程師很難找，但我知道有越來越多人將投身前端大軍的行伍。不只是因為讓人驚豔的工作環境或是這份工作提供的優渥薪水，而是因為在 Web 上開發軟體是極度令人興奮的一件事。你擁有接觸到數以千計使用者生活的機會，你透過網路提供一個很棒的服務給某個人，這一切都能在一個叫做瀏覽器的東西上發生，儘管它仍有所限制，但它們仍能夠分析，描繪或呈現你任何瘋狂的想法。

前端工程師們

網路正在等你，祝你前程似錦。

延伸閱讀

【心情】事情爆多什麼都要略懂略懂，前端工程師等於苦命雜工

為何我不想成為 Web 前端工程師？錢少事多變化快

（本文轉自Lock Chou 臉書，未經授權不得轉載）