方格精選

前端工程師都在忙些什麼？

金天

2020/11/22閱讀時間約 15 分鐘

在一個風和日麗的下午，又一個JS模組/框架誕生了！

我為這個議題準備了大概兩天時間，我憑著記憶回溯過去十年到底前端圈發生什麼事，再花了不少時間去求證和紀錄分類，然而這個議題是在太大，我最後選擇了一個方向來撰寫這篇文章，不過有興趣的人，可以看看我的筆記-

TLDR -

入門前端 — 做畫面、接資料

進階前端 — 做流程、搞優化

資深前端—做系統、弄架構

歡樂老時光 — 2007–2009

在那個年代沒有前端工程師這個職位，而從事網頁相關的工程師一律通稱Web developer，最主要的工作，就是把PSD設計圖，轉成HTML+CSS，也基於當年的瀏覽器限制，畫面都使用拼圖狀的邏輯來思考，所以大家都說「切版」。

但世界的另外一個角落，已經有一些暗湧，W3C積極的推廣CSS和HTML，並強調其編輯能力極高，遠超出你能想像的，CSS Zen Garden 以行動證明了這一點，身為設計師的Dave Shea用行動告訴大家CSS可以怎麼把玩設計，在不換HTML的機構下，僅僅一份stylesheet就能讓網站改頭換面。

然而瀏覽器的進化速度沒有跟上，當年有個著名的小遊戲，Acid2，這個遊戲可以測試瀏覽器是否通過網頁標準化，然後這遊戲一推出的時候，無人通過，大約在2008年，全部瀏覽器正式通過測試，表示瀏覽器已經就位了。

在同一個時候，世界上第一部支援標準網頁的移動裝置出現——iPhone；偉大的jQuery也幾乎同一時間，發布1.1穩定版。

賈伯斯高舉iPhone的瞬間，不僅僅是意味著一個劃時代的變革即將來臨，也間接的掀開了前端世界的窗紗。

而在那個樸實無華的年代，加個jQuery就是一個高級的表現了。

附上我當年重金買下的只有8G的iPhone

混合開發，前端生態 — 2009–2010

Github、npm凝聚了世界各地的開發者，在一個春秋的時間，就發布了好幾個影響力至今未減的開源專案，即便部分專案已經被後來者替代，但無疑不是延續他們當時的精神。

Backbone.js提供了一個全新的網頁開發體系，實現真正意義上的SPA。

前端開始進行package管理，表示可以更有效率的迭代開發和協同開發；css preprocessor 出現，當中最多人使用的是SASS 和 Less，純CSS漸漸淘汰。就連我當年跟同事說

「我寫CSS就很快了，有必要用它嗎？為什麼？」

我為當年的無知道歉，因為我用了之後，就回不去了。

當時有人預言，基於NodeJS將會改變整個遊戲規則，JS的能力將會越來越約強大，這句話在未來的幾年也被驗證無誤。

然後在這個時候，集成全部knowhow的人，他們都有一個稱呼，叫做「前端工程師」

而那時候常見的前端領域的事有：

1，基於 AngularJS/ RequireJS / Backbone js/ Knockout js / 這些框架實踐SPA，完成前後端分離。

2，跨平台開發，PhoneGap是這行業的元老。

3，和設計師合作，量產模板。

4，無數NPM模組量產中

這個時期流行一個設計圖，附上三個裝置的預覽圖（帥

即便如此，但前端工程師的產出和以前差不多，就是前端工程師有了許多工具增加開發效率；這個時候已經開始做跨平台的事了，只是因為效果不如預期，所以並沒有因此而變成主流，但萌芽期就看出大家的野心。

而在這個年代，大部分有前端體系的團隊，都不會選擇傳統的網頁開發模式，從此埋下日後前端的技術債。（逃

開發體系，模組化 — 2011–2013

既然有了那麼多工具，工程師就開始變懶，沒有最懶，只有更懶，我們連壓縮圖、concat文件、複製檔案這些事都不想做了，於是出現了Grunt和Gulp這些Task runner，它的出現又掀起了一系列的開發環境風氣，從此前端工程師真的只需要專注在程式碼上，其餘的事，都自動化完成。

