Real-World Svelte : Supercharge Your Apps with Svelte 4 by Mastering Advanced Web Development Concepts / Tan Li Hau.

Format:

Book

Author/Creator:

Hau, Tan Li, author.

Language:

English

Subjects (All):

JavaScript (Computer program language).

Application software--Development.

Application software.

Web applications.

User interfaces (Computer systems).

Physical Description:

1 online resource (282 pages)

Edition:

First edition.

Place of Publication:

Birmingham, England : Packt Publishing Ltd., [2023]

Biography/History:

Hau Tan Li: Tan Li Hau is a frontend developer at Shopee and a core maintainer of Svelte. He has delivered multiple conference talks and workshops on Svelte. Passionate about sharing his knowledge, Li Hau regularly contributes to the community through blog posts, YouTube videos, and books. He aspires to inspire others to explore and learn about Svelte and other modern web technologies.

Summary:

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.

Contents:

Cover

Title Page

Copyright and Credits

Foreword

Contributors

Table of Contents

Preface

Part 1: Writing Svelte Components

Chapter 1: Lifecycles in Svelte

Technical requirements

Understanding the Svelte lifecycle functions

Initializing the component

Mounting the component

Updating the component

Destroying the component

The one rule for calling lifecycle functions

Refactoring lifecycle functions

Which component to register?

Reusing lifecycle functions in Svelte components

Exercise 1 - Update counter

Composing lifecycle functions into reusable hooks

Coordinating lifecycle functions across components

Exercise 2 - Scroll blocker

Summary

Chapter 2: Implementing Styling and Theming

Styling Svelte components in six different ways

Styling with the style attribute

Using style: directives

Adding the &lt

style&gt

block

Adding the class attribute

Simplifying the class attribute with the class: directive

Applying styles from external CSS files

Choosing which method to style Svelte components

Styling Svelte with Tailwind CSS

Setting up Tailwind CSS

Theming Svelte components with CSS custom properties

Defining CSS custom properties

Example - implementing a dark/light theme mode

Allowing users to change the styles of a component

Aligning the fallback value

Chapter 3: Managing Props and State

Defining props and state

Defining props

Defining state

Props versus state

Understanding bindings

One-way versus two-way data flow

Deriving states from props with a reactive declaration

Managing complex derived states

Updating props using derived states

Chapter 4: Composing Components

Technical requirements.

Manipulating how a child component looks

Passing dynamic content through slots

Providing default slot content

Having multiple slots with named slots

Passing data through slot props

Rendering different HTML element or component types

Creating recursive components for recursive data

Example - a JSON tree viewer

The Container/Presentational pattern

Part 2: Actions

Chapter 5: Custom Events with Actions

Defining actions

Reusing DOM event logic with custom events

Encapsulating logic into a component

Encapsulating logic into an action

Passing parameters to an action

Example - validating form inputs with custom events

Exercise - creating a drag-and-drop event

Chapter 6: Integrating Libraries with Actions

Integrating vanilla JavaScript UI libraries into Svelte

Why use Svelte actions to integrate a UI library?

Using Svelte actions

Adding data to Svelte actions

An alternative to Svelte actions

Choosing between Svelte actions and Svelte components

Example - integrating Tippy.js

Example - integrating CodeMirror

Using UI libraries written in other frameworks

Creating components in various frameworks

Cleaning up the components in various frameworks

Updating the component in various frameworks

Integrating react-calendar into Svelte

Chapter 7: Progressive Enhancement with Actions

What is progressive enhancement?

Progressively enhancing the web experience

Building web pages in layers

Svelte actions for progressive enhancements

Example - previewing a link with a &lt

a&gt

element

Example - progressively enhancing a form

The default form behavior

Implementing the enhance action

Part 3: Context and Stores.

Chapter 8: Context versus Stores

Defining Svelte context

Using an object as a context key

Changing the context value

Defining the Svelte store

Using the observer pattern

Defining the subscribe function

Defining a Svelte store

Creating Svelte stores with built-in functions

Auto-subscribing to a Svelte store

Choosing between a Svelte context and a Svelte store

Passing dynamic context using a Svelte store

Chapter 9: Implementing Custom Stores

Creating a Svelte store from user events

Ensuring the event listener is only added once

Exercise

Creating an undo/redo store

Implementing the undo/redo logic

Creating a debounced higher-order Svelte store

Debouncing store value changes

Subscribing and unsubscribing original store on demand

Deriving a new Svelte store with the derived() function

Using the derived method

Chapter 10: State Management with Svelte Stores

Managing states with Svelte stores

Tip 1 - simplify complex state updates with unidirectional data flow

Tip 2 - prefer smaller self-contained state objects over one big state object

Tip 3 - derive a smaller state object from a bigger state object

Using state management libraries with Svelte

Example - using Valtio as a Svelte store

Exercise - transforming an XState state machine into a Svelte store

Chapter 11: Renderless Components

What are renderless components?

Exploring reusable renderless components

Example - building a renderless carousel component

Writing a renderless carousel component

Exercise 1 - a renderless autocomplete component

Turning a declarative description into imperative instructions

Writing declarative Canvas components.

Exercise 2 - expanding shape components

Chapter 12: Stores and Animations

Introducing the tweened and spring stores

Using the tweened and spring stores

Using tweened and spring stores with arrays and objects

Examples - creating an animated graph with the tweened and spring stores

Exercise - creating an animating line graph

Creating custom tweened interpolators

Examples - creating an animated image preview

Part 4: Transitions

Chapter 13: Using Transitions

Adding transitions to elements

Svelte's built-in transitions

Customizing a transition

When are the transitions played?

Handling mixed transition and static elements

Other Svelte logical blocks for transitions

The global modifier

How Svelte transition works under the hood

Creating animations with CSS

Creating animations with JavaScript

Animating transitions in Svelte

Chapter 14: Exploring Custom Transitions

The transition contract

The css function

The tick function

Writing a custom CSS transition using the css function

Writing a custom JavaScript transition using the tick function

Chapter 15: Accessibility with Transitions

What is web accessibility?

Understanding user preference with prefers-reduced-motion

Reducing motion for Svelte transition

Having alternative transitions for inaccessible users

Index

Other Books You May Enjoy.

Notes:

Includes bibliographical references and index.

Description based on print version record.

ISBN:

9781804615416

1804615412

OCLC:

1408533623