> Markdown version of [/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents](https://www.wearedevelopers.com/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# On tour with heroes == Moving from Angular to WebComponents

Are bloated Angular bundles slowing down your frontend? Discover how rebuilding the classic Tour of Heroes app with Svelte creates lightweight, framework-agnostic web components to future-proof your architecture.

- **Speakers:** Benjamin Glusa
- **Event:** WeAreDevelopers LIVE
- **Published:** November 5, 2020
- **Duration:** 43:08
- **URL:** https://www.wearedevelopers.com/videos/63-on-tour-with-heroes-moving-from-angular-to-webcomponents

## Summary

The frontend development ecosystem is characterized by constant evolution, yet massive frameworks like Angular, React, and Vue have maintained long-standing dominance. While powerful, applications built in Angular often suffer from bloated bundle sizes, high overall complexity, and strict framework dependence—sometimes leaving engineering teams stuck on legacy versions without the budget to migrate. To overcome these constraints, developers are shifting toward framework-agnostic web components. Because authoring them in vanilla JavaScript can be exceptionally difficult, tools like Svelte and Stencil have emerged to seamlessly compile intuitive code into lightweight, independent components that can easily operate alongside other frontends.<br><br>A practical deep dive demonstrates how to progressively rebuild the classic Angular "Tour of Heroes" application using Svelte to highlight this paradigm shift. Scaffolding a base Svelte template immediately reveals a much leaner architecture: dependencies are resolved dynamically at compile-time rather than shipping a comprehensive framework runtime to the client browser. Building out the system involves constructing reactive stores—specifically using "writable" and "derived" utilities—to process and share application state. This drastically simplifies operations that would normally demand heavy RxJS observables or service layers. By relying on Svelte's auto-subscription syntax, developers can effortlessly bind asynchronous backend API data straight into the frontend view.<br><br>Ultimately, treating component construction as a compiled step rather than a heavily interpreted runtime results in radically cleaner syntax and near-zero client bloat. Implementing features like dynamic custom event dispatching, responsive search bars using multi-store derivation, and custom view routing further illustrates Svelte's intrinsic flexibility. Migrating heavily coupled frontend logic into Svelte-driven web components not only future-proofs legacy applications but also provides a fast, scalable, and highly approachable alternative to standard monolithic frameworks.

**Keywords:** angular to svelte migration, framework-agnostic web components, legacy frontend framework challenges, svelte compiler architecture, managing svelte reactive stores, writable and derived state, reactive auto-subscription syntax, custom event dispatching, building lightweight web components, frontend bundle size optimization, replacing rxjs with svelte stores, scaffolding robust single page applications, vanilla javascript component difficulties, replicating tour of heroes app

## Chapters

1. **Introduction and motivation for exploring new frontend frameworks** (00:17) — Continuous learning and exploring new technologies help development teams adapt to the ever-changing frontend landscape.
1. **Evaluating Angular trade-offs and the web components alternative** (03:09) — Angular's size and complexity create vendor lock-in, making simpler, framework-agnostic web components an appealing alternative.
1. **Scaffolding a Svelte project for the web application** (06:22) — Setting up a new Svelte application using the official template establishes a barebones foundation without heavy runtime dependencies.
1. **Creating a writable store to manage application state** (10:17) — Utilizing Svelte's writeable store provides a reactive mechanism for fetching and seamlessly managing remote API data.
1. **Building a component to display sorted list entries** (15:20) — Integrating the reactive data store explicitly into a component renders dynamically sorted list elements natively with minimal boilerplate.
1. **Implementing a full list component with parent properties** (19:52) — Exporting variables actively within a Svelte component neatly allows parent applications to pass downward parameters directly.
1. **Selecting items and building the component editing interface** (22:56) — Introducing a dedicated selection state accurately passes specific data entries seamlessly into an isolated editing view container.
1. **Implementing store update logic and handling save actions** (30:10) — Leveraging the store's built-in native update functionality quickly saves user edits globally and immediately replaces outdated local data blocks.
1. **Implementing unrouted component navigation using custom DOM events** (34:00) — Dispatching custom Svelte events neatly provides a reliable, lightweight way to conditionally toggle active visual components completely without routing modules.
1. **Building reactive search input using multiple derived stores** (37:48) — Combining writable inputs concurrently with primary global data stores inside derived mechanisms automatically triggers array filtering natively upon typing sequences.
1. **Reviewing the benefits of building with Svelte conventions** (42:24) — Svelte's compiler-driven approach fundamentally eliminates heavy runtime payloads, actively ensuring concise structural implementations and much fewer browser bottlenecks.

## Related Moments

- [Core concepts and benefits of the Svelte framework](https://www.wearedevelopers.com/videos/132-why-i-recommend-svelte-to-every-new-web-developer) (from "Why I Recommend Svelte to Every New Web Developer")
- [Integrating web components across popular javascript frameworks](https://www.wearedevelopers.com/videos/459-extending-html-with-web-components) (from "Extending HTML with Web Components")
- [Exploring alternative build tools and experimental web components](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Exploring Angular component patterns and upcoming framework updates](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Analyzing legacy content systems alongside modern decoupled architectures](https://www.wearedevelopers.com/videos/246-how-to-build-truly-production-ready-apps-modern-js-based-saas-stack-for-indie-devs-and-small-teams) (from "How to Build Truly Production-ready Apps - Modern JS-based SaaS Stack for Indie Devs and Small Teams")

## Related Articles

- [Top 10 Svelte UI Libraries in 2025](https://www.wearedevelopers.com/magazine/250-top-10-svelte-ui-libraries-in-2025)
- [The Best 7 Frontend Frameworks for Developers in 2025](https://www.wearedevelopers.com/magazine/400-the-best-7-frontend-frameworks-for-developers-in-2025)
- [The Best JavaScript Framework to Learn](https://www.wearedevelopers.com/magazine/229-the-best-javascript-framework-to-learn)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**