選擇 Svelte 的三個理由 - JSDC

Transcript

1. 選擇 Svelte 的三個理由 Kalan JSDC 2021 1
2. ⾃我介紹 2 • Kalan （愷開） • Frontend Engineer@LINE Fukuoka • blog.kalan.dev • @kjj6198 • @kalanyei
3. Svelte 是什麼 • ⼀⾨前端框架 • 由 Rich Harris 在 2016 年開始開發 • 透過事先編譯的⽅式減少 runtime 體積 • 400 多位貢獻者 3
4. 當然，你也可以來貢獻 https://github.com/sveltejs/svelte/pull/4733 4
5. Agenda • 簡介 Svelte • 現代前端框架的基本要素 • 選擇 Svelte 的三個理由 • 語法簡單、容易上⼿ • bundle size 體積⼩ • 關注度持續提升
6. 框架好多，我快學不動了 • 框架的出現代表開發者對現況的不滿 • ⼈們對於最佳實踐的探索 6
7. 「現代」前端框架的基本要素 • 元件化的中⼼思想 7 / / js function as component export const Profile = ({ user }) = > { return <div>{user.name} < / div>; }; < ! - - SFC - - > <template> <div>{{ user.name }} < / div> < / templte>
8. 「現代」前端框架的基本要素 • 元件化的中⼼思想 • 響應機制（Reactivity） 8 <script setup> import { ref } from 'vue' const count = ref(0) < / script> <template> <button @click="count + + ">{{ count }} < / button> < / template> export const Profile = () = > { const [user, setUser] = useState({ name: "kalan" }); return <button onClick={() = > setUser({ name: 'hoge' })}> {user.name} < / button>; };
9. 「現代」前端框架的基本要素 • 元件化的中⼼思想 • 響應機制（Reactivity） • ⽣命週期 9 <script> export default { mounted() { . . . } } < / script> <template> <div> < / div> < / template> export const Profile = () = > { useEffect(() = > { . . . }, []); useEffect(() = > { . . . }, [deps]); return <div> . . . < / div>; };
10. 問題點 • 需要在 runtime 做 di ff 演算 → 增加 bundle size • 需要實作⼀套響應機制 → 犧牲⼀部分的效能 10
11. 理由⼀：語法簡單、容易上⼿ 會寫 HTML、JavaScript、CSS 就可以寫 Svelte
12. Svelte 如何簡化 事先編譯並⽣成 JavaScript 程式碼 12 / / Countdown.svelte <script> let countdown = 10; onMount(() = > { setInterval(() = > countdown -= 1, 1000); }) < / script> <span>{countdown} < / span>
13. Svelte 如何簡化 事先編譯並⽣成 JavaScript 程式碼 13 <script> let countdown = 10; onMount(() = > { setInterval(() = > countdown -= 1, 1000); }) < / script> <span>{countdown} < / span>
14. Tweet: twitter.com/AdamRackis/status/1438221959029039108 14
15. 響應式語法 15 <script> import { onMount } from 'svelte'; let countdown = 80; $: formatted = `${format(countdown, 'xx:xx')}`; onMount(() = > { setInterval(() = > countdown -= 1, 1000) }); < / script> <span>{formatted} < / span>
16. 樣板語法 16 <script> export let age = 16; const handleClick = () = > age + + ; < / script> <button on:click={handleClick}>長⼀歲 < / button> {#if age > = 18} <span>已成年 < / span> {:else} <span>未成年 < / span> {/if}
17. 線上 REPL 與互動式教學 可以直接在網⾴上寫程式碼看效果 17
18. 理由⼆：Bundle size 體積⼩ 善⽤編譯機制
19. 編譯器的好處 • 不會影響 runtime 體積 • 可以進⾏靜態分析（變數追蹤、優化） • 優化⽣成程式碼 • 去除未使⽤的程式碼片段 Bundle size 變得更⼩！
21. • 只會引入必要的依賴 • 編譯後會變為 DOM API 呼叫 • 在 runtime 沒有 virtual DOM
 和 di ff 機制 注意：Svelte 不是 zero-runtime
22. • name2 在畫⾯中未使⽤ • 因此不安排元件更新
23. 分享：動物森友會情報表 JS bundle size: 10.6KB (gzip)
24. 分享：台灣性侵害事件統計 JS bundle size: 49.6KB (gzip)
25. 專案分享：⽇語八百屋 JS bundle size: 20.2KB (gzip)
26. 關於 Bundle size • bundle size 是⼀種預算 • 不是每個專案都要變成獨⾓獸
27. 理由三：關注度持續上升 開發者與社群的反應可當作指標參考
28. State of JS 2020 滿意度第⼀名 28
29. State of JS 2020 使⽤情形 29
30. Stack Overflow Survey 2021 最受喜愛的網⾴框架 30
31. 有使⽤ Svelte 的公司 https://svelte.dev 31
32. 分享：美國總統⼤選開票 • 關鍵評論網：Svelte • 天下雜誌：Svelte • Bloomberg：Svelte 32 截圖為 bloomberg
33. 台灣 • 相比國外社群比較不熱絡 • 網路上的資源相對較少 33
34. 缺點 • ⼤多數的處理都在編譯時期 • 相對其他框架資源較少 • 使⽤率仍然偏低 34
35. 寫在最後 加入 Facebook 社團 Svelte.js Taiwan！