Svelte and Sapper in Action

by Mark Volkmann

Overview

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

Product Details

ISBN-13:	9781638350682
Publisher:	Manning
Publication date:	09/01/2020
Sold by:	SIMON & SCHUSTER
Format:	eBook
Pages:	456
File size:	12 MB
Note:	This product may take a few minutes to download.

About the Author

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

Table of Contents

Preface xv

Acknowledgments xvi

About this book xviii

About the author xxiii

About the cover illustration xxiv

Part 1 Getting Started 1

1 Meet the players 3

1.1 Introducing Svelte 4

Why Svelte? 4

Rethinking reactivity 9

Current issues in Svelte 11

How does Svelte work? 11

Does Svelte disappear? 13

1.2 Introducing Sapper 13

Why consider Sapper? 14

How does Sapper work? 15

When should Sapper be used? 16

When should Sapper not be used? 16

1.3 Introducing Svelte Native 16

1.4 How does Svelte compare with other web frameworks? 17

Angular 17

React 17

Vue 17

1.5 What tools are needed to get started? 18

2 Your first Svelte app 19

2.1 The Svelte REPL 20

Using the Svelte REPL 20

Your first REPL app 22

Saving REPL apps 26

Sharing REPL apps 28

REPL URLs 28

Exporting REPL apps 29

Using npm packages 29

REPL limitations 30

CodeSandbox 30

2.2 Working outside the REPL 31

Starting with npx degit 31

Provided package.json 33

Important files 33

Your first non-REPL app 35

2.3 Bonus app 37

Part 2 Deeper into Svelte 41

3 Creating components 43

3.1 Content of svelte files 44

3.2 Component markup 45

3.3 Component names 47

3.4 Component styles 48

3.5 CSS specificity 49

3.6 Scoped vs. global styles 50

3.7 Using CSS preprocessors 53

3.8 Component logic 53

3.9 Component state 54

3.10 Reactive statements 55

3.11 Module context 57

3.12 Building a custom component 59

3.13 Building the Travel Packing app 60

4 Block structures 64

