Svelte and Sapper in Action

Svelte and Sapper in Action

by Mark Volkmann
Released September 2020
Publisher(s): Manning Publications
ISBN: 9781617297946

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

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.

Quotes
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

This is the book on Svelte and Sapper. This book will give you expert knowledge on how to write efficient web apps that your users will love.
- Gustavo Filipe Ramos Gomes, Brightcove

Finding a book about Svelte is still rare, as it is such a new technology, but this one is a real gem. It is useful for both beginners and advanced users.
- Sander Zegveld, Developers.nl

Table of contents

  1. Svelte and Sapper in Action
  2. Copyright
  3. brief contents
  4. contents
  5. front matter
    1. preface
    2. acknowledgments
    3. about this book
      1. Who should read this book
      2. How this book is organized: A roadmap
      3. About the code
      4. liveBook discussion forum
      5. Other online resources
    4. about the author
    5. about the cover illustration
  6. Part 1. Getting Started
  7. 1 Meet the players
    1. 1.1 Introducing Svelte
      1. 1.1.1 Why Svelte?
      2. 1.1.2 Rethinking reactivity
      3. 1.1.3 Current issues in Svelte
      4. 1.1.4 How does Svelte work?
      5. 1.1.5 Does Svelte disappear?
    2. 1.2 Introducing Sapper
      1. 1.2.1 Why consider Sapper?
      2. 1.2.2 How does Sapper work?
      3. 1.2.3 When should Sapper be used?
      4. 1.2.4 When should Sapper not be used?
    3. 1.3 Introducing Svelte Native
    4. 1.4 How does Svelte compare with other web frameworks?
      1. 1.4.1 Angular
      2. 1.4.2 React
      3. 1.4.3 Vue
    5. 1.5 What tools are needed to get started?
    6. Summary
  8. 2 Your first Svelte app
    1. 2.1 The Svelte REPL
      1. 2.1.1 Using the Svelte REPL
      2. 2.1.2 Your first REPL app
      3. 2.1.3 Saving REPL apps
      4. 2.1.4 Sharing REPL apps
      5. 2.1.5 REPL URLs
      6. 2.1.6 Exporting REPL apps
      7. 2.1.7 Using npm packages
      8. 2.1.8 REPL limitations
      9. 2.1.9 CodeSandbox
    2. 2.2 Working outside the REPL
      1. 2.2.1 Starting with npx degit
      2. 2.2.2 Provided package.json
      3. 2.2.3 Important files
      4. 2.2.4 Your first non-REPL app
    3. 2.3 Bonus app
    4. Summary
  9. Part 2. Deeper into Svelte
  10. 3 Creating components
    1. 3.1 Content of .svelte files
    2. 3.2 Component markup
    3. 3.3 Component names
    4. 3.4 Component styles
    5. 3.5 CSS specificity
    6. 3.6 Scoped vs. global styles
    7. 3.7 Using CSS preprocessors
    8. 3.8 Component logic
    9. 3.9 Component state
    10. 3.10 Reactive statements
    11. 3.11 Module context
    12. 3.12 Building a custom component
    13. 3.13 Building the Travel Packing app
    14. Summary
  11. 4 Block structures
    1. 4.1 Conditional logic with {#if}
    2. 4.2 Iteration with {#each}
    3. 4.3 Promises with {#await}
    4. 4.4 Building the Travel Packing app
      1. 4.4.1 Item component
      2. 4.4.2 Utility functions
      3. 4.4.3 Category component
      4. 4.4.4 Checklist component
      5. 4.4.5 App component
      6. 4.4.6 Try it
    5. Summary
  12. 5 Component communication
    1. 5.1 Component communication options
    2. 5.2 Props
      1. 5.2.1 Props go in with export
      2. 5.2.2 Reacting to prop changes
      3. 5.2.3 Prop types
      4. 5.2.4 Directives
      5. 5.2.5 The bind directive on form elements
      6. 5.2.6 bind:this
      7. 5.2.7 Props go out with bind
    3. 5.3 Slots
    4. 5.4 Events
      1. 5.4.1 Event dispatching
      2. 5.4.2 Event forwarding
      3. 5.4.3 Event modifiers
    5. 5.5 Context
    6. 5.6 Building the Travel Packing app
    7. Summary
  13. 6 Stores
    1. 6.1 Writable stores
    2. 6.2 Readable stores
    3. 6.3 Where to define stores
    4. 6.4 Using stores
    5. 6.5 Derived stores
    6. 6.6 Custom stores
    7. 6.7 Using stores with classes
    8. 6.8 Persisting stores
    9. 6.9 Building the Travel Packing app
    10. Summary
  14. 7 DOM interactions
    1. 7.1 Inserting HTML
      1. 7.2 Actions
    2. 7.3 The tick function
    3. 7.4 Implementing a dialog component
    4. 7.5 Drag and drop
    5. 7.6 Building the Travel Packing app
    6. Summary
  15. 8 Lifecycle functions
    1. 8.1 Setup
    2. 8.2 The onMount lifecycle function
      1. 8.2.1 Moving focus
      2. 8.2.2 Retrieving data from an API service
    3. 8.3 The onDestroy lifecycle function
    4. 8.4 The beforeUpdate lifecycle function
    5. 8.5 The afterUpdate lifecycle function
    6. 8.6 Using helper functions
    7. 8.7 Building the Travel Packing app
    8. Summary
  16. 9 Client-side routing
    1. 9.1 Manual routing
    2. 9.2 Hash routing
    3. 9.3 Using the page.js library
    4. 9.4 Using path and query parameters with page.js
    5. 9.5 Building the Travel Packing app
    6. Summary
  17. 10 Animation
    1. 10.1 Easing functions
    2. 10.2 The svelte/animate package
    3. 10.3 The svelte/motion package
    4. 10.4 The svelte/transition package
    5. 10.5 The fade transition and flip animation
    6. 10.6 The crossfade transition
    7. 10.7 The draw transition
    8. 10.8 Custom transitions
    9. 10.9 The transition vs. in and out props
    10. 10.10 Transition events
    11. 10.11 Building the Travel Packing app
    12. Summary
  18. 11 Debugging
    1. 11.1 The @debug tag
    2. 11.2 Reactive statements
    3. 11.3 Svelte Devtools
    4. Summary
  19. 12 Testing
    1. 12.1 Unit tests with Jest
      1. 12.1.1 Unit tests for the Todo app
      2. 12.1.2 Unit tests for the Travel Packing app
    2. 12.2 End-to-end tests with Cypress
      1. 12.2.1 End-to-end tests for the Todo app
      2. 12.2.2 End-to-end tests for the Travel Packing app
    3. 12.3 Accessibility tests
      1. 12.3.1 Svelte compiler
      2. 12.3.2 Lighthouse
      3. 12.3.3 axe
      4. 12.3.4 WAVE
    4. 12.4 Component demos and debugging with Storybook
      1. 12.4.1 Storybook for Travel Packing app
    5. Summary
  20. 13 Deploying
    1. 13.1 Deploying to any HTTP server
    2. 13.2 Using Netlify
      1. 13.2.1 Netlify from the website
      2. 13.2.2 Netlify from the command line
      3. 13.2.3 Netlify plans
    3. 13.3 Using Vercel
      1. 13.3.1 Vercel from the website
      2. 13.3.2 Vercel from the command line
      3. 13.3.3 Vercel tiers
    4. 13.4 Using Docker
    5. Summary
  21. 14 Advanced Svelte
    1. 14.1 Form validation
    2. 14.2 Using CSS libraries
    3. 14.3 Special elements
    4. 14.4 Importing JSON files
    5. 14.5 Creating component libraries
    6. 14.6 Web components
    7. Summary
  22. Part 3. Deeper into Sapper
  23. 15 Your first Sapper app
    1. 15.1 Creating a new Sapper app
    2. 15.2 Recreating the shopping app with Sapper
    3. Summary
  24. 16 Sapper applications
    1. 16.1 Sapper file structure
    2. 16.2 Page routes
    3. 16.3 Page layouts
    4. 16.4 Handling errors
    5. 16.5 Running on both server and client
    6. 16.6 Fetch API wrapper
    7. 16.7 Preloading
    8. 16.8 Prefetching
    9. 16.9 Code splitting
    10. 16.10 Building the Travel Packing app
    11. Summary
  25. 17 Sapper server routes
    1. 17.1 Server route source files
    2. 17.2 Server route functions
    3. 17.3 A create/retrieve/update/delete (CRUD) example
    4. 17.4 Switching to Express
    5. 17.5 Building the Travel Packing app
    6. Summary
  26. 18 Exporting static sites with Sapper
    1. 18.1 Sapper details
    2. 18.2 When to export
    3. 18.3 Example app
    4. Summary
  27. 19 Sapper offline support
    1. 19.1 Service worker overview
    2. 19.2 Caching strategies
    3. 19.3 Sapper service worker configuration
    4. 19.4 Service worker events
    5. 19.5 Managing service workers in Chrome
    6. 19.6 Enabling the use of HTTPS in the Sapper server
    7. 19.7 Verifying offline behavior
    8. 19.8 Building the Travel Packing app
    9. Summary
  28. Part 4. Beyond Svelte and Sapper
  29. 20 Preprocessors
    1. 20.1 Custom preprocessing
      1. 20.1.1 Using Webpack
    2. 20.2 The svelte-preprocess package
      1. 20.2.1 Auto-preprocessing mode
      2. 20.2.2 External files
      3. 20.2.3 Global styles
      4. 20.2.4 Using Sass
      5. 20.2.5 Using TypeScript
      6. 20.2.6 A VS Code tip
    3. 20.3 Using Markdown
    4. 20.4 Using multiple preprocessors
    5. 20.5 Image compression
    6. Summary
  30. 21 Svelte Native
    1. 21.1 Provided components
      1. 21.1.1 Display components
      2. 21.1.2 Form components
      3. 21.1.3 Action components
      4. 21.1.4 Dialog components
      5. 21.1.5 Layout components
      6. 21.1.6 Navigation components
    2. 21.2 Getting started with Svelte Native
    3. 21.3 Developing Svelte Native apps locally
    4. 21.4 NativeScript styling
    5. 21.5 Predefined NativeScript CSS classes
    6. 21.6 NativeScript themes
    7. 21.7 Comprehensive example
    8. 21.8 NativeScript UI component library
    9. 21.9 Svelte Native issues
    10. Summary
  31. appendixes
  32. appendix A. Resources
    1. A.1 Svelte presentations
    2. A.2 Svelte resources
    3. A.3 Framework comparisons
    4. A.4 Sapper resources
    5. A.5 Svelte Native resources
    6. A.6 Svelte GL resources
    7. A.7 Svelte tools
    8. A.8 Svelte libraries
    9. A.9 VS Code resources
    10. A.10 Learning resources not specific to Svelte
    11. A.11 Tools not specific to Svelte
    12. A.12 Libraries not specific to Svelte
    13. A.13 Assets not specific to Svelte
  33. appendix B. Calling REST services
    1. B.1 Headers
  34. appendix C. MongoDB
    1. C.1 Installing MongoDB
      1. C.1.1 Installing MongoDB on Windows
      2. C.1.2 Installing MongoDB on Linux
      3. C.1.3 Installing MongoDB on macOS
    2. C.2 Starting the database server
    3. C.3 Using MongoDB shell
    4. C.4 Using MongoDB from JavaScript
  35. appendix D. ESLint for Svelte
  36. appendix E. Prettier for Svelte
  37. appendix F. VS Code
    1. F.1 VS Code settings
    2. F.2 The Svelte for VS Code extension
    3. F.3 The Svelte 3 Snippets extension
    4. F.4 The Svelte Intellisense extension
  38. appendix G. Snowpack
    1. G.1 Using Snowpack with Svelte
  39. index

Product information

  • Title: Svelte and Sapper in Action
  • Author(s): Mark Volkmann
  • Release date: September 2020
  • Publisher(s): Manning Publications
  • ISBN: 9781617297946