Welcome to Manning India!

We are pleased to be able to offer regional eBook pricing for Indian residents.
All eBook prices are discounted 40% or more!
Svelte and Sapper in Action
Mark Volkmann
  • MEAP began January 2020
  • Publication in Early 2021 (estimated)
  • ISBN 9781617297946
  • 325 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.
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 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

5.2 Props

5.2.1 Props go in with export

5.2.2 Directives

5.2.3 bind directive on form elements

5.2.4 bind:this

5.2.5 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

5.7 Summary

6 Stores

6.1 Kinds of stores

6.2 Writable stores

6.3 Readable stores

6.4 Where to define stores

6.5 Using stores

6.6 Derived stores

6.7 Custom stores

6.8 get function

6.9 Using stores with classes

6.10 Persisting stores

6.11 Building the Travel Packing app

6.12 Summary

7 DOM Interactions

7.1 Inserting HTML

7.2 Actions

7.3 tick function

7.4 Implementing a dialog component

7.5 Drag and drop

7.6 Building the Travel Packing app

7.7 Summary

8 Lifecycle Functions

8.1 onMount

8.1.1 Moving focus

8.1.2 Retrieving data from a REST service

8.2 onDestroy

8.3 beforeUpdate

8.4 afterUpdate

8.5 Using helper functions

8.6 Building the Travel Packing app

8.7 Summary

9 Routing

9.1 Manual routing

9.2 Hash routing

9.3 Page library

9.4 Using path and query parameters with page

9.5 Building the Travel Packing app

9.6 Summary

10 Animation

10.1 Easing functions

10.2 svelte/animate

10.3 svelte/motion

10.4 svelte/transition

10.5 fade and flip

10.6 crossfade transition

10.7 draw transition

10.8 Custom transitions

10.9 transition vs. in and out

10.10 Transition events

10.11 Building the Travel Packing app

10.12 Summary

11 Debugging

11.1 @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 ZEIT Now

13.3.1 ZEIT Now from the website

13.3.2 ZEIT Now from the command line

13.3.3 Tiers

13.4 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

17 Sapper Server routes

18 Exporting static sites

19 Offline support with ServiceWorkers

Appendixes

Appendix A: Svelte resources

Appendix B: Svelte preprocessing

Appendix C: REST

Appendix D: MongoDB

Appendix E: ESLint

Appendix F: Prettier

Appendix G: VS Code

Appendix H: Getting started with Svelte Native

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.

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.

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.
MEAP combo $59.99 pBook + eBook + liveBook
MEAP eBook $47.99 pdf + ePub + kindle + liveBook
Prices displayed in rupees will be charged in USD when you check out.

placing your order...

Don't refresh or navigate away from the page.

FREE domestic shipping on three or more pBooks