Practical Svelte: Create Performant Applications with the Svelte Component Framework

by Alex Libby

Overview

Learn to leverage the power of Svelte to produce web applications that are efficient and fast. This project-oriented book simplifies creating sites using Svelte from start to finish, with little more than a text editor and familiar languages such as HTML, CSS, and JavaScript. It equips you with a starting toolset that you can use to develop future projects, incorporate into your existing workflow, and allow you to take your websites to the next level.

Practical Svelte is an excellent resource for getting acquainted with creating and manipulating websites or online applications using a component framework approach. It takes the view that we don’t have to create something complex and unwieldy. We can build something quickly, using less code than some of its competitors, and extend it using the power of the API and plugins over time, without sacrificing speed or features.

You will learn how to use the Svelte framework to rapidly create and deploy websites or online applications that are performant, with the minimum of fuss and using existing tools already available in the browser, get up to speed with individual features of the Svelte framework, and work through a series of small projects that will combine to produce a finished site at the end of the book – this to help consolidate skills from day one and create something that you can use as a basis for future projects.

What You Will Learn

• Understand why Svelte’s popularity makes it the go-to framework for constructing applications
• Learn how to scaffold and implement web sites or online applications using Svelte
• Create reusable components using Svelte that are interoperable with other frameworks and can solve real-world problems
• Perform automated testing and deployment using tools such as CI/CD testing
• Work through some mini projects from start to finish, understanding what we can achieve using Svelte and where we may need to bring other tools into play

Who This Book Is For

Website developers who are already familiar with JavaScript, CSS, and HTML and are keen to learn how to leverage the Svelte component framework to quickly create web sites or online applications with little more than a text editor. It’s perfect for development teams who do not want to follow the mold and use a credible alternative to React or Angular.

Product Details

ISBN-13:	9781484273739
Publisher:	Apress
Publication date:	10/08/2021
Edition description:	1st ed.
Pages:	317
Product dimensions:	7.01(w) x 10.00(h) x (d)

About the Author

Alex Libby is a frontend engineer and seasoned computer book author who hails from England. His passion for all things Open Source dates back to the days of his degree studies, where he first came across web development and has been hooked ever since. His daily work involves extensive use of React, NodeJS, JavaScript, HTML, and CSS; Alex enjoys tinkering with different open source libraries to see how they work. He has spent a stint maintaining the jQuery Tools library and enjoys writing about Open Source technologies, principally for front end UI development.

Table of Contents

Introduction (2 pages)

Chapter 1: Getting Started – 20 pages

1. Setting up our development environment – Git, Git repository, Svelte, editor, etc

2. Exploring the basic principles of using Svelte – a primer only: enough to give beginners something to work on

3. Setting up the starting site for the book

4. Reviewing the changes made

5. Setting the background for this book

Chapter 2: Creating Components – 30 pages

1. Understanding the makeup of components

2. Creating some examples

3. Publishing examples

4. X

5. Adding functionality to the frontend demo

Chapter 3: Managing State and Data – 30 pages

1. Passing and setting values in code

2. Exploring the world of props

3. Creating and maintaining Svelte stores

4. X

5. Adding functionality to the frontend demo

Chapter 4: Controlling Logic – 30 pages

1. Creating if-else conditions

2. Working through some examples

3. X

4. X

5. Adding functionality to the frontend demo

Chapter 5: Managing Events – 35 pages

1. The theory of reactivity – updating the DOM

2. Different event types – which to choose?

3. X

4. X

5. Adding functionality to the frontend demo

Chapter 6: Binding Elements – 30 pages

1. Creating forms in Svelte

2. Binding and managing events

3. Catering for different form elements

4. Managing context

5. Adding functionality to the frontend demo

Chapter 7: Adding Styles – 20 pages

1. Understanding styling in Svelte

2. Inlining or external?

3. Taking it further – using a style preprocessor

4. Applying themes – using a plugin or manually

5. Adding functionality to the frontend demo

Chapter 8: Unit Testing and Svelte – 30 pages

1. Deciding our strategy

2. Setting up testing environment

3. Creating example tests

4. Assessing the outcome

5. Applying principles to our project

Chapter 9: Deploying Svelte – 30 pages

1. Debugging Svelte

2. Understanding the deployment process

3. Setting up the hosting provider

4. Deploying content to production

5. Bonus – applying a domain name

Chapter 10: Working with External Libraries – 30 pages

1. Exploring example libraries

2. Working client-side v. server-side – watch out!

3. Adding Stripe to our frontend site project

4. Reviewing the changes made

5. What about React?

Chapter 11: Animating Svelte – 30 pages

1. Auditing the site – how could we use animation?

2. A quick review of types of animation options

3. Working through some examples

4. Creating custom animations

5. Using Svelte libraries

6. Applying animation to our frontend project

Chapter 12: Adapting for Sapper – 20 pages

1. Introducing Sapper

2. Setting up a Sapper site

3. Exploring the structure of a Sapper site

4. Migrating our frontend project to Sapper

Appendix: API Reference (15 pages) – its inclusion to be confirmed

This section will cover guidance on where to seek help when using Svelte if needed and how to debug Svelte