Book Image

Real-World Svelte

By : Tan Li Hau
4.3 (4)
Book Image

Real-World Svelte

4.3 (4)
By: Tan Li Hau

Overview of this book

Svelte has quickly become a popular choice among developers seeking to build fast, responsive, and efficient web applications that are high-performing, scalable, and visually stunning. This book goes beyond the basics to help you thoroughly explore the core concepts that make Svelte stand out among other frameworks. You’ll begin by gaining a clear understanding of lifecycle functions, reusable hooks, and various styling options such as Tailwind CSS and CSS variables. Next, you’ll find out how to effectively manage the state, props, and bindings and explore component patterns for better organization. You’ll also discover how to create patterns using actions, demonstrate custom events, integrate vanilla JS UI libraries, and progressively enhance UI elements. As you advance, you’ll delve into state management with context and stores, implement custom stores, handle complex data, and manage states effectively, along with creating renderless components for specialized functionalities and learning animations with tweened and spring stores. The concluding chapters will help you focus on enhancing UI elements with transitions while covering accessibility considerations. By the end of this book, you’ll be equipped to unlock Svelte's full potential, build exceptional web applications, and deliver performant, responsive, and inclusive user experiences.
Table of Contents (22 chapters)
1
Part 1: Writing Svelte Components
6
Part 2: Actions
10
Part 3: Context and Stores
16
Part 4: Transitions

What this book covers

Chapter 1, Lifecycles in Svelte, provides an overview of Svelte’s lifecycles, their respective functions, the rules for invoking them, and strategies to reuse and compose these lifecycle functions.

Chapter 2, Implementing Styling and Theming, dives into six unique methods to style Svelte components. You will also learn the essentials of theming Svelte components, from defining themes to enabling user customization.

Chapter 3, Managing Props and State, deepens your understanding of props and state within Svelte. This chapter demystifies props, state, and bindings, and discusses the distinctions between one-way and two-way data bindings. It also showcases deriving state from props.

Chapter 4, Composing Components, provides techniques to control content within child components from their parent components. You will explore the <slot> element and various Svelte special elements, such as <svelte:self> and <svelte:fragment>.

Chapter 5, Custom Events with Actions, kickstarts your exploration of Svelte actions over three chapters. This chapter starts by exploring the idea of creating custom events using Svelte actions.

Chapter 6, Integrating Libraries with Actions, provides a hands-on guide to integrating a third-party JavaScript library into Svelte using actions.

Chapter 7, Progressive Enhancements with Svelte Actions, unpacks the concept of progressive enhancements and helps you understand how Svelte actions can be leveraged to progressively enhance your Svelte application.

Chapter 8, Context versus Stores, delves into Svelte context and stores. You’ll learn how and when to use Svelte context and stores.

Chapter 9, Implementing Custom Stores, teaches you how to implement custom Svelte stores through a practical step-by-step guide, going through multiple real-world examples along the way.

Chapter 10, State Management with Svelte Stores, arms you with practical tips on managing application state in Svelte applications. You will also learn how to use third-party state management libraries in Svelte.

Chapter 11, Renderless Components, explores the concept of the renderless component, a type of reusable component that does not render any HTML elements of its own. We will systematically go through implementing such a component.

Chapter 12, Stores and Animations, explores the built-in tweened and spring stores. You’ll learn how to apply them in your Svelte application, and how to customize the interpolation for these animating stores.

Chapter 13, Using Transitions, provides a comprehensive understanding of transitions in Svelte. You’ll learn how to use transitions in Svelte, when and how transitions are played, and how they work under the hood.

Chapter 14, Exploring Custom Transitions, explores the idea of writing a custom transition in Svelte. You’ll learn about the Svelte transition contract, and with practical examples, you’ll be guided step by step through creating a custom transition in Svelte.

Chapter 15, Accessibility with Transitions, sheds light on accessibility considerations in transitions, particularly for users with vestibular disorders. You’ll gain insights into crafting responsible transitions that respect user preferences and cater to all.