lock.gotoBlog() » FED http://www.lockchou.idv.tw/blog Wed, 09 Aug 2023 04:49:40 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 [譯]為什麼我們找不到前端工程師？ http://www.lockchou.idv.tw/blog/2014/06/why_cant_we_find_f2e/ http://www.lockchou.idv.tw/blog/2014/06/why_cant_we_find_f2e/#comments Mon, 16 Jun 2014 17:19:07 +0000 lock http://www.lockchou.idv.tw/blog/?p=873 原文為 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上開發軟體是極度令人興奮的一件事。你擁有接觸到數以千計使用者生活的機會，當你透過網路提供一個很棒的服務給某個人，這一切都在一個叫做瀏覽器的東西上發生，儘管它仍有所限制，但它們仍能夠分析，揮灑或呈現你任何瘋狂的想法。
前端工程師們
網路正在等你，祝你前程似錦。

延伸閱讀

]]> http://www.lockchou.idv.tw/blog/2014/06/why_cant_we_find_f2e/feed/ 0 I AM A FRONT END ENGINEER. (我就是一個前端工程師) http://www.lockchou.idv.tw/blog/2012/09/a-front-end-engineers-manifesto/ http://www.lockchou.idv.tw/blog/2012/09/a-front-end-engineers-manifesto/#comments Mon, 03 Sep 2012 10:40:15 +0000 lock http://www.lockchou.idv.tw/blog/?p=851 Randy哥塗鴉牆分享的： A FRONT END ENGINEER’S MANIFESTO(前端工程師宣言)
說是準則也好，宣言也罷，行內人可以時時拿來檢視(提醒)自己，行外人也能了解F2E 專業與特性的好文。
I AM A FRONT END ENGINEER

Most importantly and above all,I will put the needs of the USER FIRST over my own needs as a developer.
最最最重要的是，我會把『使用者至上』的需求放在我這個工程師的需求之前。

PROGRESSIVE ENHANCEMENT and UNOBTRUSIVE JAVASCRIPT are my tools. Without JavaScript or CSS, or without mobile Webkit, my site may not look pretty but will still be functional.
不斷進化且乾淨清爽的JavaScript就是我的利器。沒有JavaScript, CSS或是行動版的Webkit，我的網站就算能動但也只是醜而已。

SIMPLICITY IS RESPECT
I will not unnecessarily tax my users’ brains with complicated designs and user interfaces. I will strive to make interactions succinct and minimize mental overhead.
 簡單才是重點 – 我不會讓使用者花太多腦袋去了解複雜的設計跟使用者介面。我會努力的讓互動這件事變得簡潔又不傷神。

I will educate my friends and family that WEB BROWSER CHOICE MATTERS
Web Browsers should at minimum properly implement web standards and should be responsive to the advancing web. Web Browser Choice should be separate from picking an operating system. This is especially important for mobile devices.
我會教我的親朋好友：選對瀏覽器很重要。
瀏覽器至少應該要遵照標準來實作，並且跟著網路與時俱進。選擇瀏覽器跟選擇作業系統是分開的(大概是說你有更多選擇，不必被作業系統綁住吧)，這點在行動裝置上尤其重要。

I believe in the power of the OPEN WEB
My content was accessible when full Flash / Flex apps were popular, and I will continue to provide accessible device independent content in the face of App Store ubiquity.
我相信開放網路的力量
在滿是Flash / Flex網站跟應用程式的時代，我的網站內容都能容易地被取得。就算面對現在充斥的App商店，我仍會繼續給你這些內容，無論你用哪一種裝置。

I acknowledge that PERFORMANCE IS CRITICAL. My own developer hardware is not representative of the real world, and will be mindful of limited hardware, poor latency, and low bandwidth situations.
我了解效能是關鍵，我的開發機不能代表這個世界上所有使用者的機器，我會留意那些硬體太爛，累格很大跟種花的狀況。

