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

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.

• 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

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.

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.

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.

Summary
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.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

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.

Table of Contents

PART 1 - GETTING STARTED

1 Meet the players

2 Your first Svelte app

PART 2 - DEEPER INTO SVELTE

3 Creating components

4 Block structures

5 Component communication

6 Stores

7 DOM interactions

8 Lifecycle functions

9 Client-side routing

10 Animation

11 Debugging

12 Testing

13 Deploying

14 Advanced Svelte

PART 3 - DEEPER INTO SAPPER

15 Your first Sapper app

16 Sapper applications

17 Sapper server routes

18 Exporting static sties with Sapper

19 Sapper offline support

PART 4 - BEYOND SVELTE AND SAPPER

20 Preprocessors

21 Svelte Native