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

選擇 Svelte 的三個理由 - JSDC

Kalan
October 30, 2021

選擇 Svelte 的三個理由 - JSDC

Kalan

October 30, 2021
Tweet

More Decks by Kalan

Other Decks in Technology

Transcript

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

    View Slide

  2. ⾃我介紹
    2
    • Kalan (愷開)

    • Frontend Engineer@LINE Fukuoka

    • blog.kalan.dev

    • @kjj6198

    • @kalanyei

    View Slide

  3. Svelte 是什麼
    • ⼀⾨前端框架

    • 由 Rich Harris 在 2016 年開始開發

    • 透過事先編譯的⽅式減少 runtime 體積

    • 400 多位貢獻者
    3

    View Slide

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

    View Slide

  5. Agenda
    • 簡介 Svelte

    • 現代前端框架的基本要素

    • 選擇 Svelte 的三個理由

    • 語法簡單、容易上⼿

    • bundle size 體積⼩

    • 關注度持續提升

    View Slide

  6. 框架好多,我快學不動了
    • 框架的出現代表開發者對現況的不滿

    • ⼈們對於最佳實踐的探索
    6

    View Slide

  7. 「現代」前端框架的基本要素
    • 元件化的中⼼思想
    7
    /
    /
    js function as component


    export const Profile = ({ user })
    =
    >
    {


    return {user.name}
    <
    /
    div>;


    };
    <
    !
    -
    -
    SFC
    -
    -
    >





    {{ user.name }}
    <
    /
    div>


    <
    /
    templte>

    View Slide

  8. 「現代」前端框架的基本要素
    • 元件化的中⼼思想

    • 響應機制(Reactivity)
    8
    <br/><br/><br/>import { ref } from 'vue'<br/><br/><br/>const count = ref(0)<br/><br/><br/><<br/>/<br/>script><br/><br/><br/><template><br/><br/><br/><button @click="count<br/>+<br/>+<br/>">{{ count }}<br/><<br/>/<br/>button><br/><br/><br/><<br/>/<br/>template><br/>export const Profile = ()<br/>=<br/>><br/>{<br/><br/><br/>const [user, setUser] = useState({ name: "kalan" });<br/><br/><br/>return <button onClick={()<br/>=<br/>><br/>setUser({ name: 'hoge' })}><br/><br/><br/>{user.name}<br/><br/><br/><<br/>/<br/>button>;<br/><br/><br/>};<br/>

    View Slide

  9. 「現代」前端框架的基本要素
    • 元件化的中⼼思想

    • 響應機制(Reactivity)

    • ⽣命週期
    9
    <br/><br/><br/>export default {<br/><br/><br/>mounted() {<br/><br/><br/>.<br/>.<br/>.<br/><br/><br/>}<br/><br/><br/>}<br/><br/><br/><<br/>/<br/>script><br/><br/><br/><template><br/><br/><br/><div><br/><<br/>/<br/>div><br/><br/><br/><<br/>/<br/>template><br/>export const Profile = ()<br/>=<br/>><br/>{<br/><br/><br/>useEffect(()<br/>=<br/>><br/>{<br/>.<br/>.<br/>.<br/>}, []);<br/><br/><br/>useEffect(()<br/>=<br/>><br/>{<br/>.<br/>.<br/>.<br/>}, [deps]);<br/><br/><br/>return <div><br/>.<br/>.<br/>.<br/><<br/>/<br/>div>;<br/><br/><br/>};<br/>

    View Slide

  10. 問題點
    • 需要在 runtime 做 di
    ff
    演算 → 增加 bundle size

    • 需要實作⼀套響應機制 → 犧牲⼀部分的效能
    10

    View Slide

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

    View Slide

  12. Svelte 如何簡化
    事先編譯並⽣成 JavaScript 程式碼
    12
    /
    /
    Countdown.svelte


    <br/><br/><br/>let countdown = 10;<br/><br/><br/>onMount(()<br/>=<br/>><br/>{<br/><br/><br/>setInterval(()<br/>=<br/>><br/>countdown -= 1, 1000);<br/><br/><br/>})<br/><br/><br/><<br/>/<br/>script><br/><br/><br/><span>{countdown}<br/><<br/>/<br/>span><br/>

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. 理由⼆:Bundle size 體積⼩
    善⽤編譯機制

    View Slide

  19. 編譯器的好處
    • 不會影響 runtime 體積

    • 可以進⾏靜態分析(變數追蹤、優化)

    • 優化⽣成程式碼

    • 去除未使⽤的程式碼片段
    Bundle size
    變得更⼩!

    View Slide

  20. View Slide

  21. • 只會引入必要的依賴

    • 編譯後會變為 DOM API 呼叫

    • 在 runtime 沒有 virtual DOM

    和 di
    ff
    機制
    注意:Svelte 不是 zero-runtime

    View Slide

  22. • name2 在畫⾯中未使⽤

    • 因此不安排元件更新

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. 關於 Bundle size
    • bundle size 是⼀種預算

    • 不是每個專案都要變成獨⾓獸

    View Slide

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

    View Slide

  28. State of JS 2020
    滿意度第⼀名
    28

    View Slide

  29. State of JS 2020
    使⽤情形
    29

    View Slide

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

    View Slide

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

    View Slide

  32. 分享:美國總統⼤選開票
    • 關鍵評論網:Svelte

    • 天下雜誌:Svelte

    • Bloomberg:Svelte
    32
    截圖為 bloomberg

    View Slide

  33. 台灣
    • 相比國外社群比較不熱絡

    • 網路上的資源相對較少
    33

    View Slide

  34. 缺點
    • ⼤多數的處理都在編譯時期

    • 相對其他框架資源較少

    • 使⽤率仍然偏低
    34

    View Slide

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

    View Slide