Svelte and Sapper in Action
Mark Volkmann
  • September 2020
  • ISBN 9781617297946
  • 456 pages
  • printed in black & white

This is a great book—very thorough! I highly recommend it for anyone looking to learn Svelte and Sapper or just looking for alternatives to React and Vue.

Robert Walsh, Excalibur Solutions
Imagine web apps with fast browser load times that also offer amazing developer productivity and require less code to create. That's what Svelte and Sapper deliver! Svelte pushes a lot of the work a frontend framework would handle to the compile step, so your app components come out as tight, well-organized JavaScript modules. Sapper is a lightweight web framework that minimizes application size through server-rendering front pages and only loading the JavaScript you need. The end result is more efficient apps with great UX and simplified state management.

About the Technology

Many web frameworks load hundreds of “just-in-case” code lines that clutter and slow your apps. Svelte, an innovative, developer-friendly tool, instead compiles applications to very small bundles for lightning-fast load times that do more with less code. Pairing Svelte with the Sapper framework adds features for flexible and simple page routing, server-side rendering, static site development, and more.

About the book

Svelte and Sapper in Action teaches you to design and build fast, elegant web applications. You'll start immediately by creating an engaging Travel Packing app as you learn to create Svelte components and develop great UX. You'll master Svelte's unique state management model, use Sapper for simplified page routing, and take on modern best practices like code splitting, offline support, and server-rendered views.
Table of Contents detailed table of contents

Part 1: Getting Started

1 Meet the players

1.1 Introducing Svelte

1.1.1 Why Svelte?

1.1.2 Rethinking reactivity

1.1.3 Current issues in Svelte

1.1.4 How does Svelte work?

1.1.5 Does Svelte disappear?

1.2 Introducing Sapper

1.2.1 Why consider Sapper?

1.2.2 How does Sapper work?

1.2.3 When should Sapper be used?

1.2.4 When should Sapper not be used?

1.3 Introducing Svelte Native

1.4 How does Svelte compare with other web frameworks?

1.4.1 Angular

1.4.2 React

1.4.3 Vue

1.5 What tools are needed to get started?

Summary

2 Your first Svelte app

2.1 The Svelte REPL

2.1.1 Using the Svelte REPL

2.1.2 Your first REPL app

2.1.3 Saving REPL apps

2.1.4 Sharing REPL apps

2.1.5 REPL URLs

2.1.6 Exporting REPL apps

2.1.7 Using npm packages

2.1.8 REPL limitations

2.1.9 CodeSandbox

2.2 Working outside the REPL

2.2.1 Starting with npx degit

2.2.2 Provided package.json

2.2.3 Important files

2.2.4 Your first non-REPL app

2.3 Bonus app

Summary

Part 2: Deeper into Svelte

3 Creating components

3.1 Content of .svelte files

3.2 Component markup

3.3 Component names

3.4 Component styles

3.5 CSS specificity

3.6 Scoped vs. global styles

3.7 Using CSS preprocessors

3.8 Component logic

3.9 Component state

3.10 Reactive statements

3.11 Module context

3.12 Building a custom component

3.13 Building the Travel Packing app

Summary

4 Block structures

