Real-World Svelte

Real-World Svelte

by Tan Li Hau
Released December 2023
Publisher(s): Packt Publishing
ISBN: 9781804616031

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Harness the power of Svelte, the cutting-edge JavaScript framework used for building high-performance web applications, with this definitive guide

Key Features

  • Create Svelte component lifecycles by styling and theming components as well as managing props and states
  • Leverage actions to build custom events, integrate libraries, and enhance UI elements progressively
  • Explore transitions, write custom transitions, and go through accessibility with transitions in Svelte
  • Purchase of the print or Kindle book includes a free PDF eBook

Book Description

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.

What you will learn

  • Master Svelte component development and write efficient Svelte code
  • Implement styling and theming techniques to create visually stunning UIs
  • Create reusable and composable Svelte components for better code organization
  • Understand state management with context and stores for scalable applications
  • Explore different use cases of Svelte stores and Svelte context
  • Utilize tweened and spring stores for complex animations and custom easing

Who this book is for

This book is for experienced web developers looking to enhance their skills and create high-performance web applications. Familiarity with JavaScript, frontend development, and basic Svelte concepts is recommended, making it ideal for professionals and developers who want to master Svelte's advanced features.

Table of contents

  1. Real-World Svelte
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Share Your Thoughts
    8. Download a free PDF copy of this book
  7. Part 1: Writing Svelte Components
  8. Chapter 1: Lifecycles in Svelte
    1. Technical requirements
    2. Understanding the Svelte lifecycle functions
      1. Initializing the component
      2. Mounting the component
      3. Updating the component
      4. Destroying the component
    3. The one rule for calling lifecycle functions
      1. Refactoring lifecycle functions
      2. Which component to register?
    4. Reusing lifecycle functions in Svelte components
      1. Exercise 1 – Update counter
    5. Composing lifecycle functions into reusable hooks
    6. Coordinating lifecycle functions across components
      1. Exercise 2 – Scroll blocker
    7. Summary
  9. Chapter 2: Implementing Styling and Theming
    1. Technical requirements
    2. Styling Svelte components in six different ways
      1. Styling with the style attribute
      2. Using style: directives
      3. Adding the <style> block
      4. Adding the class attribute
      5. Simplifying the class attribute with the class: directive
      6. Applying styles from external CSS files
      7. Choosing which method to style Svelte components
    3. Styling Svelte with Tailwind CSS
      1. Setting up Tailwind CSS
    4. Theming Svelte components with CSS custom properties
      1. Defining CSS custom properties
      2. Example – implementing a dark/light theme mode
      3. Allowing users to change the styles of a component
      4. Aligning the fallback value
    5. Summary
  10. Chapter 3: Managing Props and State
    1. Technical requirements
    2. Defining props and state
      1. Defining props
      2. Defining state
      3. Props versus state
    3. Understanding bindings
    4. One-way versus two-way data flow
    5. Deriving states from props with a reactive declaration
    6. Managing complex derived states
    7. Updating props using derived states
    8. Summary
  11. Chapter 4: Composing Components
    1. Technical requirements
    2. Manipulating how a child component looks
    3. Passing dynamic content through slots
      1. Providing default slot content
      2. Having multiple slots with named slots
      3. Passing data through slot props
    4. Rendering different HTML element or component types
    5. Creating recursive components for recursive data
    6. Example – a JSON tree viewer
    7. The Container/Presentational pattern
    8. Summary
  12. Part 2: Actions
  13. Chapter 5: Custom Events with Actions
    1. Technical requirements
    2. Defining actions
    3. Reusing DOM event logic with custom events
      1. Encapsulating logic into a component
      2. Encapsulating logic into an action
      3. Passing parameters to an action
    4. Example – validating form inputs with custom events
    5. Exercise – creating a drag-and-drop event
    6. Summary
  14. Chapter 6: Integrating Libraries with Actions
    1. Technical requirements
    2. Integrating vanilla JavaScript UI libraries into Svelte
      1. Why use Svelte actions to integrate a UI library?
      2. Using Svelte actions
      3. Adding data to Svelte actions
      4. An alternative to Svelte actions
      5. Choosing between Svelte actions and Svelte components
    3. Example – integrating Tippy.js
    4. Example – integrating CodeMirror
    5. Using UI libraries written in other frameworks
      1. Creating components in various frameworks
      2. Cleaning up the components in various frameworks
      3. Updating the component in various frameworks
    6. Integrating react-calendar into Svelte
    7. Summary
  15. Chapter 7: Progressive Enhancement with Actions
    1. Technical requirements
    2. What is progressive enhancement?
      1. Progressively enhancing the web experience
      2. Building web pages in layers
      3. Svelte actions for progressive enhancements
    3. Example – previewing a link with a <a> element
    4. Example – progressively enhancing a form
      1. The default form behavior
      2. Implementing the enhance action
    5. Summary
  16. Part 3: Context and Stores
  17. Chapter 8: Context versus Stores
    1. Defining Svelte context
      1. Using an object as a context key
      2. Changing the context value
    2. Defining the Svelte store
      1. Using the observer pattern
      2. Defining the subscribe function
      3. Defining a Svelte store
      4. Creating Svelte stores with built-in functions
      5. Auto-subscribing to a Svelte store
    3. Choosing between a Svelte context and a Svelte store
      1. Passing dynamic context using a Svelte store
    4. Summary
  18. Chapter 9: Implementing Custom Stores
    1. Technical requirements
    2. Creating a Svelte store from user events
      1. Ensuring the event listener is only added once
      2. Exercise
    3. Creating an undo/redo store
      1. Implementing the undo/redo logic
      2. Exercise
    4. Creating a debounced higher-order Svelte store
      1. Debouncing store value changes
      2. Subscribing and unsubscribing original store on demand
      3. Deriving a new Svelte store with the derived() function
      4. Using the derived method
      5. Exercise
    5. Summary
  19. Chapter 10: State Management with Svelte Stores
    1. Technical requirements
    2. Managing states with Svelte stores
      1. Tip 1 – simplify complex state updates with unidirectional data flow
      2. Tip 2 – prefer smaller self-contained state objects over one big state object
      3. Tip 3 – derive a smaller state object from a bigger state object
    3. Using state management libraries with Svelte
      1. Example – using Valtio as a Svelte store
      2. Exercise – transforming an XState state machine into a Svelte store
    4. Summary
  20. Chapter 11: Renderless Components
    1. Technical requirements
    2. What are renderless components?
    3. Exploring reusable renderless components
      1. Example – building a renderless carousel component
      2. Writing a renderless carousel component
      3. Exercise 1 – a renderless autocomplete component
    4. Turning a declarative description into imperative instructions
      1. Writing declarative Canvas components
      2. Exercise 2 – expanding shape components
    5. Summary
  21. Chapter 12: Stores and Animations
    1. Technical requirements
    2. Introducing the tweened and spring stores
      1. Using the tweened and spring stores
      2. Using tweened and spring stores with arrays and objects
    3. Examples – creating an animated graph with the tweened and spring stores
      1. Exercise – creating an animating line graph
    4. Creating custom tweened interpolators
    5. Examples – creating an animated image preview
    6. Summary
  22. Part 4: Transitions
  23. Chapter 13: Using Transitions
    1. Technical requirements
    2. Adding transitions to elements
      1. Svelte’s built-in transitions
      2. Customizing a transition
    3. When are the transitions played?
      1. Handling mixed transition and static elements
      2. Other Svelte logical blocks for transitions
      3. The global modifier
    4. How Svelte transition works under the hood
      1. Creating animations with CSS
      2. Creating animations with JavaScript
      3. Animating transitions in Svelte
    5. Summary
  24. Chapter 14: Exploring Custom Transitions
    1. Technical requirements
    2. The transition contract
      1. The css function
      2. The tick function
    3. Writing a custom CSS transition using the css function
    4. Writing a custom JavaScript transition using the tick function
    5. Summary
  25. Chapter 15: Accessibility with Transitions
    1. Technical requirements
    2. What is web accessibility?
    3. Understanding user preference with prefers-reduced-motion
    4. Reducing motion for Svelte transition
    5. Having alternative transitions for inaccessible users
    6. Summary
  26. Index
    1. Why subscribe?
  27. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Download a free PDF copy of this book

Product information

  • Title: Real-World Svelte
  • Author(s): Tan Li Hau
  • Release date: December 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781804616031