0人評分過此書

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

出版日期
2021/10/23
閱讀格式
PDF
書籍分類
學科分類
ISBN
9789864348992

本館館藏

借閱規則
當前可使用人數 2
借閱天數 14
線上看 0
借閱中 0

文化部計次

借閱規則
借閱天數 14
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館,圖書館會參考讀者意見進行採購

讀者資料
圖書館 桃園市立圖書館
* 姓名
* 身分
系所
* E-mail
※ 我們會寄送一份副本至您填寫的Email中
電話
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼
台灣第一本關於 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 的內部機制有更深入的理解。
  • 第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 生成程式碼
  • 附錄 名詞釋義與中英對照

評分與評論

請登入後再留言與評分
幫助
您好,請問需要甚麼幫助呢?
使用指南

客服專線:0800-000-747

服務時間:週一至週五 AM 09:00~PM 06:00

loading