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 · WWC 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

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

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

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

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

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

Full Stack with Flutter - are we there yet?

Nemanja Stošić

Senior Flutter Developer

Nemanja Stošić
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

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 • over 4 years ago

The Lean Web

Chris Ferdinandi

Building a framework-independent component library thumbnail
19:46
WWC 2025 • 12 months ago

Building a framework-independent component library

Tobias Scholz

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

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

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

Extending HTML with Web Components

Rowdy Rabouw

Svelte ♥ TypeScript and so will you thumbnail
28:20
WWC 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.