Real-World Svelte Supercharge Your Apps with Svelte 4 by Mastering Advanced Web Development Concepts
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 e...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing Ltd
[2023]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009786738306719 |
Tabla de Contenidos:
- 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
- Technical requirements
- Styling Svelte components in six different ways
- Styling with the style attribute
- Using style: directives
- Adding the <
- style>
- 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
- Summary
- Chapter 3: Managing Props and State
- Technical requirements
- 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
- Summary
- 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
- Summary
- Part 2: Actions
- Chapter 5: Custom Events with Actions
- Technical requirements
- 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
- Summary
- Chapter 6: Integrating Libraries with Actions
- Technical requirements
- 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
- Summary
- Chapter 7: Progressive Enhancement with Actions
- Technical requirements
- 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 <
- a>
- element
- Example - progressively enhancing a form
- The default form behavior
- Implementing the enhance action
- Summary
- 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
- Summary
- Chapter 9: Implementing Custom Stores
- Technical requirements
- 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
- Exercise
- 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
- Exercise
- Summary
- Chapter 10: State Management with Svelte Stores
- Technical requirements
- 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
- Summary
- Chapter 11: Renderless Components
- Technical requirements
- 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
- Summary
- Chapter 12: Stores and Animations
- Technical requirements
- 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
- Summary
- Part 4: Transitions
- Chapter 13: Using Transitions
- Technical requirements
- 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
- Summary
- Chapter 14: Exploring Custom Transitions
- Technical requirements
- 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
- Summary
- Chapter 15: Accessibility with Transitions
- Technical requirements
- What is web accessibility?
- Understanding user preference with prefers-reduced-motion
- Reducing motion for Svelte transition
- Having alternative transitions for inaccessible users
- Summary
- Index
- Other Books You May Enjoy.