2012年5月，Chrome正式超越IE市佔率，大家開始可以脫離IEhack惡夢。
2013年，React發布，Facebook全部進入這個前端宇宙，有別於AngularJS的觀點，它是一個完全View端的架構。

在這個年代，人們都在吵架，吵些什麼？隨便舉個栗子，

Browserify vs RequireJS
Gulp vs Grunt — Less vs sass
React vs AngularJS

每個關鍵技術需求背後，都有超過一種選擇，這就是之後有了那張，https://roadmap.sh/frontend 的選型圖的由來。

當大家還在觀望的時候，國外說得出名字的科技公司已經引入的JS體系並完成產品化，這是一枚強心針，從此前端工程師需求大增。

而在這群SPA大戰另外的角落，全球CMS大戰， Wordpress 3.0 在以市佔30%領先老牌Joomla、Drupal，這意味背後的模板市場需求規模之大。

仿原生手機框架Sencha Touch出現，雖然它並沒有成為主流，但它是僅次於jQuery Mobile以外的選擇，它們都確實做到了仿真度極高的Mobile web （app體驗），它們給人帶來了足夠多的想像力和信心。

大名鼎鼎的Bootstrap2發布，可能很多人都不知道，當時它也有比較對象，Foundation，他們兩者都有強大的使用群。

Webpack 出現後，接管了大部分的task和打包工作，漸漸成為最多人用的bundler。
而在這個時候，細分化開始出現，而每個開發團隊又會選擇自己的喜好和配置，就有了後來的web Boilerplate，通常是一套設定好的開發環境。而這個階段的前端….

靜態網頁/CMS模板 — gulp/Grunt + sass/less/css modules + jade/HAML + browserify
React — Webpack + React +babel + es6 + sass/less/css modules
AngularJS — 嗯…自成一體
MEAN stack — MongoDB, Express, AngularJS, and Node.js（全端始祖？

當然這不是所有，而以上四種剛好是我比較熟悉的，當時有關前端宇宙的資訊已經大到我已經無法全部關注，我只能挑選我有興趣的來繼續了解。

資料流，體驗最佳化 — 2014–2016

NPM統計共有11萬個packages，前十大使用國家為：美英印德法加中俄日巴，官方估計中國用戶比實際的更多。vue基於巨人肩膀誕生，開箱即用的特性迅速崛起；GraphQL 發布。

前端宇宙的各個寶石視乎都收集完畢，但就是差了一點，SPA的痛點就是數據分散，常常不知道自己的資料流向去哪裏了，又或者低效率的API溝通

PWA被提出，它要解決的問題就是用戶體驗，尤其是手機的用戶體驗。而這項領域背後的是一連串的技術坑，你以為他是一個名字就以為只有一個坑嗎？錯了，PWA只是一個通稱。

資料既然是重點，那肯定需要有人來解決，於是Redux橫空出世。與其對應的有MobX，他們兩者都是處理資料（狀態管理系統），具體差別是什麼我不清楚，但按照語法來看，MobX的的設計理念是functional programming，細分一點是Functional Reactive Programming，它是一個Immutability的數據流，每次操作都會回傳具備Monad特質的物件。相比之下，Redux的數據相同是Immutability，但理解起來就簡單多了。

vue基於巨人肩膀誕生，開箱即用的特性迅速崛起，從此大量新前端投入，跳過了環境建設的階段，因此對環境建設相關的領域陌生。

混合型框架出現，意思是建立在單個或數個框架以上的框架，例如Next。

從此你要學習A -> 其實他是從 B + C + D 而來，而 B 是從 E + F 而來；簡化了開發環境，甚至不需要自行建設環境。

WebAssembly 2019 列入W3C標準；CRA 官方支援 TypeScript ；Svelte 成為六大主流之一；JAMstack 成為主流開發之一。css in js 出現，即將統一前端宇宙。

