前端框架Svelte上手指南: 從基本介紹到UI實戰與測試 | 誠品線上

前端框架Svelte上手指南: 從基本介紹到UI實戰與測試

內容簡介

內容簡介 台灣第一本關於 Svelte 前端框架介紹專書 本書特色 ☛深入講解 Svelte 基礎與進階功能 ☛搭配 SvelteKit 建構現代網頁專案 ☛搭配實戰 UI 範例活用 Svelte 本書內容改編自第12屆iT邦幫忙鐵人賽影片教學組佳作系列文章──《前端框架新選擇 - 30天 從 0 到 1 學 Svelte》。Svelte是近幾年討論熱度相當高的前端框架，本書將鐵人賽的影片內容精煉改寫為文字內容，從基礎 Svelte 語法與功能介紹開始，循序漸進學習 Svelte 並且應用在前端常見的 UI 互動上。除了 Svelte 本身之外，本書也會透過 Svelte 切入現代前端開發需要注意的事情，讓開發者學習框架之外也能夠一起掌握現代前端所要具備的概念。 內容重點 ■ 從功能介紹到部署 從 Svelte 基本功能介紹開始，本書會搭配自身開發經驗，講述 Svelte 各個功能實作時應注意的重點，並舉例說明常見誤區。除此之外本書還會教您如何設定環境、使用線上編輯器分享程式碼、部署，打造完整的 Svelte 開發環境。 ■ 活用 Svelte 功能打造常見UI元件 不只介紹 Svelte 的功能，在 UI 實戰篇中有詳細的範例與大量程式碼展示，教你活用 Svelte 打造易於維護且互動性高的 UI。 ■ 撰寫測試使程式碼更穩固 從單元測試、整合測試到端對端測試，本書會實際針對UI元件分析使用場景到實際撰寫測試，讓讀者不僅掌握工具，也能夠對測試有更深入的理解。 ■ 解析 Svelte 生成程式碼 Svelte 能將元件程式碼編譯為 JavaScript 程式碼，進而減少運行時期的負擔。本書將會解析 Svelte 的生成程式碼並對其原理做講解，讓讀者對 Svelte 的內部機制有更深入的理解。

作者介紹

作者介紹 陳愷奕（愷開）陳愷奕（愷開）從 2015 年踏入網頁前端開發，喜歡探索前端技術，利用網頁解決問題。在 2019 年末認識 Svelte 後，主要的 side project 都以 Svelve 為主力做開發。為了在台灣帶動更多 Svelte 的討論，創辦了 Svelte.js Taiwan Facebook 社團，並在部落格上寫了數篇 Svelte 相關的文章。部落格：https: blog.kalan.devSvelte Taiwan 臉書社團：https: 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 生成程式碼 附錄 名詞釋義與中英對照

商品規格

最佳賣點

最佳賣點 : 台灣第一本關於 Svelte 前端框架介紹專書

本書特色
☛深入講解 Svelte 基礎與進階功能
☛搭配 SvelteKit 建構現代網頁專案
☛搭配實戰 UI 範例活用 Svelte