WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Nov 5, 2020

On tour with heroes == Moving from Angular to WebComponents

Benjamin Glusa

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.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction and motivation for exploring new frontend frameworks

Continuous learning and exploring new technologies help development teams adapt to the ever-changing frontend landscape.

#2 about 4 min

Evaluating Angular trade-offs and the web components alternative

Angular's size and complexity create vendor lock-in, making simpler, framework-agnostic web components an appealing alternative.

#3 about 4 min

Scaffolding a Svelte project for the web application

Setting up a new Svelte application using the official template establishes a barebones foundation without heavy runtime dependencies.

#4 about 6 min

Creating a writable store to manage application state

Utilizing Svelte's writeable store provides a reactive mechanism for fetching and seamlessly managing remote API data.

#5 about 5 min

Building a component to display sorted list entries

Integrating the reactive data store explicitly into a component renders dynamically sorted list elements natively with minimal boilerplate.

#6 about 4 min

Implementing a full list component with parent properties

Exporting variables actively within a Svelte component neatly allows parent applications to pass downward parameters directly.

#7 about 8 min

Selecting items and building the component editing interface

Introducing a dedicated selection state accurately passes specific data entries seamlessly into an isolated editing view container.

#8 about 4 min

Implementing store update logic and handling save actions

Leveraging the store's built-in native update functionality quickly saves user edits globally and immediately replaces outdated local data blocks.

#9 about 4 min

Implementing unrouted component navigation using custom DOM events

Dispatching custom Svelte events neatly provides a reliable, lightweight way to conditionally toggle active visual components completely without routing modules.

#10 about 5 min

Building reactive search input using multiple derived stores

Combining writable inputs concurrently with primary global data stores inside derived mechanisms automatically triggers array filtering natively upon typing sequences.

#11 about 1 min

Reviewing the benefits of building with Svelte conventions

Svelte's compiler-driven approach fundamentally eliminates heavy runtime payloads, actively ensuring concise structural implementations and much fewer browser bottlenecks.

Matching moments

4:52 min

Core concepts and benefits of the Svelte framework

Markus Hatvan · LIVE

5:59 min

Integrating web components across popular javascript frameworks

Rowdy Rabouw Rowdy Rabouw · World Congress 2022

48 sec

Exploring alternative build tools and experimental web components

Sasha Shynkevich · LIVE

3:46 min

The rise of modern component-based frameworks and modular architecture

Sasha Shynkevich · LIVE

8:34 min

Exploring Angular component patterns and upcoming framework updates

Benedikt Starzengruber · LIVE

2:40 min

Analyzing legacy content systems alongside modern decoupled architectures

Dávid Lévai · LIVE

More from WeAreDevelopers LIVE

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
4 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
9 days ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers - Of Agents and Robots thumbnail
1:04:42
10 days ago

WeAreDevelopers - Of Agents and Robots

Chris Heilmann, Daniel Cranney, Marc Plogas

WeAreDevelopers LIVE - How DevRel Makes Tech More Human thumbnail
48:06
17 days ago

WeAreDevelopers LIVE - How DevRel Makes Tech More Human

Chris Heilmann, Daniel Cranney

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres thumbnail
7:41
18 days ago

Fake or News: Smart Glasses in Court, Medical Advice Watches & Mushroom Electonics - Jason Torres

Chris Heilmann, Daniel Cranney

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
about 1 month ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 17:30–18:00

Stage 7

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

September 25, 2026 · 09:40–10:10

Stage 3

Still on 4.8 or lower? A Practical Guide to Moving Your "Un-Migratable" .NET Apps

Isaac Levin

Developer Advocate

Isaac Levin
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Outdoor Stage

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

Why I Recommend Svelte to Every New Web Developer thumbnail
31:21
LIVE • over 5 years ago

Why I Recommend Svelte to Every New Web Developer

Markus Hatvan

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Building a framework-independent component library thumbnail
19:46
World Congress 2025 • about 1 year ago

Building a framework-independent component library

Tobias Scholz

To New Frontiers: The Future of Frontend Development thumbnail
26:00
World Congress 2022 • about 4 years ago

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

Extending HTML with Web Components thumbnail
41:54
World Congress 2022 • about 4 years ago

Extending HTML with Web Components

Rowdy Rabouw

Svelte ♥ TypeScript and so will you thumbnail
28:20
World Congress 2022 • about 4 years ago

Svelte ♥ TypeScript and so will you

Ivan Hofer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.