Day1: Svelte 簡介

淺談 Svelte

Transcript

1. 第 12 屆 IT 鐵⼈賽
   30 天從 0 到 1 學 Svelte
   Day 1 - Svelte 簡介
   

   View Slide

2. 第 12 屆 IT 鐵⼈賽
   Svelte 是什麼？
   Write less code No virtual DOM Truly reactive
   ⼜⼀個前端框架？
   svelte.dev
   Cybernetically enhanced web apps
   

   View Slide

3. 第 12 屆 IT 鐵⼈賽
   前端框架的要素
   提供⼀套 Reactivity 機制
   實作 diff 避免不必要的更新
   事件綁定
   ⽣命週期⽅法
   狀態管理機制（如 context, store）
   

   View Slide

4. 第 12 屆 IT 鐵⼈賽
   作者介紹 - Rich Harris
   Rollup 作者
   Ractive.js 作者
   在紐約時報擔任 Graphic Editor
   非本科系（哲學系）出⾝
   畢業後擔任記者，為了寫報導開始學習程式
   

   View Slide

5. 第 12 屆 IT 鐵⼈賽
   與其他前端框架比較
   沒有 Virtual DOM 機制 → runtime 與 bundle size 較⼩
   對於中、⼩型專案來說效能與功能⾜夠
   初學者上⼿容易
   Svelte 會將程式碼做編譯後再執⾏
   

   View Slide

6. 第 12 屆 IT 鐵⼈賽
   It's important to understand that virtual DOM isn't a feature. It's a means to an end,
   the end being declarative, state-driven UI development. Virtual DOM is valuable
   because it allows you to build apps without thinking about state transitions, with
   performance that is generally good enough. That means less buggy code, and more
   time spent on creative tasks instead of tedious ones.
   But it turns out that we can achieve a similar programming model without using
   virtual DOM — and that's where Svelte comes in.
   Virtual DOM is pure overhead
   

   View Slide

7. 第 12 屆 IT 鐵⼈賽
   Svelte 概覽
   樣板語法
   ⽣命週期
   props （屬性傳遞）
   transition 機制
   事件綁定
   motion機制
   Reactivity
   

   View Slide

8. 第 12 屆 IT 鐵⼈賽
   30 天規劃（草案）
   基本篇 - Svelte 基本語法與功能介紹（10 天）
   實戰篇 - ⽤ Svelte 完成前端常⾒ UI 與功能（10 天）
   API 處理
   圖表、資料視覺化
   互動式 UI （播放器、影片等等）
   Svelte 經驗談與專案實作（3 天）
   進階 Svelte（7 天）
   理解 Svelte 原理
   實作簡單版的 Svelte
   

   View Slide

9. 第 12 屆 IT 鐵⼈賽
   ⽤ Svelte 寫⼀個計時器！
   ⼩試⾝⼿
   

   View Slide