（原文發表於 Logdown，重新檢視及改寫過後移植到這裡）
前言
會寫出這篇是因為我一個朋友在 Front-End Developers Taiwan 裡面問了這個問題，完整原文如下：
誠心請問：前端工程師的價值在哪？
我是很想走前端、視覺、美感的人。但是一邊在路上，一邊卻不自主的質疑著這些東西的價值在哪？
比方說前端就是一些畫面、表單，boostrap 套一下或是用 Material UI 套一下，就變成 RWD。不夠的東西再自己用 CSS 手刻一下。
但大都時候不就是個畫面嗎？就算很醜好像也沒什麼人在意。”功能有出來、資料是對的就好了。”
目前我想到的是像 D3.js 這種視覺呈現，是後端做不出來的東西。除了這個還有其他價值嗎？
這是我想到的價值：
(1) 做畫面、用 RWD，讓各個裝置都能有對應畫面
(2) 如果載入時間太久，前端有責任透過微調，讓它的載入時間變短。
(3) 像 D3.js 那一類的視覺呈現。
一直想很問問大家，請問前端有什麼地方是價值所在？
其實這個問題真的很有趣，因為從這個問題就可以看出大家對前端工程師的定義似乎都不太一樣，而這種根本性的差異也會導致答案不一樣。
以我說淺不淺說深不深的前端經驗來看，我認為前端工程師的價值可以區分為兩種，一種是核心價值、另外一種是附加價值。
附加價值
先從附加價值開始談起，這部分的價值屬於「跟其他職位的人溝通的專業度」。
首先，設計絕對不是前端工程師的核心價值，那是設計師的。使用者體驗也不是前端工程師的核心價值，那是使用者體驗設計師的。
可是前端工程師如果有設計的 sense 或是有 UX 的 sense，那當然是很不錯的一件事情，跟這兩個職位的人溝通起來也會比較流暢。
因此，我把這種價值稱為「附加價值」，而不是「核心價值」。
可能有人會問說：「可是有些公司的前端工程師還包設計包 UX 欸」，沒錯，但那是因為公司期望用一到兩個人的薪水聘到可以做三個人事情的強者，可是這種意義之下的前端工程師不在我這篇文章的討論範疇內。
這篇文章的前端工程師指的是「專門做前端」的工程師，意思就是不會要你去畫設計稿，也不會要你去弄一些有的沒的。
或者說得更清楚一點，就是在專業分工之下會有的前端工程師。在這種狀況下，設計稿會由設計師來負責，UX 也會有專門的人來負責，產品規格會有 PM 來負責，後端會有後端工程師來負責。
這就是我說的前端只專門做前端，其他領域他可以給建議、可以一起參與討論，但通常不太會有決定權。
核心價值之一：工程師的價值
在前端工程師的核心價值裡面，也會包含兩種價值，因為前端工程師這個職位本來就是：前端 + 工程師兩個名詞組合起來的。所以有一部分是工程師的價值，另一個部分是前端的價值。
我們先來談談第一個部分：工程師的價值。要知道哪些是工程師的價值，而哪些又是前端的價值，只要把同樣的命題套用到「後端工程師」或是其他職位的工程師上面，看適不適用就對了。
例如說：「要選擇哪一套 Framework」這個問題，無論是前端工程師還是後端工程師都會碰到，所以顯然是工程師的價值。
但如果是：「要針對哪些瀏覽器做優化」，這個就顯然只跟前端有關（因為後端也碰不到瀏覽器），所以會歸類到前端的價值。
有關於工程師的價值，可以參考：接近 2016 年底的我是否有資格稱為資深工程師。
核心價值之二：前端的價值
把附加價值跟工程師的價值談完以後，終於可以來談談只專屬於前端的價值了。
要知道前端工程師的價值在哪，可以用一個很簡單的問題來做區分：
一個好的網站跟一個壞的網站差在哪裡？
如果我們可以列的出差別，就知道前端工程師的價值體現在哪裡了。
但請注意這個差別並不是畫面美觀的差別，畫面美觀與否是設計師的事情，在這邊要先假設兩個網頁都是按照設計師的要求一模模一樣樣刻出來的。
而這也不會是網站好不好用的問題，「這按鈕太小按不到」、「這結帳流程太冗長」，這些都是 UX 的事情，在這邊先假設公司有一個 UX desinger 專門在做這些。
排除掉 UI 跟 UX 以後，壞的跟好的網站差在：
- 一個壞的網站可能會在不同裝置上跑版，好的網站不會
- 一個壞的網站載入時間可能是 10 秒，好的網站只要 1 秒
- 一個壞的網站開場動畫很 lag，好的網站超級順
當然，如果你再仔細一點列還可以列出更多，我這邊先簡單列出三點，但是就可以看到一些端倪了。
前端是設計稿跟「現實」的橋樑
一個網站的畫面「應該長得怎樣」，是設計師的事。可是網站「實際長得怎樣」，就是前端工程師的事情了。因為這就是前端工程師的工作內容嘛，負責把畫面顯示出來。
所以前端工程師的價值之一在於：「你對於設計稿的還原度有多高」，你該怎麼利用 HTML、CSS 與 JavaScript，把原本只是一張張圖片的設計稿，轉成在瀏覽器上面可以看到的介面？
除此之外，既然你是負責畫面顯示，就代表所有的載具你都應該要顧慮到，像是平板電腦、手機等等，必須保證在各個裝置上看到的網頁都跟設計師的設計稿長得一模一樣。
這難不難？靠北超級難啊！光是單位的選擇你可能就要思考很久了，px、 pt、em、rem、vw、vh、vmin，要用哪一種才能保證在各個裝置上看到的大小是差不多的？
還要考慮的是瀏覽器兼容性，有可能一個網頁在 Chrome 上看起來水噹噹，在 IE 上變成美丁美當，整個慘不忍睹。所以厲害的前端工程師知道各個瀏覽器之間的差異性，會盡可能確保在每一個瀏覽器上面看到的都是一樣的畫面。
這難不難？這也靠北難啊，每一個瀏覽器的實作都不同，有些很好用的 CSS 屬性在某些瀏覽器上面就是沒有，你能怎麼辦？
而且不要忘了，在這個 hybrid app 橫行的年代，你要支援的載具多了 iOS 跟 Android 的 Webview，又是兩個麻煩的東西。
這其實就像是專業的設計師在設計 Logo 的時候，需要考慮到 Logo 在各個地方的呈現，不只是網頁、文書，也有可能出現在衣服、杯子等等的東西上面，必須要一併考慮進去，設計出各個場景都能夠使用的 Logo。
前端既然是設計跟現實的橋樑，就代表也必須跟設計師溝通，在理想跟現實之間取得平衡。例如說設計師今天想要做一個超級酷炫的開場動畫，你也覺得這個超屌的啦做出來一定很猛，可是設計師跟你說他要用 Flash。
◢▆▅▄▃-崩╰(〒皿〒)╯潰-▃▄▅▆◣
大家都知道 Flash 已經是一個快死掉的東西了，瀏覽器慢慢在拋棄它，放上去之後說不定只有兩成的人看得到你屌炸天的開場動畫。那怎麼辦呢？一個專業的前端工程師會建議設計師可以用 HTML5 來做動畫，至少支援度會比 Flash 要來得高。
或者說如果動畫沒有很複雜，專業的前端也要有能力用 JavaScript 或者是 CSS Animation 做出來。
可是做出來是一回事，效能又是一回事，說不定 CSS 刻出來的動畫只有慘不忍睹的 20 fps，那怎麼辦？當然就是前端工程師要去調整，要去知道為什麼這邊會消耗那麼大的資源，要知道該怎麼樣去優化。
例如說要用 transition 的話就要知道同樣是讓元素左移 50px， transform: translateX(-50x)比left: 0px快得多，或是backface-visibility: hidden跟transform: translate3d也都對增進效能可能有幫助。也要知道有will-change這個屬性可以用。
那如果最後還是不行怎麼辦？就要站在專業的立場跟設計師說：「雖然我也很喜歡這動畫，但這個目前在網頁上真的不可能實現」之類的話。
好，講了這麼多，要表達的重點就是前端工程師的價值在於：「確保網站最大化的還原設計稿，並且在各個載具上的觀看體驗一致」。
效能優化
上面有提到說：一個壞的網站載入時間可能是 10 秒，好的網站只要 1 秒。
身為一個專業的前端工程師，你必須知道怎麼樣去調整網頁的效能，讓它更快 render、更快載入。這邊推薦給大家一堂 Google 的課：Website Performance Optimization，修了保證你物超所值，裡面介紹到怎麼利用 Chrome devtool 去檢視效能以及如何優化。
網頁載入速度怎麼會那麼慢呢？這邊先假設「載入速度」指的是「下載速度」好了，慢的原因有兩個：
- Request 下載數量太多
- Request 回覆時間太久
也就是下載速度快慢跟下載數量的問題，針對下載速度，有價值的工程師可以提出很多建議，例如說利用 Cache 把圖片存起來，下一次就可以大幅縮短下載時間，或者是利用 CDN 儲存圖片，速度也會變得比較快。或是會跟你說有 Resource Hints 可以用，也可以多少縮短一些時間。
那針對下載數量的問題，就可以考慮用 CSS Sprites 把圖片集中在一起，或者是用 Base64 直接把圖片寫在 CSS 裡面，就可以省一個 Request（但也要注意會增加檔案大小）。
講到圖片，有價值的前端應該也會知道 jpg、png、svg、gif 的異同以及應該用在哪裡，甚至是嘗試比較新的 webp 格式，這些也都是調整網頁效能的一部分。
所以在這個部分，前端工程師的價值就在於：「如何使網頁載入的速度變快、效能變好」。
這些也是我認為前端最困難但也是最有價值的一部分。因為這方面的優化是永無止盡的，永遠都可以想盡辦法讓你的網站變得再快一點點。而且時間優化了，有時候其他部分（程式碼可讀性、部署的難易度）卻被犧牲了，這也是很值得思考的一個點。
你確定這些有價值？
有些價值是因人而異的，要看對象而定。
對一人當三人用的小公司來說，誰管你網頁從 2 秒變 1 秒，Request 從 20 個變 15 個，他們只管你能不能在最短的時間內自己畫設計稿、自己切版、自己把整個網站做完，讓他們好跟客戶交代。
在這種公司裡做前端，你的價值當然又會變得不一樣，價值取決於你能夠多快的把案子完成。但是我上面也說了，這種類型的前端工程師不是本文章所討論的範圍。
效能優化有價值嗎？當然有價值，尤其是你把規模放大的時候。
例如說我小時候年輕不懂事，js 跟 css 都不壓縮直接放上去，我們假設壓縮之後總共少了 10kb 好了，如果你的網頁一天有 1 萬個不重複瀏覽，就代表你一天節省的流量大約是 100 MB，一個月就大概節省了 3 GB！
聽起來滿多的吧！那如果像是臉書這種大公司，我們就假設一天有一千萬個不重複訪客好了，就算只有壓縮 1 kb，整體流量也少了 10GB。當你把規模放大的時候，很多細節都會變得重要起來。
「魔鬼就藏在細節裡」，這句話是我最喜歡的至理名言之一，你去觀察很多專業跟業餘的差別，就會發現一樣都可以把事情完成，但價值卻體現在這些細節裡。
業餘的前端可以完成一個網頁，載入速度普通、乍看之下不跑版，一切都看似平常，可是專業的卻能把載入速度加快一倍，並且保證在各個裝置上面觀看都有最佳的體驗。
總結
來總結一下，我認為前端工程師「獨有」的價值如下：
1. 確保網站最大化的還原設計稿，並且在各個載具上的觀看體驗一致
2. 如何使網頁載入的速度變快、效能變好
至於那些什麼畫面美不美觀、使用者體驗好不好，我都覺得不是前端工程師真正的價值所在（所以我把它歸類在附加價值，但確實也是價值的一種）。在一個專業分工的地方，那些都會有其他人幫你做掉，前端只要專注在上面這兩點就好。
最後拉回開頭的原 po 的問題，我認為這跟所處的環境有關。在他那邊的環境，前端只需要套套 bootstrap，不需要特別優化網頁，也不用考慮在各個載具上的情況，只要在自己電腦跟同事電腦上面可以看就差不多了，所以自然會很疑惑前端的價值到底在哪。
就如同我前面提過的，對於不同人、不同場合可能會有不同的價值。而這篇文章在討論的是「專業分工底下的前端工程師」的價值。