作者簡介
陳愷奕(愷開)
從 2015 年踏入網頁前端開發,喜歡探索前端技術,利用網頁解決問題。在 2019 年末認識 Svelte 後,主要的 side project 都以 Svelve 為主力做開發。為了在台灣帶動更多 Svelte 的討論,創辦了 Svelte.js Taiwan Facebook 社團,並在部落格上寫了數篇 Svelte 相關的文章。
部落格:blog.kalan.dev
Svelte Taiwan 臉書社團:www.facebook.com/groups/sveltejs.taiwan
第 1 章 Svelte 簡介
1-1 「又」一個前端框架?
1-2 為什麼 Svelte 值得學習?
1-3 重新思考響應機制(Rethinking Reactivity)
1-4 減少運行時期的額外開銷
1-5 Svelte 的缺點
1-6 環境準備
1-7 如何在線上寫 Svelte
1-8 初探 Svelte
1-9 除了 Svelte 外更重要的事
第 2 章 Svelte 入門篇
2-1 安裝 Svelte 與開發環境
2-2 使用 Rollup 開發 Svelte
2-3 使用 webpack 開發 Svelte
2-4 基本語法介紹
2-5 資料傳遞與標籤
2-6 $響應式語法
2-7 如何加入樣式
2-8 Svelte 當中的 Class
2-9 特殊標籤 @Html
2-10 特殊標籤 @Debug
2-11 邏輯判斷語法(If, Else)
2-12 迴圈語法
2-13 事件綁定與客製化事件
2-14 await 區塊語法
2-15 key 區塊語法
2-16 Svelte 生命週期方法
2-17 Svelte 與雙向綁定 bind
2-18 Svelte 中的描述符
2-19 Svelte 與其他樣板引擎的不同
第 3 章 Svelte 進階篇
3-1 在 Svelte 元件使用 CSS 自定義屬性
3-2 Svelte 當中的 Store
3-3 Svelte 當中的 context
3-4 Svelte 當中的 tick
3-5 Svelte 當中的轉場機制 transition
3-6 Svelte 當中的 motion
3-7 Svelte 當中的 animate
3-8 Svelte 當中的 slot
3-9 Svelte 當中的 action
3-10 Svelte 內建 Element
3-11 Svelte SSR 功能
3-12 Svelte 編譯設定
3-13 如何在 Svelte 中使用 CSS 預處理器
第 4 章 Svelte 實戰篇 – 實作常見 UI 元件
4-1 前言:實作 UI 時要注意的事
4-2 客戶端路由(Client Side Routing)
4-3 處理 API 與畫面互動
4-4 實作 Modal 元件
4-5 客製化滑桿 Slider
4-6 表格(Table)
4-7 下拉式組合方塊(Combo Box)
4-8 音樂播放器
4-9 通知佇列
4-10 Tooltip
第 5 章 伺服器渲染 – SvelteKit
5-1 什麼是 Sveltekit
5-2 前端頁面產生方式:SSR、CSR、SSG
5-3 Sveltekit 檔案系統基礎路由
5-4 Layout 與巢狀 Layout
5-5 在 Pages 中讀取並使用參數
5-6 錯誤頁面
5-7 Hooks
5-8 模組
5-9 設定
5-10 使用 adapter 部署
第 6 章 測試篇
6-1 為什麼要撰寫測試?
6-2 測試的種類
6-3 使用 testing-library 與 jest 撰寫測試
6-4 使用 Cypress 撰寫端對端測試
第 7 章 部署篇 – 將 Svelte 專案公開到網路上
7-1 使用 Netlify 部署 Svelte App
7-2 使用 Vercel 部署 Svelte App
7-3 使用 Github Pages 部署 Svelte App
第 8 章 Svelte 原理篇
8-1 抽象語法樹
8-2 Svelte 如何生成程式碼
8-3 分析 Svelte 生成程式碼
附錄 名詞釋義與中英對照