選擇 Svelte 的三個理由 - JSDC

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