終於來到最後一天，今天就來分享在 Day 1 時提到的為什麼我們公司的新專案不是繼續使用 React 而是改用 Svelte

前情提要

去年年末我們團隊開始了一個全新產品的開發，因為它的性質較為特殊且上面給了非常非常非常大的彈性，所以我們算是把這個產品當作實驗室想幹嘛就幹嘛，也因此我們也開始思考要不要玩玩看其他框架。

我自己認為大部分工程師應該都是比較喜歡嘗試新技術的（喜歡折騰自己），所以我們當初決定不使用 React 大概有一半以上的原因是「想要使用新技術」。

Next.js 真的有點麻煩

在這個產品之前大部分的專案都是使用 Next.js 以及極少部分的 Remix，雖然 Next.js 的能力十分強大但這個產品不需要那麼複雜的功能，導致就算想要繼續使用 React 我們也一定不會選擇 Next.js ，主要是我們不需要 App router 、不需要 Server Actions、比起 webpack 我們更喜歡 vite 。

總而言之在怕麻煩加上手癢的前提下我們選擇不使用 Next.js (React) 了

為什麼選 Svelte

扣掉 React 後再評估自己要花多少心力才能順利導入後，我想選且我可以選的框架只剩「Svelte」和「SolidJS」了

先說說為什麼不是 SolidJS ，最主要的還是因為它相對年輕了點所以在整個生態系上我覺得還是略遜 Svelte 一點，以及 SolidStart 也是今年九月左右才發了 1.0 版，所以個人覺得還是不太穩定。

其實我覺得 SolidJS 還是一個可以關注看看的框架，一樣是捨棄 virtual DOM 且透過編譯器提升效率，而且 API 設計也跟 React 較為貼近，如果它再更成熟一點或許會更接近我理想中的選項。

Svelte 好在哪

至於 Svelte 我是看上他的「學習門檻」、「快速」以及「開發體驗」

畢竟還是要跟同事一起合作所以「學習門檻」還是一個相當重要的指標，Svelte 的 SFC(Single file componnet) 就是讓我覺得降低門檻的一個重要特性，基本上只要會 HTML、 CSS 和 JS 就能夠快速入門了。

「快速」這件事情除了理論上的性能以外還有「打包速度」以及「開發速度」，特別是跟 Next.js 比較起來，體感上快了不只一點。

Svelte 的 logic block 、 directives 和 rune 的設計讓開發體驗變得十分絲滑，特別是在狀態管理上省心不少。

所以 React 真的不好嗎？

即使我已經負責這個 Svelte 專案一季左右了，我卻陷入了一種 React 是我真正的歸宿但 Svelte 寫起來真的好舒服的奇怪困境。

我自己認為 React 的行為比較好預測，只要先知道了 closure 是什麼、每一次 render 其實只是 function 的重新執行、非 primitive type 在每一次 render 的 reference 都不一樣、Hook 背後其實是 Linked List 等等 JS 或者 React 的基本知識，就會覺得「哦，就那樣」。

雖然聽起來麻煩但至少是有跡可尋，因為大致上都能以「我現在是在寫 JS 而不是寫一個全新語言的思維在思考」，但 Svelte 直接把它當作一個新的語言或者說 DSL(Domain-Specific Language) 可能會比較好理解，雖然依然是用 JS 在開發但有些行為依然是透過編譯器才能夠達成，而這些行為就是我們必須額外去記的觀念。

所以雖然我在這個系列文一直有在吐槽 React 的各種地方，但我覺得 React 倒也沒那麼不堪，我依然認為如果今天要開發一個比較嚴謹或者該說公司上面會比較在意的專案，還是選擇 React 可能會比較安全。

也就是會被壓時程或者對產出比較要求品質的專案

但如果今天我是要開發一個簡單的網站、自己的 side project 我會選擇 Svelte，總而言之本來就沒有一個框架能夠涵蓋所有人的喜好以及所有場景的需求，就選擇自己習慣、開發起來舒服的框架即可。

當然所謂的「簡單」就因人而異了

感想

既然是最後一天不免俗地來寫些感想，這一個月讓我對於 Svelte 有了更深層次的認識，特別是對於Svelte 編譯器、 $effect 的行為以及 SvelteKit 的路由，雖然大部分是為了生出文章才趕緊去讀相關資料，但也因此讓自己有機會學習到原本在工作上沒碰到的知識，或許這就是參加鐵人賽最大的好處吧。

下一步呢？

畢竟這個系列文也是粗淺地帶大家瀏覽過一遍 Svelte 和 SvelteKit，如果因此對於它們興趣的讀者可以參閱以下網站來進一步學習 Svelte

1. https://learn.svelte.dev/tutorial/welcome-to-svelte

   就是 Svelte 官方教學文件內容從 Svelte 到 SvelteKit 都有，但因為 Svelte 5 還沒正式推出所以在狀態或者 store 相關的內容就會與 Svelte 5不太一樣。

2. https://www.youtube.com/@joyofcodedev

   一個蠻常發佈 Svelte 教學影片的頻道，我自己認為講的難度適中且更新頻率蠻高的通常新功能出來後不久就會有相關的影片了。

3. https://www.youtube.com/@lihautan/featured

   Svelte 的核心作者之一的頻道，雖然近幾個月比較少更新但可以回去翻翻以前講 Svelte 或 SvelteKit的基本概念還是會蠻有收穫的，以及他還有幾個影片是在介紹和實作 Svelte 編譯器雖然到 v5 後有些東西不一樣，但整體概念我想還是差不多的。

其他廢話

這次鐵人賽會以 Svelte 為主題算是一個意外，原本可能是繼續寫 FP 相關的文章或者是介紹 Effect-ts 但想來想去好像都湊不齊三十篇，所以就選擇了一個目前工作上有用到的 Svelte 作為主題了。

接下來我應該會把這個系列文比較重要的部分重新梳理一遍後放到我的 blog 裡，如果對於我之後研究的東西感到有點興趣或者是有其他回饋可以在 twitter (X) 上找到我。

感謝各位讀者看到這邊，明年見...吧？

blog : https://blog.toddliao.dev/

twitter(X): https://twitter.com/toddLiao469469