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

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
19 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
26 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
about 1 month ago

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

Chris Heilmann, Daniel Cranney, Marc Plogas

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

To New Frontiers: The Future of Frontend Development

Rainer Hahnekamp

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

Extending HTML with Web Components

Rowdy Rabouw

Svelte ♥ TypeScript and so will you thumbnail
28:20
World Congress 2022 • over 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.