· 2 分鐘閱讀
Svelte 筆記(1)- 沒有銀彈
# 前端在前面的章節有提到,Svelte 讓我愛不釋手。Svelte 的核心概念在於「透過靜態分析+編譯減少 runtime 做的事」,來減少 Virtual DOM 做 diff 的時間和一大包的 runtime。
但是 Svelte 走的路也註定會遇到一些問題,最主要的就是 Svelte 沒辦法在 runtime 當中幫你做太多事情。
- 像是這個 issue(Render slot fallback content when there’s no content) ,svelte 在 slot 內容為空時應該要渲染
fallback,不過因為裡頭有像這樣的程式碼:
<Box>
{#if foo}
something
{/if}
</Box>
所以靜態分析時只能知道裡頭有個 if statement,然後判定就會是有內容,實際上渲染就會是空白而不是用 fallback。
- 雖然說 compile 是 compile,但也不是沒有 runtime,背後還是有一套更新機制幫你追蹤 dependency、更新,只要 browser 沒有實作 reactivity 的一天,框架就勢必要處理這件事。另外現在的 compiler 雖然盡力減少打包出來程式,但是當功能越用越多,bundle size 可能就會逐漸追上來了,在比較大的專案可能差別就不會那麼明顯
- 沒有 Virtual DOM,另外一個問題點是測試,Virtual DOM 有另外一個好處是提供了抽象,方便你依照介面實作。不像 React 那樣非常容易測試,當然這就牽扯到開發者體驗與使用者體驗了。
另外在寫程式的時候我很不喜歡看到 「XXX 框架就是屌!其他都是垃圾」,這種想法不僅在自己的職涯或是技術上都是原地踏步,而且蠻要不得的。
當然這也不是說世界大同大家都好棒棒,這個好那個也好,選擇框架/語言的同時也代表著你的品味。
「乒乓」有一句台詞我很喜歡:
卓球に人生をかけるなんて気味が悪い(為了桌球而賭上人生真是令人作噁)
雖然說作噁有點太誇張了啦,不過的確沒有什麼框架一定要死抱著不行,你的實力應該是取決於駕馭框架的能力,而不是被框架駕馭。
總結起來恐怕要在公司內引入這個框架或許還要再觀察一陣子,但是要用來快速做個小專案(甚至中型)個人覺得非常好用,而且馬上就可以進入開發,總之是一個會讓我 ワクワク 的框架,期待後續的發展。
相關文章
- CSS field-sizing — 用一行 CSS 讓表單元素自動調整大小textarea 自動調整高度,以前只能靠 JavaScript 監聽 scrollHeight。CSS field-sizing: content 一行就能取代,支援 textarea、input、select。本文整理舊做法的痛點與 field-sizing 的用法。
- 讓你的超連結底線更好看:text-underline-offset預設的情況下底線跟文字很接近,有些設計師不喜歡這種樣式,我自己也覺得沒有很好看。
- 為什麼網頁不應該追求 Pixel Perfect只有在 Pixel Perfect 很重要的時候才應該關注他,否則往往會讓你得到一個雙輸的局面。
- 用 CSS HSL 來寫顏色吧!(以及更好的方法)在網頁開發中,傳統的 HEX 和 RGB 顏色表示法雖然廣泛使用,但存在不易閱讀和直觀性不足的問題,且在廣域的色彩空間如 P3 下表現能力受限。HSL(色相、飽和度、亮度)提供了一種更直覺的顏色定義方式,讓開發者能更輕鬆地理解與調整顏色。HSL 通過色相、飽和度和亮度三個維度來描述顏色,使得顏色的調整更加人性化,特別是在設計系統中,HSL 能更好地呈現色盤的亮度變化。