4.1 Conditional logic with {#if}

4.2 Iteration with {#each}

4.3 Promises with {#await}

4.4 Building the Travel Packing app

4.4.1 Item component

4.4.2 Utility functions

4.4.3 Category component

4.4.4 Checklist component

4.4.5 App component

4.4.6 Try it

Summary

5 Component communication

5.1 Component communication options

5.2 Props

5.2.1 Props go in with export

5.2.2 Reacting to prop changes

5.2.3 Prop types

5.2.4 Directives

5.2.5 The bind directive on form elements

5.2.6 bind:this

5.2.7 Props go out with bind

5.3 Slots

5.4 Events

5.4.1 Event dispatching

5.4.2 Event forwarding

5.4.3 Event modifiers

5.5 Context

5.6 Building the Travel Packing app

Summary

6 Stores

6.1 Writable stores

6.2 Readable stores

6.3 Where to define stores

6.4 Using stores

6.5 Derived stores

6.6 Custom stores

6.7 Using stores with classes

6.8 Persisting stores

6.9 Building the Travel Packing app

Summary

7 DOM interactions

7.1 Inserting HTML

7.2 Actions

7.3 The tick function

7.4 Implementing a dialog component

7.5 Drag and drop

7.6 Building the Travel Packing app

Summary

8 Lifecycle functions

8.1 Setup

8.2 The onMount lifecycle function

8.2.1 Moving focus

8.2.2 Retrieving data from an API service

8.3 The onDestroy lifecycle function

8.4 The beforeUpdate lifecycle function

8.5 The afterUpdate lifecycle function

8.6 Using helper functions

8.7 Building the Travel Packing app

Summary

9 Client-side routing

9.1 Manual routing

9.2 Hash routing

9.3 Using the page.js library

9.4 Using path and query parameters with page.js

9.5 Building the Travel Packing app

Summary

10 Animation

10.1 Easing functions

10.2 The svelte/animate package

10.3 The svelte/motion package

10.4 The svelte/transition package

10.5 The fade transition and flip animation

10.6 The crossfade transition

10.7 The draw transition

10.8 Custom transitions

10.9 The transition vs. in and out props

10.10 Transition events

10.11 Building the Travel Packing app

Summary

11 Debugging

11.1 The @debug tag

11.2 Reactive statements

11.3 Svelte Devtools

Summary

12 Testing

12.1 Unit tests with Jest

12.1.1 Unit tests for the Todo app

12.1.2 Unit tests for the Travel Packing app

12.2 End-to-end tests with Cypress

12.2.1 End-to-end tests for the Todo app

12.2.2 End-to-end tests for the Travel Packing app

12.3 Accessibility tests

12.3.1 Svelte compiler

12.3.2 Lighthouse

12.3.3 axe

12.3.4 WAVE

12.4 Component demos and debugging with Storybook

12.4.1 Storybook for Travel Packing app

Summary

13 Deploying

13.1 Deploying to any HTTP server

13.2 Using Netlify

13.2.1 Netlify from the website

13.2.2 Netlify from the command line

13.2.3 Netlify plans

13.3 Using Vercel

13.3.1 Vercel from the website

13.3.2 Vercel from the command line

13.3.3 Vercel tiers

13.4 Using Docker

Summary

14 Advanced Svelte

14.1 Form validation

14.2 Using CSS libraries

14.3 Special elements

14.4 Importing JSON files

14.5 Creating component libraries

14.6 Web components

Summary

Part 3: Deeper into Sapper

15 Your first Sapper app

15.1 Creating a new Sapper app

15.2 Recreating the shopping app with Sapper

Summary

16 Sapper applications

16.1 Sapper file structure

16.2 Page routes

16.3 Page layouts

16.4 Handling errors

16.5 Running on both server and client

16.6 Fetch API wrapper

16.7 Preloading

16.8 Prefetching

16.9 Code splitting

16.10 Building the Travel Packing app

Summary

17 Sapper server routes

17.1 Server route source files

17.2 Server route functions

17.3 A create/retrieve/update/delete (CRUD) example

17.4 Switching to Express

17.5 Building the Travel Packing app

Summary

18 Exporting static sites with Sapper

18.1 Sapper details

18.2 When to export

18.3 Example app

Summary

19 Sapper offline support

19.1 Service worker overview

19.2 Caching strategies

19.3 Sapper service worker configuration

19.4 Service worker events

19.5 Managing service workers in Chrome

19.6 Enabling the use of HTTPS in the Sapper server

19.7 Verifying offline behavior

19.8 Building the Travel Packing app

Summary

Part 4: Beyond Svelte and Sapper

20 Preprocessors

20.1 Custom preprocessing

20.1.1 Using Webpack

20.2 The svelte-preprocess package

20.2.1 Auto-preprocessing mode

20.2.2 External files

20.2.3 Global styles

20.2.4 Using Sass

20.2.5 Using TypeScript

20.2.6 A VS Code tip

20.3 Using Markdown

20.4 Using multiple preprocessors

20.5 Image compression

Summary

21 Svelte Native

21.1 Provided components

21.1.1 Display components

21.1.2 Form components

21.1.3 Action components

21.1.4 Dialog components

21.1.5 Layout components

21.1.6 Navigation components

21.2 Getting started with Svelte Native

21.3 Developing Svelte Native apps locally

21.4 NativeScript styling

21.5 Predefined NativeScript CSS classes

21.6 NativeScript themes

21.7 Comprehensive example

21.8 NativeScript UI component library

21.9 Svelte Native issues

Summary

Appendixes

Appendix A: Resources

A.1 Svelte presentations

A.2 Svelte resources

A.3 Framework comparisons

A.4 Sapper resources

A.5 Svelte Native resources

A.6 Svelte GL resources

A.7 Svelte tools

A.8 Svelte libraries

A.9 VS Code resources

A.10 Learning resources not specific to Svelte

A.11 Tools not specific to Svelte

A.12 Libraries not specific to Svelte

A.13 Assets not specific to Svelte

Appendix B: Calling REST services

B.1 Headers

Appendix C: MongoDB

C.1 Installing MongoDB

C.1.1 Installing MongoDB on Windows

C.1.2 Installing MongoDB on Linux

C.1.3 Installing MongoDB on macOS

C.2 Starting the database server

C.3 Using MongoDB shell

C.4 Using MongoDB from JavaScript

Appendix D: ESLint for Svelte

Appendix E: Prettier for Svelte

Appendix F: VS Code

F.1 VS Code settings

F.2 The Svelte for VS Code extension

F.3 The Svelte 3 Snippets extension

F.4 The Svelte Intellisense extension

Appendix G: Snowpack

G.1 Using Snowpack with Svelte

What's inside

  • Creating Svelte components
  • Using stores for shared data
  • Configuring page routing
  • Debugging, testing, and deploying Svelte apps
  • Using Sapper for dynamic and static sites

About the reader

For web developers familiar with HTML, CSS, and JavaScript.

About the author

Mark Volkmann is a partner at Object Computing, where he has provided software consulting and training since 1996.

placing your order...

Don't refresh or navigate away from the page.
print book $29.99 $59.99 pBook + eBook + liveBook
Additional shipping charges may apply
Svelte and Sapper in Action (print book) added to cart
continue shopping
go to cart

eBook $47.99 3 formats + liveBook
Svelte and Sapper in Action (eBook) added to cart
continue shopping
go to cart

Prices displayed in rupees will be charged in USD when you check out.
customers also reading

This book

FREE domestic shipping on three or more pBooks