Upgrade to Pro — share decks privately, control downloads, hide ads and more …

選擇 Svelte 的三個理由 - JSDC

9d7732f8bad970e853ce664588b204b0?s=47 Kalan
October 30, 2021

選擇 Svelte 的三個理由 - JSDC

9d7732f8bad970e853ce664588b204b0?s=128

Kalan

October 30, 2021
Tweet

More Decks by Kalan

Other Decks in Technology

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 變得更⼩!
  20. None
  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!