沒有框架的框架：為什麼我們沒有早點想到這個？

等等，這個新的框架有執行時環境？唉。謝謝，我跳過。 – 2018年的前端開發人員

我們向用戶傳送了太多程式碼。和許多前端開發人員一樣，我一直否認這個事實，認為在頁面載入時提供 100kb 的 JavaScript 是可以的——只要少用一張 .jpg 就好！——並且真正重要的是應用程式互動後的效能。

但我錯了。100kb 的 .js 不等於 100kb 的 .jpg。不只是網路時間會扼殺您應用程式的啟動效能，還包括花費在解析和評估腳本的時間，在這段時間內，瀏覽器會完全沒有回應。在行動裝置上，這些毫秒會快速累積。

如果您不相信這是一個問題，請在 Twitter 上追蹤Alex Russell。Alex最近在框架社群中沒有交到太多朋友，但他並沒有錯。但是，使用 Angular、React 和 Ember 等框架的替代方案——Polymer——尚未在前端世界中獲得關注，而且絕對不是因為缺乏行銷。

也許我們需要重新思考整個事情。

框架真正解決了什麼問題？

普遍的觀點是，框架讓管理程式碼的複雜性變得更容易：框架透過虛擬 DOM 差異等技術抽象掉所有繁瑣的實作細節。但這並非事實。充其量，框架只是將複雜性轉移，從您必須編寫的程式碼轉移到您不必編寫的程式碼中。

相反，像 React 這樣的想法如此成功且實至名歸的原因是，它們讓管理您概念的複雜性變得更容易。框架主要是一種用於組織您想法的工具，而不是您的程式碼。

鑑於此，如果框架實際上沒有在瀏覽器中執行會怎樣？如果它像 Babel 將 ES2016+ 轉換為 ES5 一樣，將您的應用程式轉換為純原生 JavaScript 會怎樣？您無需付出傳送龐大執行時環境的成本，而且您的應用程式將會變得非常快，因為在您的應用程式和瀏覽器之間沒有任何抽象層。

介紹 Svelte

Svelte 是一個新的框架，它正是這樣做的。您可以使用 HTML、CSS 和 JavaScript（以及一些您可以在5 分鐘內學會的額外位元）編寫您的元件，在建置過程中，Svelte 會將它們編譯成微小的獨立 JavaScript 模組。透過靜態分析元件範本，我們可以確保瀏覽器盡可能減少工作量。

Svelte 的 TodoMVC 實作壓縮後重 3.6kb。相比之下，React 加 ReactDOM在沒有任何應用程式碼的情況下，壓縮後約重 45kb。瀏覽器僅評估 React 所需的時間，大約是 Svelte 啟動並執行互動式 TodoMVC 所需時間的 10 倍。

而且一旦您的應用程式啟動並執行，根據js-framework-benchmark，Svelte 非常快。它比 React 快。它比 Vue 快。它比 Angular、Ember、Ractive、Preact、Riot 或 Mithril 快。它與 Inferno 競爭，Inferno 可能是目前世界上最快的 UI 框架，因為Dominic Gannaway是個巫師。（Svelte 在移除元素方面較慢。我們正在努力解決。）

它基本上和原生 JS 一樣快，這很合理，因為它就是原生 JS——只是您不必編寫的原生 JS。

但那不是重點

嗯，它是重要的——效能非常重要。不過，這種方法真正令人興奮的地方是，我們終於可以解決網路開發中一些最棘手的問題。

考慮互通性。想要npm install cool-calendar-widget 並在您的應用程式中使用它嗎？以前，您只有在已經使用（正確版本的）該小工具所設計的框架時才能這樣做——如果 cool-calendar-widget 是用 React 建置的，而您使用的是 Angular，那麼，好吧，倒楣。但是，如果小工具作者使用 Svelte，則可以使用您喜歡的任何技術建置使用它的應用程式。（在 TODO 清單中：一種將 Svelte 元件轉換為 Web 元件的方法。）

或者程式碼分割。這是一個很棒的想法（只載入使用者初始視圖所需的程式碼，然後稍後取得其餘程式碼），但是有一個問題——即使您最初只提供一個 React 元件而不是 100 個，您仍然必須提供 React 本身。使用 Svelte，程式碼分割可以更有效率，因為框架嵌入在元件中，而且元件很小。

最後，作為開源維護者，我一直在努力解決一個問題：您的使用者總是希望優先考慮他們的功能，並且低估了這些功能對不需要它們的人的成本。框架作者必須始終在專案的長期健康與滿足使用者需求的願望之間取得平衡。這非常困難，因為很難預測——更不用說清楚說明——增量膨脹的後果，而且需要嚴肅的軟技能才能告訴人們（他們可能已經熱情地宣傳您的工具到那個程度），他們的功能不夠重要。但是，使用像 Svelte 這樣的方法，許多功能可以新增，而不會對不使用它們的人產生任何成本，因為如果不需要，編譯器根本不會產生實作這些功能的程式碼。

我們才剛開始

Svelte 非常新。還有許多工作要做——建立建置工具整合、新增伺服器端渲染、熱重新載入、轉場、更多文件和範例、入門套件等等。

但是您已經可以使用它來建置豐富的元件，這就是我們直接發布穩定 1.0.0 版本的原因。閱讀指南、在 REPL 中試用它，然後前往 GitHub，以幫助啟動前端開發的下一個時代。