Day1: Svelte 簡介

淺談 Svelte

Transcript

1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1 學 Svelte Day 1 - Svelte 簡介
2. 第 12 屆 IT 鐵⼈賽 Svelte 是什麼？ Write less code No virtual DOM Truly reactive ⼜⼀個前端框架？ svelte.dev Cybernetically enhanced web apps
3. 第 12 屆 IT 鐵⼈賽 前端框架的要素 提供⼀套 Reactivity 機制 實作 diff 避免不必要的更新 事件綁定 ⽣命週期⽅法 狀態管理機制（如 context, store）
4. 第 12 屆 IT 鐵⼈賽 作者介紹 - Rich Harris Rollup 作者 Ractive.js 作者 在紐約時報擔任 Graphic Editor 非本科系（哲學系）出⾝ 畢業後擔任記者，為了寫報導開始學習程式
5. 第 12 屆 IT 鐵⼈賽 與其他前端框架比較 沒有 Virtual DOM 機制 → runtime 與 bundle size 較⼩ 對於中、⼩型專案來說效能與功能⾜夠 初學者上⼿容易 Svelte 會將程式碼做編譯後再執⾏
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
7. 第 12 屆 IT 鐵⼈賽 Svelte 概覽 樣板語法 ⽣命週期 props （屬性傳遞） transition 機制 事件綁定 motion機制 Reactivity
8. 第 12 屆 IT 鐵⼈賽 30 天規劃（草案） 基本篇 - Svelte 基本語法與功能介紹（10 天） 實戰篇 - ⽤ Svelte 完成前端常⾒ UI 與功能（10 天） API 處理 圖表、資料視覺化 互動式 UI （播放器、影片等等） Svelte 經驗談與專案實作（3 天） 進階 Svelte（7 天） 理解 Svelte 原理 實作簡單版的 Svelte
9. 第 12 屆 IT 鐵⼈賽 ⽤ Svelte 寫⼀個計時器！ ⼩試⾝⼿