選擇 Svelte 的三個理由Kalan JSDC 20211
View Slide
⾃我介紹2• Kalan (愷開)• Frontend Engineer@LINE Fukuoka• blog.kalan.dev• @kjj6198• @kalanyei
Svelte 是什麼• ⼀⾨前端框架• 由 Rich Harris 在 2016 年開始開發• 透過事先編譯的⽅式減少 runtime 體積• 400 多位貢獻者3
當然,你也可以來貢獻https://github.com/sveltejs/svelte/pull/47334
Agenda• 簡介 Svelte• 現代前端框架的基本要素• 選擇 Svelte 的三個理由• 語法簡單、容易上⼿• bundle size 體積⼩• 關注度持續提升
框架好多,我快學不動了• 框架的出現代表開發者對現況的不滿• ⼈們對於最佳實踐的探索6
「現代」前端框架的基本要素• 元件化的中⼼思想7//js function as componentexport const Profile = ({ user })=>{return {user.name}</div>;};<!--SFC-->{{ user.name }}</div></templte>
「現代」前端框架的基本要素• 元件化的中⼼思想• 響應機制(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/>
「現代」前端框架的基本要素• 元件化的中⼼思想• 響應機制(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/>
問題點• 需要在 runtime 做 diff演算 → 增加 bundle size• 需要實作⼀套響應機制 → 犧牲⼀部分的效能10
理由⼀:語法簡單、容易上⼿會寫 HTML、JavaScript、CSS 就可以寫 Svelte
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/>
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/>
Tweet: twitter.com/AdamRackis/status/143822195902903910814
響應式語法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/>
樣板語法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/>
線上 REPL 與互動式教學可以直接在網⾴上寫程式碼看效果17
理由⼆:Bundle size 體積⼩善⽤編譯機制
編譯器的好處• 不會影響 runtime 體積• 可以進⾏靜態分析(變數追蹤、優化)• 優化⽣成程式碼• 去除未使⽤的程式碼片段Bundle size變得更⼩!
• 只會引入必要的依賴• 編譯後會變為 DOM API 呼叫• 在 runtime 沒有 virtual DOM 和 diff機制注意:Svelte 不是 zero-runtime
• name2 在畫⾯中未使⽤• 因此不安排元件更新
分享:動物森友會情報表JS bundle size: 10.6KB (gzip)
分享:台灣性侵害事件統計JS bundle size: 49.6KB (gzip)
專案分享:⽇語八百屋JS bundle size: 20.2KB (gzip)
關於 Bundle size• bundle size 是⼀種預算• 不是每個專案都要變成獨⾓獸
理由三:關注度持續上升開發者與社群的反應可當作指標參考
State of JS 2020滿意度第⼀名28
State of JS 2020使⽤情形29
Stack Overflow Survey 2021最受喜愛的網⾴框架30
有使⽤ Svelte 的公司https://svelte.dev31
分享:美國總統⼤選開票• 關鍵評論網:Svelte• 天下雜誌:Svelte• Bloomberg:Svelte32截圖為 bloomberg
台灣• 相比國外社群比較不熱絡• 網路上的資源相對較少33
缺點• ⼤多數的處理都在編譯時期• 相對其他框架資源較少• 使⽤率仍然偏低34
寫在最後加入 Facebook 社團 Svelte.js Taiwan!