除了以上的那幾點以外，前端還在…
React Native 2015/ionic 2013 發布，最接近APP體驗的前端APP開發框架誕生，前端寫APP的時代來了。
PWA / AMP 是網站標準改善作業項目，弄一弄又是幾個月過去了。
JS無性別（型別的時代結束，typecheck 正夯，弄一弄又是幾個月過去了
Svelte 成為六大主流之一，人們厭惡了shadow DOM了嗎
babylonjs 微軟發布3D框架，除了它還有老牌的three.js，對啊，前端可以寫3D的網頁遊戲。
TensorFlow js，Google 的TensorFlow推出JS版本，嗯，你可以來玩一下AI了。
JAMstack，又是一種開發型態（其實就是2013年出現的那種靜態網頁的進化版）
Serverless 和前端有什麼關係？那麼 Front-End Ops 和 BFF （backend for frontend）應該就跟前端有關了吧。
這個時候，前端已經涉及網頁、移動端、遊戲、AI、優化、維運等等領域。

可免則免，快狠準 —2017–now

前端框架進入收斂期，現在追求精簡化開發流程，輕量化APP出現，JS跨平台成型。混合設計和開發能力的設計師出現，比較火紅的應該是Netflix，基於他們的產品特性和市場需求，逼的他們把UI工程玩的非常極致。

輕量化是因為經過歲月的洗禮，大家也嘗試過了各種開發模式之後，保留了最具作戰力的生產方式，而根據移動APP的飽和，MiniAPP首次在宇宙中露面，不料馬上引來浪潮，至今MiniAPP玩得最透徹的應該就是中國。

JS跨平台已經不是夢，在電視機上ReactAPP，在裝置裡跑Node.js。

這個時期出現的前端框架大多數都是面向業務需求，他們並沒有為前端宇宙帶來多少波動（相比之前那幾次）更多的事，各家科技巨頭紛紛推出自己的前端體系，當中跟非工程師的人接觸最多的應該是Bot.

Bot市場是一塊大餅，每一家通訊軟體無一不推出自家的Bot。

https://research.aimultiple.com/chatbot-ecosystem/

Electron 推出，用Web stack寫出desktop APP的時代來了；Static site generators 不少於10種；Google 推出 puppeteer，是想連測試領域都加入嗎；WebAssembly 跟刺客一樣，在WebAssembly 2019 列入W3C標準，但至今也沒有看到它有多大的動靜，但大家對他的評價都預期的好。

CRA 官方支援 TypeScript，未來的JS是不是都會邁向這個方向，我想答案呼之欲出。

我剛剛不是說了，有人在201x～2015年之間埋下了許多前端技術債，那是很合理的，因為當時並沒有明顯的主流，如果維護者沒有是時刻保持框架的完整性和跟進進度，很容易在這個時候就陷入無法升級的困境。

為了避免這種情況，有一種開發體系應然而生 —— micro-frontends。實際上它也已經不是新領域，甚至它已經實踐在產品上行之有年，例如Spotify、Ikea、淘寶等都已經大量使用這種開發體系。

未來展望

對於成為一名前端工程師可以做得事情太多了，以上我舉例的，都只是我粗淺認知中的冰山一角，

前端 + 設計：D2C（Design to Code）領域，這類型的前端專注在把設計圖有效轉為Code，可能需要知道的技巧包括AI、設計、優化、視覺化。比較知名的玩家如Wix、淘寶、squarespace。
一碼多端：跨端開發從PhoneGap開始就沒停過，目前主流的玩家有Flutter，一套程式碼跑在APP、web、desktop上。
PHA/PWA/Hybrid app：跟以上的差別是，這類型的體系不追求取代，講求相容，通過混合開發的模式達到最佳的體驗和效果。
去框架化：設計要考慮的應該縮小到元件的尺度上，講求不依賴框架的元件設計，歡迎來到 bit，
micro-frontends：你有沒有想過如何管理超複雜的SPA？不妨試試看分開管理，會變得比較簡單，提示，這是一個未知的黑洞。
優化工程：這是一個加分項目，優化工程涉及好幾個領域，包括UI工程、frontend devop、開發環境建置等等，是一個綜合技。
前端視覺化：顧名思義，看demo
前端遊戲化：另外一個大洞🕳️