book

Svelte and Sapper in Action

Name: Svelte and Sapper in Action
Author: Mark Volkmann
ISBN: 9781617297946

by Mark Volkmann

September 2020

Beginner to intermediate

456 pages

11h 4m

English

Manning Publications

Audiobook available

Read now

Unlock full access

Svelte and Sapper in Action
Copyright
brief contents
contents
front matter
prefaceacknowledgmentsabout this bookWho should read this bookHow this book is organized: A roadmapAbout the codeliveBook discussion forumOther online resourcesabout the authorabout the cover illustration
Part 1. Getting Started
1 Meet the players
1.1 Introducing Svelte1.1.1 Why Svelte?1.1.2 Rethinking reactivity1.1.3 Current issues in Svelte1.1.4 How does Svelte work?1.1.5 Does Svelte disappear?1.2 Introducing Sapper1.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 Native1.4 How does Svelte compare with other web frameworks?1.4.1 Angular1.4.2 React1.4.3 Vue1.5 What tools are needed to get started?Summary
2 Your first Svelte app
2.1 The Svelte REPL2.1.1 Using the Svelte REPL2.1.2 Your first REPL app2.1.3 Saving REPL apps2.1.4 Sharing REPL apps2.1.5 REPL URLs2.1.6 Exporting REPL apps2.1.7 Using npm packages2.1.8 REPL limitations2.1.9 CodeSandbox2.2 Working outside the REPL2.2.1 Starting with npx degit2.2.2 Provided package.json2.2.3 Important files2.2.4 Your first non-REPL app2.3 Bonus appSummary
Part 2. Deeper into Svelte
3 Creating components
3.1 Content of .svelte files3.2 Component markup3.3 Component names3.4 Component styles3.5 CSS specificity3.6 Scoped vs. global styles3.7 Using CSS preprocessors3.8 Component logic3.9 Component state3.10 Reactive statements3.11 Module context3.12 Building a custom component3.13 Building the Travel Packing appSummary

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 app4.4.1 Item component4.4.2 Utility functions4.4.3 Category component4.4.4 Checklist component4.4.5 App component4.4.6 Try itSummary
5 Component communication
5.1 Component communication options5.2 Props5.2.1 Props go in with export5.2.2 Reacting to prop changes5.2.3 Prop types5.2.4 Directives5.2.5 The bind directive on form elements5.2.6 bind:this5.2.7 Props go out with bind5.3 Slots5.4 Events5.4.1 Event dispatching5.4.2 Event forwarding5.4.3 Event modifiers5.5 Context5.6 Building the Travel Packing appSummary
6 Stores
6.1 Writable stores6.2 Readable stores6.3 Where to define stores6.4 Using stores6.5 Derived stores6.6 Custom stores6.7 Using stores with classes6.8 Persisting stores6.9 Building the Travel Packing appSummary
7 DOM interactions
7.1 Inserting HTML7.2 Actions7.3 The tick function7.4 Implementing a dialog component7.5 Drag and drop7.6 Building the Travel Packing appSummary
8 Lifecycle functions
8.1 Setup8.2 The onMount lifecycle function8.2.1 Moving focus8.2.2 Retrieving data from an API service8.3 The onDestroy lifecycle function8.4 The beforeUpdate lifecycle function8.5 The afterUpdate lifecycle function8.6 Using helper functions8.7 Building the Travel Packing appSummary
9 Client-side routing
9.1 Manual routing9.2 Hash routing9.3 Using the page.js library9.4 Using path and query parameters with page.js9.5 Building the Travel Packing appSummary
10 Animation
10.1 Easing functions10.2 The svelte/animate package10.3 The svelte/motion package10.4 The svelte/transition package10.5 The fade transition and flip animation10.6 The crossfade transition10.7 The draw transition10.8 Custom transitions10.9 The transition vs. in and out props10.10 Transition events10.11 Building the Travel Packing appSummary
11 Debugging
11.1 The @debug tag11.2 Reactive statements11.3 Svelte DevtoolsSummary
12 Testing
12.1 Unit tests with Jest12.1.1 Unit tests for the Todo app12.1.2 Unit tests for the Travel Packing app12.2 End-to-end tests with Cypress12.2.1 End-to-end tests for the Todo app12.2.2 End-to-end tests for the Travel Packing app12.3 Accessibility tests12.3.1 Svelte compiler12.3.2 Lighthouse12.3.3 axe12.3.4 WAVE12.4 Component demos and debugging with Storybook12.4.1 Storybook for Travel Packing appSummary
13 Deploying
13.1 Deploying to any HTTP server13.2 Using Netlify13.2.1 Netlify from the website13.2.2 Netlify from the command line13.2.3 Netlify plans13.3 Using Vercel13.3.1 Vercel from the website13.3.2 Vercel from the command line13.3.3 Vercel tiers13.4 Using DockerSummary
14 Advanced Svelte
14.1 Form validation14.2 Using CSS libraries14.3 Special elements14.4 Importing JSON files14.5 Creating component libraries14.6 Web componentsSummary
Part 3. Deeper into Sapper
15 Your first Sapper app
15.1 Creating a new Sapper app15.2 Recreating the shopping app with SapperSummary
16 Sapper applications
16.1 Sapper file structure16.2 Page routes16.3 Page layouts16.4 Handling errors16.5 Running on both server and client16.6 Fetch API wrapper16.7 Preloading16.8 Prefetching16.9 Code splitting16.10 Building the Travel Packing appSummary
17 Sapper server routes
17.1 Server route source files17.2 Server route functions17.3 A create/retrieve/update/delete (CRUD) example17.4 Switching to Express17.5 Building the Travel Packing appSummary
18 Exporting static sites with Sapper
18.1 Sapper details18.2 When to export18.3 Example appSummary
19 Sapper offline support
19.1 Service worker overview19.2 Caching strategies19.3 Sapper service worker configuration19.4 Service worker events19.5 Managing service workers in Chrome19.6 Enabling the use of HTTPS in the Sapper server19.7 Verifying offline behavior19.8 Building the Travel Packing appSummary
Part 4. Beyond Svelte and Sapper
20 Preprocessors
20.1 Custom preprocessing20.1.1 Using Webpack20.2 The svelte-preprocess package20.2.1 Auto-preprocessing mode20.2.2 External files20.2.3 Global styles20.2.4 Using Sass20.2.5 Using TypeScript20.2.6 A VS Code tip20.3 Using Markdown20.4 Using multiple preprocessors20.5 Image compressionSummary
21 Svelte Native
21.1 Provided components21.1.1 Display components21.1.2 Form components21.1.3 Action components21.1.4 Dialog components21.1.5 Layout components21.1.6 Navigation components21.2 Getting started with Svelte Native21.3 Developing Svelte Native apps locally21.4 NativeScript styling21.5 Predefined NativeScript CSS classes21.6 NativeScript themes21.7 Comprehensive example21.8 NativeScript UI component library21.9 Svelte Native issuesSummary
appendixes
appendix A. Resources
A.1 Svelte presentationsA.2 Svelte resourcesA.3 Framework comparisonsA.4 Sapper resourcesA.5 Svelte Native resourcesA.6 Svelte GL resourcesA.7 Svelte toolsA.8 Svelte librariesA.9 VS Code resourcesA.10 Learning resources not specific to SvelteA.11 Tools not specific to SvelteA.12 Libraries not specific to SvelteA.13 Assets not specific to Svelte
appendix B. Calling REST services
B.1 Headers
appendix C. MongoDB
C.1 Installing MongoDBC.1.1 Installing MongoDB on WindowsC.1.2 Installing MongoDB on LinuxC.1.3 Installing MongoDB on macOSC.2 Starting the database serverC.3 Using MongoDB shellC.4 Using MongoDB from JavaScript
appendix D. ESLint for Svelte
appendix E. Prettier for Svelte
appendix F. VS Code
F.1 VS Code settingsF.2 The Svelte for VS Code extensionF.3 The Svelte 3 Snippets extensionF.4 The Svelte Intellisense extension
appendix G. Snowpack
G.1 Using Snowpack with Svelte
index

Content preview from Svelte and Sapper in Action

brief 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 sites with Sapper

19 Sapper offline support

Part 4 Beyond Svelte and Sapper

20 Preprocessors

21 Svelte Native

Appendixes:

A Resources

B Calling REST services

C MongoDB

D ESLint for Svelte

E Prettier for Svelte

F VS Code

G Snowpack

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781617297946Publisher Support Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Svelte and Sapper in Action

by Mark Volkmann

brief contents

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.