4.1 Conditional logic with {#if} 65

4.2 Iteration with {#each} 66

4.3 Promises with {#await} 67

4.4 Building the Travel Packing app 70

Item component 71

Utility functions 73

Category component 73

Checklist component 76

App component 79

Try it 80

5 Component communication 82

5.1 Component communication options 83

5.2 Props 83

Props go in with export 84

Reacting to prop changes 86

Prop types 86

Directives 87

The bind directive on form elements 88

Bind:this 90

Props go out with bind 92

5.3 Slots 96

5.4 Events 97

Event dispatching 97

Event forwarding 99

Event modifiers 99

5.5 Context 100

5.6 Building the Travel Packing app 101

6 Stores 106

6.1 Writable stores 107

6.2 Readable stores 108

6.3 Where to define stores 109

6.4 Using stores 109

6.5 Derived stores 116

6.6 Custom stores 117

6.7 Using stores with classes 118

6.8 Persisting stores 122

6.9 Building the Travel Packing app 123

7 DOM interactions 124

7.1 Inserting HTML 125

7.2 Actions 128

7.3 The tick function 129

7.4 Implementing a dialog component 132

7.5 Drag and drop 135

7.6 Building the Travel Packing app 137

8 Lifecycle Junctions 141

8.1 Setup 142

8.2 The onMount lifecycle function 143

Moving focus 143

Retrieving data from an API service 144

8.3 The onDestroy lifecycle function 145

8.4 The beforeUpdate lifecycle function 146

8.5 The afterUpdate lifecycle function 147

8.6 Using helper functions 148

8.7 Building the Travel Packing app 150

9 Client-side routing 152

9.1 Manual routing 153

9.2 Hash routing 160

9.3 Using the page.js library 162

9.4 Using path and query parameters with page.js 164

9.5 Building the Travel Packing app 167

10 Animation 170

10.1 Easing functions 171

10.2 The svelte/animate package 172

10.3 The svelte/motion package 174

10.4 The svelte/transition package 177

10.5 The fade transition and flip animation 179

10.6 The crossfade transition 181

10.7 The draw transition 183

10.8 Custom transitions 184

10.9 The transition vs. in and out props 186

10.10 Transition events 186

10.11 Building the Travel Packing app 187

11 Debugging 190

11.1 The @debug tag 191

11.2 Reactive statements 193

11.3 Svelte Devtools 194

12 Testing 198

12.1 Unit tests with Jest 199

Unit tests for the Todo app 201

Unit tests for the Travel Packing app 203

12.2 End-to-end tests with Cypress 208

End-to-end tests for the Todo app 210

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

12.3 Accessibility tests 216

Svelte compiler 217

Lighthouse 217

Axe 220

WAVE 223

12.4 Component demos and debugging with Storybook 225

Storybook for Travel Packing app 227

13 Deploying 235

13.1 Deploying to any HTTP server 236

13.2 Using Netlify 236

Netlify from, the website 237

Netlify from the command line 238

Netlify plans 239

13.3 Using Vercel 239

Vercel from the website 240

Vercel from the command line 240

Vercel tiers 241

13.4 Using Docker 241

14 Advanced Svelte 242

14.1 Form validation 243

14.2 Using CSS libraries 247

14.3 Special elements 250

14.4 Importing JSON files 254

14.5 Creating component libraries 254

14.6 Web components 256

Part 3 Deeper into Sapper 261

15 Your first Sapper app 263

15.1 Creating a new Sapper app 265

15.2 Recreating the shopping app with Sapper 266

16 Sapper applications 271

16.1 Sapper file structure 272

16.2 Page routes 275

16.3 Page layouts 276

16.4 Handling errors 279

16.5 Running on both server and client 279

16.6 Fetch API wrapper 280

16.7 Preloading 280

16.8 Prefetching 282

16.9 Code splitting 284

16.10 Building the Travel Packing app 285

17 Sapper server routes 289

17.1 Server route source files 290

17.2 Server route functions 291

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

17.4 Switching to Express 299

17.5 Building the Travel Packing app 300

18 Exporting static sites with Sapper 307

18.1 Sapper details 308

18.2 When to export 308

18.3 Example app 309

19 Sapper offline support 321

19.1 Service worker overview 322

19.2 Caching strategies 323

19.3 Sapper service worker configuration 326

19.4 Service worker events 327

19.5 Managing service workers in Chrome 328

19.6 Enabling the use of HTTPS in the Sapper server 332

19.7 Verifying offline behavior 334

19.8 Building the Travel Packing app 335

Part 4 Beyond Svelte and Sapper 341

20 Preprocessors 343

20.1 Custom preprocessing 344

Using Webpack 345

20.2 The svelte-preprocess package 346

Auto-preprocessing mode 347

External files 347

Global styles 349

Using Sass 349

Using TypeScript 350

A VS Code tip 352

20.3 Using Markdown 352

20.4 Using multiple preprocessors 354

20.5 Image compression 354

21 Svelte Native 356

21.1 Provided components 357

Display components 357

Form components 358

Action components 358

Dialog components 359

Layout components 359

Navigation components 363

21.2 Getting started with Svelte Native 363

21.3 Developing Svelte Native apps locally 364

21.4 NativeScript styling 365

21.5 Predefined NativeScript CSS classes 366

21.6 NativeScript themes 368

21.7 Comprehensive example 368

21.8 NativeScript UI component library 385

21.9 Svelte Native issues 390

Appendix A Resources 391

Appendix B Calling REST services 397

Appendix C MongoDB 400

Appendix D ESLintfor Svelte 407

Appendix E Prettier for Svelte 409

Appendix F VS Code 411

Appendix G Snowpack 415

Index 419