原文出處：https://dev.to/mhatvan/10-reasons-why-i-recommend-svelte-to-every-new-web-developer-nh3
儘管 Svelte 的初始版本早在 2016 年 11 月就發布了，但它在 JavaScript 前端框架中仍然處於劣勢，並且最近才開始受到社區應有的關注。
在使用了多年的各種 JavaScript 框架（包括 Angular、React 和 Vue.js）之後，我認為我對編寫程式碼如何愉快以及如何令人沮喪有了良好的總體印象。
幾年前，使用 jQuery 編寫程式碼感覺就像來自純 JavaScript 的啟示。然後在我的第一份工作中，我開始使用 Angular 2，突然間 jQuery 感覺像是一個拖累。現在，React 是最酷的孩子，相比之下，Angular 感覺太複雜了。您可能會看到這是怎麼回事！
對我來說，Svelte 是快速變化的 JavaScript 框架生態系統中的下一個進化步驟。用 Svelte 的方式編寫感覺很容易，你可以看出它的建立者 Rich Harris厭倦了現有框架要求您學習的所有煩人的抽象和必要的樣板程式碼。
現在你可能會問自己這個問題：
是什麼讓 Svelte 與眾不同？
您可能聽說過 Svelte 出現在諸如 前端框架的真實世界比較 和 State of JS Survey 等開發人員調查將其列為在捆綁包大小、性能、程式碼行數方面排名最好的框架之一以及最重要的開發者滿意度。
與流行的 React 和 Vue.js 庫相比，它們在執行時執行大量工作並使用一種稱為“虛擬”的技術DOM diffing”用於檢測變化，Svelte 作為建置步驟被編譯成無框架的 vanilla JavaScript，因此可以從大量程式碼優化中受益。
出於本能的猶豫，我起初將 Svelte 視為“只是另一個 JavaScript 框架”而不予考慮，也沒有費心去研究它。第二次聽說後，我想知道：Svelte 是炒作還是真的那麼好？我決定對它進行實戰測試並將其用於我的個人專案。
現在幾個月後，我可以給你一個明確的答案：
Svelte 簡單、強大且優雅，您會愛上它！
事不宜遲，以下是我向每位開始學習編程的新 Web 開發人員推薦 Svelte 的十大理由：
1. Svelte 元件易於理解
如果您以前從未見過 Svelte 語法，這就是一個簡單示例的樣子：
https://gist.github.com/mhatvan/3630989d364e4020f26ebb96d2d7c332
與其他引入大量抽象概念、需要花時間學習和理解的前端框架相比，看到 Svelte 只是並排使用普通的舊 HTML、CSS 和 JavaScript，真是令人耳目一新。您可以通過其對初學者友好的語法查看並輕鬆辨識此處發生的情況。
2.簡單寫簡潔的程式碼
正如您在上面的程式碼示例中看到的，您編寫的業務邏輯既簡單又易於閱讀。畢竟，您編寫的程式碼越少，錯誤就越少，對吧？
Svelte 的天才創造者 Rich Harris 在他的文章 少寫程式碼 中對 React 和 Vue.js 進行了一些很好的比較。根據他對編寫簡單的兩個數字相加邏輯所需的字符的檢查，React 元件通常比其 Svelte 元件大 40% 左右！
3. 與標記語句的反應性
每當您希望根據其他變數更新和重新計算變數值時，您可以使用反應式聲明。只需在您想要響應的變數前面放一個美元符號，您就可以開始了！
https://gist.github.com/mhatvan/7e2f0fea362c79d64a34cb7e0c088453
每次單擊按鈕時，count 將增加 1，而 doubled 將知道 count 的值發生變化並相應地更新。從反應性的角度思考真的很有趣，而且寫起來感覺很好。
4.開箱即用的簡單全局狀態管理
無需任何復雜的第三方狀態管理工具，如 Redux 或 Vuex。
您只需將一個變數定義為可寫/可讀存儲，並在任何以 $ 符號為前綴的 .svelte 文件中使用它。
https://gist.github.com/mhatvan/710b6bb6df4ece7e9a5f53886eb2dd0d
在此示例中，我們檢查當前環境，它作為值存在於我們的商店中，並使用它來決定是否應顯示 cookie 通知。很簡單，不是嗎？
使用 Svelte 存儲，您也永遠不必擔心內存洩漏，因為以 $ 符號為前綴的存儲變數充當自動訂閱和自動取消訂閱。
5. 內置可存取性和未使用的 CSS 檢查
Svelte 希望讓網路變得更美好，並通過程式碼中的有用提示幫助您。
每當您忘記將 alt 屬性放在 <img> 標籤上時，Svelte 都會為您顯示 A11y: <img> 元素應該有一個 alt 屬性 提醒。在 Svelte 中實現了一長串可存取性檢查，它們會提示您而不會成為麻煩。
為了使程式碼盡可能簡潔並避免遺留程式碼片段，只要在元件中找不到相應的標記，Svelte 還會為您標記未使用的 CSS 選擇器。
6.元件自動導出
每當你想在元件 B 中使用元件 A 時，你通常需要先編寫程式碼導出元件 A，這樣它才能被元件 B 導入。使用 Svelte，你永遠不必擔心忘記導出， .svelte 元件始終默認自動為您導出，並準備好由任何其他元件導入。
7. 默認情況下樣式是有範圍的
類似於 CSS-in-JS 庫，Svelte默認情況下，樣式是有範圍的，這意味著 svelte-<unique-hash> 類名將附加到您的樣式，因此它們不會洩漏和影響任何其他元件樣式。當然，您可以選擇全局應用樣式，只需在它們前面加上 :global() 修飾符，或者如果您願意，也可以只使用 .css 文件。
8. #await 塊
對於大多數 Web 應用程式，您將需要處理異步資料以向用戶顯示有用的統計訊息。
https://gist.github.com/mhatvan/2e44dc1ec402f477830f90bd77614f34
{#await} 塊的優點是您不必為已解決/拒絕的承諾定義額外的狀態，您只需在模板中定義內聯變數即可。
9.傳遞道具的速記屬性
如果存在與變數名稱相同的 prop 名稱，我們可以將其作為簡寫屬性傳遞給元件，如下面的“{message}”。與使用 message="{message}" 相比沒有任何優勢，但更簡潔。
https://gist.github.com/mhatvan/9085f5330eeccdc2238e4f4e609b4f88
在上方，您可以看到根據 round 是真還是假將 class:round 屬性應用於按鈕。這很容易成為一個可重用的元件，您可以從外部傳遞 round 的值來有條件地決定元件的樣式。
10.內置效果和動畫
Svelte 預裝了強大的效果模塊：
-
svelte/motion效果，如補間和彈簧 -
svelte/transition效果，如淡入淡出、模糊、飛行、滑動、縮放、繪製 -
svelte/animate效果如翻轉 -
svelte/easing效果，如彈跳、立方體、彈性等等
Svelte 官方教程中有幾個示例，但我最喜歡這個進度條示例，因為它很簡單。
動畫是 web 開發的一個領域，您通常會在其中尋找外部依賴項來為您處理它，因此您可以開箱即用地使用它們真是太好了。
不採用 Svelte 的合理理由
為了避免讓這篇文章聽起來像一篇冗長的狂熱帖子，以下是我迄今為止使用 Svelte 時遇到的缺點：
.svelte 文件不能導出多個元件
一方面，我們受益於默認自動導出的 .svelte 文件，但這也意味著我們無法從單個文件導出多個元件。我不認為這有什麼大不了的，因為它會迫使您遵循最佳實踐來使用許多小的獨立元件編寫您的應用程式，這使它們易於理解和單元測試。
一般模板語法
為了顯示條件邏輯，Svelte 使用類似於眾所周知的 Handlebars 模板語法的語法。
https://gist.github.com/mhatvan/95cc1837441a272cb8422fcae24d91e0
這種編寫邏輯的方式我沒有遇到任何問題，但我更喜歡更簡潔的語法。
使用 export let 在子元件中接收 props
當您想要將值從父元件傳遞到子元件時，您需要將一個值作為屬性傳遞，並使用帶有匹配變數名稱的 export let 來接收它。
https://gist.github.com/mhatvan/b67ceafb05d21c15b5782c068690d632
在現代 JavaScript 中，export 通常用作導出模塊的關鍵字和 let 聲明塊範圍變數，所以我覺得語法濫用現有關鍵字，但我習慣了它並且效果很好.
開發速度
這與 Svelte 的開發體驗沒有直接關係，但您絕對應該知道，在財務支持方面，Svelte 無法（目前）與更大的和讚助的開源專案競爭，如 React、Angular、Vue.js 和其他專案，截至目前的貢獻者數量和受歡迎程度。
儘管如此，社區正在迅速發展，社區為 Svelte 建置的第三方專案列表也在不斷增加，這些專案可在 Made with Svelte 上找到。開發 Svelte 相關工具的開發人員都是天才，您可以隨時在 Discord 頻道、Twitter 上尋求幫助) 或 Reddit。 Svelte 最近還加入了 TypeScript 支持，而且效果很好！
我喜歡 Svelte 的易用性、較小的包大小和開發人員體驗等因素，因此我可以接受較慢的開發速度作為權衡。如果您總是需要盡可能快地合併最新功能，那麼您可能需要查看其他可用的 JavaScript 框架。
缺少可用的工作
大多數公司仍在尋找對三大前端框架有經驗的開發人員，但也有各種知名的 Svelte 早期採用者，如 IBM、Apple、Philips、GoDaddy、1Password 或紐約時報，僅舉幾例.您可以在 Svelte 網站 底部找到大量使用 Svelte 的公司。通常，採用新框架需要一段時間才能出現在公司的工作機會中。儘管如此，Svelte 學習起來很有趣，許多開發人員喜歡使用 Svelte，尤其是在他們自己的個人專案或小規模應用程式中。
結論
如果對初學者友好的語法、較小的包大小輸出和 Svelte 的瘋狂性能對您來說是一個不錯的選擇，我建議您開始使用 Svelte 教程。該教程非常詳細，您可以快速了解該框架的強大功能。
在 JavaScript 框架的世界裡，事情肯定會快速變化，我希望你和我一樣相信 Svelte 擁有所有的優勢和潛力，可以讓它成為新的 #1 JavaScript 前端框架！
您之前使用過 Svelte 嗎？你的經驗是什麼？
在評論中告訴我，我很想知道。
感謝閱讀，希望您喜歡！
有用的資源
正在尋找 Svelte 支持的伺服器端渲染解決方案？
在使用 Sapper 接觸框架後，我是一個忠實的粉絲，一有機會就嘗試推廣 Svelte 之道。
如果您要建立一個網站並正在尋找合適的工具，我發表了一篇關於我迄今為止使用 Sapper 的經驗的文章，供您在此處閱讀：“為什麼我為我的網站選擇 SapperJS，以及我做了什麼”到目前為止，我已經了解了該框架”。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式