Svelte and Sapper in Action
Mark Volkmann
  • MEAP began January 2020
  • Publication in September 2020 (estimated)
  • ISBN 9781617297946
  • 475 pages (estimated)
  • printed in black & white

If you want to get into Svelte and Sapper smoothly, use this book.

Gerd Klevesaat
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

Rather than loading a framework like Angular, Vue, or React into the browser, Svelte compiles your components into tiny, well-organized JavaScript modules. That means your app loads lightning fast and runs even faster, in part because there’s no need to load “just-in-case” framework code. Svelte also streamlines your UI development with a host of powerful features such as reactive statements, two-way data binding, stores, and context. The Sapper framework pairs perfectly with Svelte for efficient server-side rendering, code splitting, and API development.

About the book

Svelte and Sapper in Action is a comprehensive guide to building web apps with Svelte and Sapper. You’ll dive straight into coding a complete travel packing app as you learn to write, compile, and organize Svelte components for your app’s UI. From there, you’ll master Svelte’s awesome state management model and learn to use Sapper for simplified page routing, creating static sites, and providing offline support with Service Workers. By the time you’re done, you’ll be able to build web applications that are easier to understand, offer great UX, and don’t compromise on SEO.
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?

1.6 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

2.4 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

3.14 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

4.5 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

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

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

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

8.8 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

9.6 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

10.12 Summary

11 Debugging

11.1 The @debug tag

11.2 Reactive statements

11.3 Svelte Devtools

11.4 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

12.5 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

13.5 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

14.7 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

15.3 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 Pre-fetching

16.9 Code splitting

16.10 Building the Travel Packing app

16.11 Summary

17 Sapper server routes

17.1 Server route source files

17.2 Server route functions

17.3 Create/Retrieve/Update/Delete (CRUD) example

17.4 Switching to Express

17.5 Building the Travel Packing app

17.6 Summary

18 Exporting static sites with Sapper

18.1 Sapper details

18.2 When to export

18.3 Example app

18.4 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 use of HTTPS in the Sapper server

19.7 Verifying offline behavior

19.8 Building the Travel Packing app

19.9 Summary

Part 4: Beyond Svelte and Sapper

20 Preprocessors

20.1 Custom preprocessing

20.1.1 Using Webpack

20.2 svelte-preprocess

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 VS Code tip

20.3 Using Markdown

20.4 Using multiple preprocessors

20.5 Image compression

20.6 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

21.10 Summary

Appendixes

Appendix A: 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: Appendix B. Calling REST services

B.1 Headers

Appendix C: Appendix C. MongoDB

C.1 Installing MongoDB

C.1.1 Install MongoDB on Windows

C.1.2 Install MongoDB on Linux

C.1.3 Install MongoDB on macOS

C.2 Starting the database server

C.3 Using MongoDB Shell

C.4 Using MongoDB from JavaScript

Appendix D: Appendix D. ESLint for Svelte

Appendix E: Appendix E. Prettier for Svelte

Appendix F: Appendix F. VS Code

F.1 VS Code settings

F.2 "Svelte Beta" extension

F.3 "Svelte 3 Snippets" extension

F.4 "Svelte Intellisense" extension

Appendix G: Snowpack

What's inside

  • Creating Svelte applications and components
  • Communicating between Svelte components
  • Routing between pages in both Svelte and Sapper
  • Adding animation to components
  • Debugging, testing, and deploying applications
  • Implementing and invoking REST services in a Sapper app
  • Exporting a Sapper app as a static site

About the reader

For front-end web developers familiar with the basics of HTML, CSS, and JavaScript.

About the author

Mark Volkmann is a partner at Object Computing, Inc. (OCI) in St. Louis where he has provided software consulting and training since 1996. As a consultant, Mark has assisted many companies with JavaScript, Node.js, React, Vue, Angular, and more.

placing your order...

Don't refresh or navigate away from the page.
Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
print book $34.79 $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 $31.19 $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.

FREE domestic shipping on three or more pBooks