ExplainThis 全端開發雙週報 #5

成為資深前端工程師之前要先掌握建構工具、37signals 遷離 AWS 每年省超過 150 萬美元、Amazon 工程總監分享的 25 個技術面試要點

ExplainThis

Jul 2, 2023

[前端工程] 成為資深前端工程師之前，要先掌握前端建構工具

想要晉升資深前端工程師，你不只要會寫程式，還需要掌握前端生態系。前端生態系中的一個重要環節是建構工具 (build tool)，在《Building and delivering frontends at scale》一文中，總結了過去數年來的前端建構工具沿革。

在談前端建構工具前，模組化 JavaScript 是不能忽略不談的。從最早期用 IIFE，到後來 CommonJS，再到 AMD 與 UMD，有好一段變革，直到 ES2015 才總算有 ESM 原生支援模組化。在 ESM 出現前，前端社群會使用 Webpack 等工具，讓原本不支援模組化的瀏覽器也能有模組的機制。透過 Webpack，我們可以在開發時立即看到改變，同時在建構時可以有最佳化的打包。然而 Webpack 雖然強大，在過去為人詬病的是配置 (configuration) 複雜度高，對於大型專案來說比較難維護，以及效能不太好等問題。這也是促使 Parcel (首創不用配置)、ESbuild (效能大幅提升) 等工具出現。

而有了原生的 ESM 後，社群也出現 Rollup 這個善用 ESM 來做 tree-shaking 的工具，進而達到最佳化的打包。因為 ESM 引入是靜態的，所以可以從中分析依賴的關係，同時因為 ESM 允許多個輸出，所以可以更簡單辨別哪個模組用了另個模組。這讓打包工具可以更容易辨別哪些模組其實沒有被用到，在建構時就可以移除掉 (tree-shaken)。

到了 Webpack 5，模組聯邦 (module federations) 的概念被提出，這讓我們能夠在執行環境 (runtime) 時，從別的建構產物中，引入某個模組。因為模組聯邦，微前端 (micro frontends) 也變得更加容易。除此之外，近幾年崛起的 Vite 與 Turbopack，則是把建構工具的開發者體驗與效能，帶到了一個全新的高度。

隨著前端建構工具的演進，可以預期前端的架構也將變得更加分散式。在未來，我們可以期待新世代的建構工具，將帶開發者更靈活、更好的效能，以及更棒的開發體驗。

[後端系統設計] 該選雲端嗎? 37signals 遷離 AWS，每年省超過 150 萬美元

Ruby on Rails 發明者 DHH 上週發了一篇討論度極高的文《We have left the cloud》，說他共同創辦的公司 37signals 正式登出雲端，轉而使用完全自架的基礎設施。這篇文章之所以討論度高，是因為雲端幾乎是現在公司在基礎設施方案的首要選擇，但 37signals 反其道而行，從原本採用 AWS，轉成為自行架設。其實在今年初 DHH 就發文表示 37signals 將遷離雲端，而在半年後的今天他們也完成了整個遷離程序。

你可能會問，為什麼 37signals 要這麼做? 原因很簡單，因為這樣一年可以省超過 150 萬美元，以及能獲得性能更好的硬體。他也在文章中呼籲，任何中型以上的公司，假如沒有去計算選擇雲端比起自己管理硬體的成本，都是在財務上不盡責的。

但與此同時，他也不認為所有公司都應該跟他們的做法一樣。特別是新創公司，因為在草創初期應該將心力放在核心業務，選擇雲端解決方案，可以用相對低成本且快速的方式開始，會是更適合的選擇。畢竟在應該專心於核心業務時，還要分神去管伺服器與資料庫的維護，這將大幅拖慢核心業務的開發。

從 37signals 的案例可以看到，在系統的設計與工具選擇上，沒有最好的，只有最適合的。就像在系統設計的面試中，唯有在了解情境 (context) 與限制 (constraint) 下，才能夠給出最適合的設計方案。所以千萬不要盲從地跟隨所謂的最佳實踐，要有獨立思考。如果對 37signals 具體如何遷移有興趣的人，可以詳讀《De-cloud and de-k8s — bringing our apps back home》一文。

[軟體業職涯] Amazon 工程總監分享的 25 個技術面試要點

上週在 LinkedIn 上面，Amazon 工程總監 Omar Halabieh 分享了 25 個技術面試的要點 [連結點此]，看完之後覺得有幾點特別有感，在本期雙週報與大家聊聊。

他的第 2 點提到要意識到面試官想要你成功 (Recognize that interviewers want you to succeed)。有一個常見的面試誤區是，誤認為面試官是要來把你刷掉的。確實有些面試官的風格與方式是如此，但多數的面試官 (或說在一個良好工作文化的面試官)，在面試的目的不是要把你考倒，而是找未來一起共事的人。就像跟同事合作，彼此都會希望團隊一起成功，用這個角度看待面試，會讓你跟面試官能有更好的化學效應。

第 5 點跟第 10 點談到，要有實際的深度案例，來描述過去做過的專案。這點在越資深的面試，會顯得越重要。因此平常在工作時，遇到困難的事情，可以盡量主動提議要負責。因為當你累積了解決困難問題的經驗，除了自己的能力值提升，在未來要找新工作時，也有更深刻的故事可以說。

第 24 點提到，在每次面試完都反思自己在面試時的表現。反思與檢討是投資報酬率很高，卻很常被人忽略的一件事。面試表現不好時，與其讓自起沈浸在失落的狀態，不如好好把沒有答好的問題，練習到可以流暢回答。即使面試表現不錯時，也可以進一步思考哪邊可以做更好。

除了上面特別提到的這幾點，在 Omar Halabieh 貼文中的每一點都很值得正在面試，或是即將要面試的人參考。假如裡面有要點是你目前還沒做好的，不如趁這機會改善。

本期推薦

Google 傑出工程師 Kelsey Hightower 宣布從 Google 退休，在退休的感言中提到「我花了過去 25 年學習如何工作，我希望在接下來的人生學習如何生活」，這句話值得每位工程師深思，工作之餘也要好好生活呀。
MDN 發表 AI 助手，學網頁開發更容易了。假如你過去學網頁開發的路上有挫折，或是不擅長直接看文件，現在有了這個 AI Help，基本上就等於有個網頁開發家教。問中文也完全沒問題。有興趣的人快去試試吧！
串流式的資料傳輸方式 (streaming) 受到越來越多應用程式採用，這一篇《An Introduction to Streaming on the Web》深入淺出地講解如何實作。
在前端框架百花齊放的今天，該如何打造前端的設計系統?《Building a modern design system in layers》一文提供了一些思考的角度
Figma 推出了 dev mode，更好整合設計到前端的交付流程 [連結]
Reply 是前端社群很熱門的 debugger，最近推出了 Test Suites，讓你更容易在瀏覽器測試有 bug 時，可以輕易抓出問題點 [連結]。
最近在社群看到 fffuel 做的免費 svg 生成工具[連結]，裡面有非常多不同的 svg 類型，平常有在做 side project 的人，很推薦玩玩看這系列工具。

AI Your Summer 系列活動

ExplainThis 共同創辦人 PJ 將擔任這個暑假 ALPHA Camp 舉辦的 AI Your Summer 活動講者。如果趁暑假持續進修精進自己，推薦大家報名 AI Your Summer 活動

活動日期：2023/07/11 (二) 19:30~21:00
活動地點：Zoom 線上直播
報名連結：https://www.accupass.com/go/ai-your-summer-0711