圖書清單應用程式程式碼範例 – 入門

mstmahmuda11121

個新的 JavaScript 前端框架，用於開發網站和 Web 應用程式。任何現在正在思考「不是另一個」的人都應該暫停一下——Svelte 目前正在前端世界引起巨大轟動。一方面，它具有表現力：最少的程式碼帶來最大的結果。建立組件的樣板程式碼？不可用。同時它的速度也快得令人難以置信。使用者使用如此shouldComponentUpdate之類的東西來調整效能？不必要。此外，與其他框架相比，捆綁包的大小可以忽略不計。儘管如此，它還是非常廣泛的。已經包含動畫包和狀態管理解決方案。 Svelte 是如何做到這一點的？我們想在這篇文章中看看這一點。我們將與 Svelte 一起邁出第一步並建立一個圖書清單應用程式。

首先，回顧一下歷史：UI 框架已經有近四年的歷史了。第一個版本於年 沙烏地阿拉伯 電話號碼 底在 GitHub 上發布。作者是理查哈里斯，當時在《衛報》工作，現在在《紐約時報》謀生。他的日常工作是創建互動式圖形- Svelte 就是在這種背景下創建的。 Harris 想要一個 UI 框架，將盡可能少的 KB 資料塞進瀏覽器中——新聞網站本身就夠重了。此外，它應該速度快並且能夠實現流暢的動畫。最後但並非最不重要的一點是，即使是經驗不足的編輯同事也應該能夠快速學習。由於現有框架均無法滿足他的要求，Harris 開發了 Svelte。版本 1 已經很好地滿足了前兩點——小、快。但直到 2019 年 4 月發布的版本 3 才在簡單性方面取得了突破。 Svelte 隨後越來越受歡迎。




插圖 - Svelte 官方標誌 Svelte 官方標誌 深入了解 要了解 Svelte 如何做到體積小、速度快並減少語法，您必須了解 Svelte 的實際工作原理。大多數工作發生在編譯時，而不是執行時。例如，React 會載入執行時，並且還需要虛擬 DOM 才能運作。另一方面，Svelte 接受開發人員程式碼並產生命令式運行時程式碼，該程式碼僅包含最小的執行時間和一些幫助方法，以減少程式碼重複。編譯器也會從編譯中刪除任何不必要的功能。一個最小的 Hello World 範例在瀏覽器壓縮之前達到了令人難以置信的 2.5 KB。 編譯器也優化了效能。再次與 React 進行比較：Facebook 的 UI 庫在每次更新後都會在整個虛擬 DOM 上運行差異，並且僅重新渲染已更改的內容。