Tweet
Tweet

Slide 1

Slide 1 text

選擇 Svelte 的三個理由 Kalan JSDC 2021 1

Slide 2

Slide 2 text

⾃我介紹 2 • Kalan （愷開） • Frontend Engineer@LINE Fukuoka • blog.kalan.dev • @kjj6198 • @kalanyei

Slide 3

Slide 3 text

Svelte 是什麼 • ⼀⾨前端框架 • 由 Rich Harris 在 2016 年開始開發 • 透過事先編譯的⽅式減少 runtime 體積 • 400 多位貢獻者 3

Slide 4

Slide 4 text

當然，你也可以來貢獻 https://github.com/sveltejs/svelte/pull/4733 4

Slide 5

Slide 5 text

Agenda • 簡介 Svelte • 現代前端框架的基本要素 • 選擇 Svelte 的三個理由 • 語法簡單、容易上⼿ • bundle size 體積⼩ • 關注度持續提升

Slide 6

Slide 6 text

框架好多，我快學不動了 • 框架的出現代表開發者對現況的不滿 • ⼈們對於最佳實踐的探索 6

Slide 7

Slide 7 text

「現代」前端框架的基本要素 • 元件化的中⼼思想 7 / / js function as component export const Profile = ({ user }) = > { return
{user.name} < / div>; }; < ! - - SFC - - >
{{ user.name }} < / div> < / templte>

Slide 8

Slide 8 text

「現代」前端框架的基本要素 • 元件化的中⼼思想 • 響應機制（Reactivity） 8 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>; };

Slide 9

Slide 9 text

「現代」前端框架的基本要素 • 元件化的中⼼思想 • 響應機制（Reactivity） • ⽣命週期 9 export default { mounted() { . . . } } < / script> <template> <div> < / div> < / template> export const Profile = () = > { useEffect(() = > { . . . }, []); useEffect(() = > { . . . }, [deps]); return <div> . . . < / div>; };

Slide 10

Slide 10 text

問題點 • 需要在 runtime 做 di ff 演算 → 增加 bundle size • 需要實作⼀套響應機制 → 犧牲⼀部分的效能 10

Slide 11

Slide 11 text

理由⼀：語法簡單、容易上⼿ 會寫 HTML、JavaScript、CSS 就可以寫 Svelte

Slide 12

Slide 12 text

Svelte 如何簡化 事先編譯並⽣成 JavaScript 程式碼 12 / / Countdown.svelte let countdown = 10; onMount(() = > { setInterval(() = > countdown -= 1, 1000); }) < / script> <span>{countdown} < / span>

Slide 13

Slide 13 text

Svelte 如何簡化 事先編譯並⽣成 JavaScript 程式碼 13 let countdown = 10; onMount(() = > { setInterval(() = > countdown -= 1, 1000); }) < / script> <span>{countdown} < / span>

Slide 14

Slide 14 text

Tweet: twitter.com/AdamRackis/status/1438221959029039108 14

Slide 15

Slide 15 text

響應式語法 15 import { onMount } from 'svelte'; let countdown = 80; $: formatted = `${format(countdown, 'xx:xx')}`; onMount(() = > { setInterval(() = > countdown -= 1, 1000) }); < / script> <span>{formatted} < / span>

Slide 16

Slide 16 text

樣板語法 16 export let age = 16; const handleClick = () = > age + + ; < / script> <button on:click={handleClick}>長⼀歲 < / button> {#if age > = 18} <span>已成年 < / span> {:else} <span>未成年 < / span> {/if}

Slide 17

Slide 17 text

線上 REPL 與互動式教學 可以直接在網⾴上寫程式碼看效果 17

Slide 18

Slide 18 text

理由⼆：Bundle size 體積⼩ 善⽤編譯機制

Slide 19

Slide 19 text

編譯器的好處 • 不會影響 runtime 體積 • 可以進⾏靜態分析（變數追蹤、優化） • 優化⽣成程式碼 • 去除未使⽤的程式碼片段 Bundle size 變得更⼩！

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

• 只會引入必要的依賴 • 編譯後會變為 DOM API 呼叫 • 在 runtime 沒有 virtual DOM
 和 di ff 機制 注意：Svelte 不是 zero-runtime

Slide 22

Slide 22 text

• name2 在畫⾯中未使⽤ • 因此不安排元件更新

Slide 23

Slide 23 text

分享：動物森友會情報表 JS bundle size: 10.6KB (gzip)

Slide 24

Slide 24 text

分享：台灣性侵害事件統計 JS bundle size: 49.6KB (gzip)

Slide 25

Slide 25 text

專案分享：⽇語八百屋 JS bundle size: 20.2KB (gzip)

Slide 26

Slide 26 text

關於 Bundle size • bundle size 是⼀種預算 • 不是每個專案都要變成獨⾓獸

Slide 27

Slide 27 text

理由三：關注度持續上升 開發者與社群的反應可當作指標參考

Slide 28

Slide 28 text

State of JS 2020 滿意度第⼀名 28

Slide 29

Slide 29 text

State of JS 2020 使⽤情形 29

Slide 30

Slide 30 text

Stack Overflow Survey 2021 最受喜愛的網⾴框架 30

Slide 31

Slide 31 text

有使⽤ Svelte 的公司 https://svelte.dev 31

Slide 32

Slide 32 text

分享：美國總統⼤選開票 • 關鍵評論網：Svelte • 天下雜誌：Svelte • Bloomberg：Svelte 32 截圖為 bloomberg

Slide 33

Slide 33 text

台灣 • 相比國外社群比較不熱絡 • 網路上的資源相對較少 33

Slide 34

Slide 34 text

缺點 • ⼤多數的處理都在編譯時期 • 相對其他框架資源較少 • 使⽤率仍然偏低 34

Slide 35

Slide 35 text

寫在最後 加入 Facebook 社團 Svelte.js Taiwan！