preloader
心得

Do Not Recommend Use Angular as New Product Frontend Tech Stack 2023

Do Not Recommend Use Angular as New Product Frontend Tech Stack 2023

Angular 號稱支援 webpack 的 hot module reload 功能,簡稱 webpack-hmr 套件 ,但事實上僅是有限度支援,即使到 Angular 最新穩定版大版號 16 (寫文章當下2023年),Angular v16 現階段仍尚未在 lazy-loaded module 支援 webpack-hmr ,而 lazy-loaded module ,是很常見的開發架構方式 。

Hot module reload 是什麼呢? 它能做到不須令瀏覽器重新整理畫面,就能立刻顯示剛才開發者在程式碼編輯器裡修改的 css 樣式。在 2017 年以前,有一定比例的開發者在開發環境中修改 css 樣式,仍需以手動或自動的方式,令瀏覽器重新整理畫面,以反映修改後的畫面樣式。

雖然 Angular 官方已在 v11 宣稱支援 hot module reload 功能,但依照網路上其他人和我的實驗,那僅限一般 module 。 依照官方 在 github 的相關討論串 ( angular #39367 追蹤此功能的開發進度, angular-cli #24755 社群高手提給官方的支援 hmr 方向 ),一直到 Angular 今年目前最新 v16 版本仍然未能讓 lazy-load module 使用到 hot module reload 功能。

社群有人試圖暫時的處理方式( angular-hmr-lazy-components on GitHub ),但我覺得太複雜,所以不想用; 另一個解決方法是使用angular-hmr 套件,仍是對 lazy-load module 無效。

我在升級公司用 Angular 框架 + Ionicv3 打造的產品時,因為產品用了許多 Angular 的 lazy-load module 方法做 modal 畫面,而且功能的使用路徑埋得很深,它有一個一百多個畫面與功能,大約有八成以上的比例是使用 lazy-load module 方式載入,同時又因為升級 Ionic v3 到 v4 有很多畫面樣式的 breaking change ,需要一邊修改樣式一邊看修改後的效果,所以修改畫面樣式和版面時都需要等待很多時間重新整理畫面,以確認是否改成想要的樣式。這產品Angular 對 lazy-load module 在開發過程的內容更新,仍然是很粗暴地和簡單的強制觸發瀏覽器的重新整理功能,令畫面重新經過元件的生命流程。在我這樣的升級情境下,Angular 的開發者體驗(DX)劣勢,很明顯地暴露出來。

因為 Angular 的 lazy-load module 不支援 hmr 功能,導致讓我修改程式碼時,覺得 Angular 開發團隊在 2019 年到 2022 年的開發方向可能走錯方向了,遲遲不提升開發者體驗中最關鍵的功能之一,而是做一些我認為較為次要的功能,例如: standalone component。我認為 standalone component 那只是提供較為簡單的撰寫方式,他們企圖簡化寫法是為了吸引更多的新人使用 Angular,卻較不重視既存的使用者心聲。

很多 To Business side 的網頁軟體是使用 Angular 開發,希望是更快速的開發功能和修正問題,更專注地解決問題,而不是花時間學其他的撰寫方式。我要學更有彈性的思維和做事方式,不需要用這種方式。它的生態系明明是單一話語權為主體,社群支援為支部,卻想學 React 百家爭鳴的方式,也許 Angular 正處於 React v16.8 後的 react hook 寫法改變期?

社群對開發者體驗有顯著提升的 hot module reload 功能 request 討論串,最早從 2016 年發起,至今 2023 年仍未完整支援,以下是節選的討論串: