Reader small image

You're reading from  Real-World Svelte

Product typeBook
Published inDec 2023
Reading LevelIntermediate
PublisherPackt
ISBN-139781804616031
Edition1st Edition
Languages
Right arrow
Author (1)
Tan Li Hau
Tan Li Hau
author image
Tan Li Hau

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.
Read more about Tan Li Hau

Right arrow

Preface

In today’s digital age, web development is ever-evolving, with new tools and frameworks emerging almost daily. Among them, Svelte stands out, being voted in the top place as the most beloved framework in a recent developer survey (https://survey.stackoverflow.co/2022/#section-most-loved-dreaded-and-wanted-web-frameworks-and-technologies). Svelte brings a fresh perspective by optimizing performance and providing an intuitive design, as well as being fully featured.

While other resources out there cover Svelte’s vast features, this book offers a unique lens and approach. We’ll delve deep into key Svelte features, demystifying core concepts. Through hands-on, real-world examples, we’ll not only teach the “how” but also the “why” behind each approach. By understanding the underlying principles and thought processes, you’ll be equipped to seamlessly integrate what you learn into your Svelte projects.

Who this book is for

This book is tailored for web developers and software engineers who possess a foundational understanding of JavaScript, CSS, and general web development practices. Whether you're new to Svelte and are eager to dive deep or have dabbled with its basics but seek to elevate your expertise through real-world examples and patterns, this guide is for you. Beyond mere instruction, the content delves into the 'why' and 'how' behind each concept, ensuring readers not only grasp the material but can also effectively apply it in professional contexts and diverse projects. If you're ready to not just learn about Svelte but to master its intricacies and practical applications, then this book is your next essential read.

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.

To get the most out of this book

You will need to have basic knowledge of web development and a basic understanding of JavaScript, CSS, and HTML.

Software/hardware covered in the book

Operating system requirements

Svelte 4

Windows, macOS, or Linux

JavaScript

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Real-World-Svelte. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system.”

A block of code is set as follows:

const folder = [
  { type: 'file', name: 'a.js' },
  { type: 'file', name: 'b.js' },
  { type: 'folder', name: 'c', children: [
    { type: 'file', name: 'd.js' },
  ]},
];

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<!-- filename: JsonTree.svelte -->
<script>
  export let data;
</script>
<ul>
  {#each Object.entries(data) as [key, value]}
    <li>
      {key}:
      {#if typeof value === 'object'}
        <svelte:self data={value} />
      {:else}
        {value}
      {/if}
    <li>
  {/each}
</ul>

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “When you have a <form> element, by default when you hit the Submit button, it will navigate to the location indicated by the action attribute, carrying along with it the value filled in the <input> elements within the <form> element.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at customercare@packtpub.com and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at copyright@packt.com with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Real-World Svelte, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

  1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781804616031

  1. Submit your proof of purchase
  2. That’s it! We’ll send your free PDF and other benefits to your email directly
lock icon
The rest of the chapter is locked
You have been reading a chapter from
Real-World Svelte
Published in: Dec 2023Publisher: PacktISBN-13: 9781804616031
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
undefined
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime

Author (1)

author image
Tan Li Hau

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.
Read more about Tan Li Hau