什麼是前端工程師？
旁白：「前端工程師其實很簡單，就是在『工程師』三個字前面加上『前端』兩個字，就可以結束這回合…」（大誤）
在前端工程師眼中的網頁「設計」，其實跟一般的平面設計師、網頁設計師所認知的「設計」不太一樣，前端工程師不會像一般設計師一樣埋首在繪圖軟體裡的圖層中揮灑視覺才華，而是會埋頭在各位可能曾經聽過的 HTML/CSS 電腦語言之深海幽谷中漫遊取材，並且「將設計師們設計出的網頁畫面『實現』到瀏覽器的頁面上」。
沒錯！這就是前端工程師的宗旨。而「前端」兩個字，主要就是要表達在工程開發的面向上比較貼近終端使用者介面的開發、處理而得名，所以前端工程師的工作其實可以說是既理性又感性的結合：透過 HTML/CSS 語言理性地將設計實現於網頁畫面上，並且感性地詮釋與臨摹設計師的美感理念！
前端工程師工作內容有什麼挑戰？
前端工程師在實務上通常會處理到最貼近到客戶端的產品介面，也因此要對服務的產品甚至品牌的理念、氛圍掌握要有一定的認知，並且在這樣的認知下去嘗試讓網頁內容做到足以傳達這訊息的目的，在這樣的目標底下我們通常會有以下幾個挑戰：
- 要嘗試將設計師的設計稿以 Pixel Perfect （見備註一）為目標實現在瀏覽器的畫面中，也因此對於 CSS 的語言的概念掌握須要有一定的認知水準，這也需要時間慢慢培養，需細細品味、戒急用緩！
（備註一：Pixel Perfect ，意即要讓設計師的設計稿與最終在瀏覽器上以的實作結果以「一模一樣」的目標來呈現，每個 pixel 都要在對的位置呈現。其實實際在實務的複雜頁面中會有一定的實作挑戰，但前端工程師要自我勉勵以這樣的目標來嘗試實現。）
- 美感與動態的持續感知與自我培養也是很重要的！前端工程師需要理解到靜態頁面在轉變成具有動畫的動態設計之間，要如何去切分文案的圖層，以及要如何在動態能夠滑順地呈現的基礎下，也讓文案內容完整地呈現在頁面中。
- 要對圖層概念有所感覺，並且要能夠理解文案內容可以如何拆分成不同類型的區塊，透過不同的圖層與資料層級去完美詮釋內容的意義，而圖層在前端工程中的意義上，有時候可以做為後續實作畫面動態的基礎，如下圖圖六的 Pinterest 頁面服務為例，當我們點擊右上方的通知按鈕時，會出現不同層級的通知內容區塊，並且會覆蓋在全頁之上，這就是最常見的網頁圖層概念展現：
以上是在技術上需要掌握的心法。另外一方面需要掌握的就是團隊之間的溝通！前端工程師在接收到畫面需求的時候，要能嘗試解讀並掌握設計師對於頁面每個區塊設計的可能原因，並嘗試在設計中根據開發工具的語言限制，找出可能存在的開發疑慮，並嘗試與設計師協調溝通出更好的開發策略。而「網頁設計」對前端工程師來說，其實就是一個「實作的理想準則」，而在這樣的理想準則中，如何能從容地在「實現」與「時限」之間揮灑我們的才華，是前端工程師最大的課題！
[optin-monster-inline slug=”q9c8jelrbkhccctuc740″]
JavaScript 程式語法的掌握
身為軟體工程（簡稱「軟工」）的一員，程式語法的掌握絕對是首要條件唷！而在網頁前端工程領域中，最重要的就是要掌握前端語言 JavaScript 的運作邏輯與原理。
JavaScript 是一個可以在瀏覽器上運行的程式語言，除了文章前述說到，瀏覽器會下載並讀取 HTML 與 CSS 檔案來產生頁面的「靜態畫面」，同時也會下載需要的 JavaScript 程式檔，進行進一步的動態處理。
而動態處理則包含使用者在頁面上的操作（如：點擊、滾動、輸入文字等），或是頁面上的「部分」動態處理（如：視差滾動、輪播的圖片、狀態顯示燈等，而這邊會特別說是部分的原因是，CSS 也會做到部分的介面動態。），又甚至是頁面上的資料內容切換。這些都可歸屬於 JavaScript 動態處理的範疇，你是否也開始躍躍欲試了呢！
在程式世界中，JavaScript 的撰寫手法可說是出了名的「高自由」與「高彈性」！這無形中其實也塑造了它隱含著不可預測性，不同的撰寫角度都會有令人意外的結果，這些結果好則讓程式功能正常運作，壞則讓你改 Bug 改到度日如年……這就是 JavaScript 的箇中奧妙與深邃的底蘊！
但初學者們其實也不用太緊張，因為 JavaScript 也是因為有這樣的先天韌性，所以適合任何程式經驗等級的人來學習與探究它的奧秘！並且能在網路歷史脈絡的洪流中，持續實現著成千上萬種不同的需求解決方案！
一步步進階前端技術
學習 JavaScript 初期，在熟悉基本條件式、迴圈、宣告與呼叫函式後，漸漸地你會聽到一些 Callback、Recursive、Closure、Hoisting 等等的 JavaScript 程式運作概念；你也慢慢會想要寫出好的程式，或是寫出更好的程式邏輯，於是你會開始了解 ESLint、Algorithm、Design Pattern… 持續不斷讓自己的程式架構推升到另外一個層次！
直到有一天，你看著靜態頁面覺得無聊透頂，開始想要做出一些酷炫的動態操作，於是你從網路上搜尋到了「 DOM」 這個名詞，它是一種用來操作瀏覽器根據 HTML 產生的頁面內容節點的一個應用程式介面，也因此使 JavaScript 可以透過 DOM 來操作頁面中的各種內容元素，進而達到「動態」的操作目標。
掌握網頁開發，透過 JavaScript 操作 DOM，打造具有豐富互動的網頁
如此，你也因為入坑了 DOM 的學習，又發現一片曠野綠洲，川流之間延伸了很多程式概念，像是：事件處理、事件傳遞、抽換更新顯示的內容等等技巧。至此你也漸漸掌控了頁面，使其動靜皆宜、心曠神怡，心中的綠洲滿是鳥語花香！
直到有一天，你在 Google 搜尋列上搜尋著關於你這片綠洲的未來，發現當你每每輸入不同的資料並按下 Enter 那一剎那……都會產出不同的頁面內容結果！你不禁開始詫異與好奇：「難道非得要朕做出上千上億個 HTML 來呈現頁面結果嗎？」
「後端資料串接」其實也是 JavaScript 學習的重要環節，你會在這個領域下開始學習各種技巧，諸如 XHR 架構、fetch 函式、Promise、async/await 等等的非同步操作手法，讓資料能夠在適當的時機、適當的頁面區塊中被建立、讀取、更新、刪除（簡稱 「CRUD」）。你也從實作中慢慢理解到瀏覽器如何透過 Event Loop 機制處理同步與非同步的程序。
學到到這邊，你熱淚盈眶，感謝前端工程這片深古幽情的境地！
其實在前端工程的程式修行道路上，是個無止境的漸進過程，其間風風雨雨卻也樂趣無窮！
學習 JavaScript 需要沈得住氣、勇於面對它這樣的多變與任性，並且持續從錯誤中探究它的運作原理並修正自己的認知。其實就像對待自己的另一半一樣！一但能夠好好掌握，你將會培養出一顆謙卑的態度來面對軟體開發，並且也能體會學海無涯的道理！這就是軟體工程的真諦。
前端工程師的技術反思
如何能夠成為一個好的前端工程師？技術或許是的一個必然的取向，但我認為真正重要的是要如何用更專業的態度面對當前的需求問題，學習去提升對於需求面的反思與內省，在能夠掌握上述的各種技術命題後，你是否能夠多去設想一些情境？這將會影響一個前端工程師（或甚至是軟體工程師）的一個內在價值！
這些情境可能是：
- 如何讓文章在頁面上更加容易閱讀，有沒有什麼好的介面想法可以提供給設計師或是與他們討論？
- 如何提升頁面讀取的速度，有哪些工具可以幫助實現？是否需要團隊的其他人協助？
- 哪些開發工具可以更快速地提升我或甚至是團隊的開發產出？
- 如何學習不去被動接收被交付的需求任務，而去適當地主動提出自己的疑問與考量，協助專案更佳全面地被審視與建立，也能夠讓團隊的人了解你的做事風格與思維過程。
如果你能夠無形中去更雞婆一些，相信你會看得更多更廣！你也可以在開發的過程中更順暢！並且心理是富足（對需求有脈絡、對開發有目標）的：）
很高興你認真地讀到最後，相信你已對前端工程師的養成脈絡有更深的了解，或許有些技術是你尚未掌握的，也或許有些你已經有所體認！對於能進入前端工程領域的你，也應該感到驕傲！
因為你有著公司的門面的匠心，你也比別人更在乎產品的實際操作體驗；你能夠在團隊開發中理解設計師的美感需求，你也能夠從後端資料的串接之間理解商業邏輯與客戶需求之間的轉化過程。只要你能持續深耕並發現問題，前端工程將會帶給你不一樣的開發體驗，並從中拓展出別於一般人的產品開發思維，也或許能夠在更遠的未來給予開發團隊或產品帶來更多的正面影響！