I will learn at the root, not the abstraction: JAVASCRIPT BEFORE JQUERY or YUI, Prototype, Mootools, et al.
我會從根紮起，而不是先學皮毛。
先學JAVASCRIPT，再去學JQuery 或是 YUI, Prototype, Mootools這些東西。

I believe that OPEN SOURCE CODE and ROYALTY FREE TOOLS represent the best future for the Web. Especially when considering file formats and codecs for images, audio, or video.
我相信開放原始碼跟有授權的免費工具代表著網路的美好未來，尤其當你考量到檔案格式，圖片及影音編碼等技術。

I will not underestimate the importance of ACCESSIBILITY
It is not just about helping users that may have trouble differentiating colors or difficulty reading small fonts, but is about providing comprehensive access for users that may prefer to use either the keyboard or the mouse; in providing a clean print friendly format; in providing content to a devices of varying technological capabilities.
我不會小看Accessibility (網站親和力)的重要
這不只是幫助那些有辨色困難或是看不清小字的人，也提供使用滑鼠或鍵盤使用者都能方便的取得內容。為你的內容提供一個便於列印的格式，也把他們提供給各種技術規格的裝置。

I will GIVE BACK to the COMMUNITY
I will contribute workarounds, fixes, and document issues that may help others. I will file bugs at the source with the web browser’s bug tracker.
我會回饋社群
我會貢獻我的技巧，解決問題的方法，並且把一些遇過的問題寫成文件來幫助別人，我會用bug追蹤系統把bug記下來。

I will continue to foster both HEMISPHERES OF MY BRAIN. I will better myself not just in math and code, but also in art, music, design, and usability.
我會保持左腦右腦都能成長壯壯，除了加強數理跟寫程式能力，也要涉獵藝術，音樂，設計跟使用性。

I will do my best to keep my KNOWLEDGE CURRENT. I understand that I cannot learn everything and will be mindful of what I do not know.
我會盡全力的讓所學跟上時代。我知道我沒辦法學會一切，但我會留心那些我還不懂的知識。

I accept RESPONSIBILITY FOR VIEW SOURCE
I will take care to use approaches that will be compatible with current and future web browsers, including preference for feature detection over user agent sniffing when it does not violate rules #1 or #5.
檢視原始碼的責任，我來扛。
在不違反規則1到5的情況下，我會小心地使用一些方法來相容現在或未來的瀏覽器，像是一些檢查user agent來判斷功能是否可用。

My CODE will be PORTABLE
I will be mindful of overzealous CSS specificity, overuse of CSS!important, the global JavaScript namespace, as well as numerous browser implementation quirks.
我寫的程式碼到處都能跑
我會留意過度熱衷CSS specificity這件事，避免過度使用CSS !important，全域的JavaScript 命名空間，以及一大堆為了兼容瀏覽器的怪招。

I will choose the RIGHT TOOL FOR THE JOB.
Whether it be a big choice between a full stack framework and a simple DOM-centric library, or even the simple choice between CSS and JavaScript to solve a task, I will educate myself on the mistakes of those before me to make the correct choice for my project.
工欲善其事，必先利其器
你是否常為了選擇功能完整的框架還是輕巧的DOM函式庫，某個問題要用CSS還是JavaScript解決而左右為難？把之前犯的錯誤都當作繳學費，我會為了案子而做出正確的選擇。

I will strive to create SECURE APPLICATIONS.
I will properly escape my output and code to prevent XSS and CSRF. I will not store sensitive information in Cookies, and will use HTTPS where appropriate. I will be responsive in correcting issues that may cause harm to applications I have created.
我會致力於打造安全的應用程式
我會正確的將輸出結果轉碼，以避免XSS跟CSRF攻擊。我不會把敏感的資訊存到Cookie裡，而且會適時的使用https。我願意及時的回應並吃下修正這些我自己製造的大便。XDD

I AM A FRONT END ENGINEER.
我就是一個前端工程師


延伸閱讀

]]> http://www.lockchou.idv.tw/blog/2012/09/a-front-end-engineers-manifesto/feed/ 0