On tour with heroes == Moving from Angular to WebComponents

What if your components had zero runtime dependencies? See how the Svelte compiler makes building lightweight, portable Web Components easier than ever.

#1about 4 minutes

The challenges of large frontend frameworks like Angular

Large frameworks like Angular can lead to dependency lock-in, large bundle sizes, and complexity, making migrations difficult.

#2about 2 minutes

Using Web Components and Svelte as an alternative

Web Components offer a framework-agnostic, simple, and lightweight alternative, made easier to develop with compilers like Svelte.

#3about 4 minutes

Scaffolding a new Svelte project from scratch

A new Svelte project is scaffolded using npx degit, and its package.json reveals only dev dependencies because Svelte is a compiler.

#4about 3 minutes

Creating a Svelte store to manage application state

A central store is created using a `writable` to hold hero data, which is fetched from a backend and populated asynchronously.

#5about 7 minutes

Using derived stores to automatically transform data

A derived store is created from the main hero store to automatically compute and provide a sorted list of the top five heroes.

#6about 3 minutes

Building a reusable list component with props

A generic list component is created to display heroes passed down via props, demonstrating component reusability and data flow.

#7about 3 minutes

Managing UI state for selected items in a list

A `writable` store is used to track the currently selected hero, which is updated via an `on:click` event handler.

#8about 4 minutes

Creating a form component for editing data

An editing component is built with input fields that use two-way data binding to the properties of the selected hero from the store.

#9about 4 minutes

Implementing update logic within the central store

An `update` function is added to the hero store to handle saving changes by replacing the old hero object with the updated one.

#10about 4 minutes

Simulating navigation using custom events and state

A simple navigation system is implemented by dispatching a custom 'back' event from a child component to a parent, which then updates state to change the view.

#11about 5 minutes

Building a search feature with multiple derived stores

A powerful search feature is created by deriving a new store from both the main hero list and a `searchTerm` store, automatically filtering results as the user types.

#12about 1 minute