I AM A FRONT END ENGINEER. (我就是一個前端工程師) 2014大選監票心得
Jun 17

原文為 Why can’t we find Front End developers? 作者是 Jose Aguinaga一個前端工程師,使用者體驗設計師跟熱愛Javascript 的軟體工程師。

為什麼要翻譯這篇文章?

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

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

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

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

lockchou@gmail.com

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

該討論串的的原po提到:

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

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

這是個相對新的領域

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

google-trends-front-end-engineer

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

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

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

webproduct

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

cssgif

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

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

webproducttoday
時至今日,仍有一些可憐的靈魂(在受苦)必須處理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 框架,網站是響應式的,或是響應式設計只是你隨時可以可以加到Web應用程式裡的調味料而已。
  5. 把「響應式網頁設計(Responsive Web Design」掛在嘴邊,卻不知道Server端有哪些解決方案可以用。
  6. 不遵守規範,不使用前置處理程式,命名規則,好的習慣,並且同時過度的使用CSS selector,id,某個神奇的數值, !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說的規範,參考:高效能網頁
  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上開發軟體是極度令人興奮的一件事。你擁有接觸到數以千計使用者生活的機會,當你透過網路提供一個很棒的服務給某個人,這一切都在一個叫做瀏覽器的東西上發生,儘管它仍有所限制,但它們仍能夠分析,揮灑或呈現你任何瘋狂的想法。
前端工程師們
網路正在等你,祝你前程似錦。

延伸閱讀

lock 發表於 2014 June 17, at am 1:19
標籤: ,
人氣: 17,891


留下迴響