Modernizing Large Frontends with Web Components

Explore the process of modernizing large frontend codebases using Web Components in this comprehensive conference talk. Learn how Web Components can bridge the gap between legacy and modern code, allowing for gradual migration without resorting to extreme measures. Discover the current Web Components landscape and evaluate their suitability for large legacy frontend migrations. Gain insights into overcoming architectural challenges in large-scale refactoring, with a focus on using Angular Elements to iteratively migrate AngularJS (1.x) to Angular (2+). Delve into topics such as Single Page Applications, DOM manipulation, custom elements, micro frontends, and shared components. Understand the anatomy of custom elements, including selector strings, JavaScript classes, and lifecycle methods. Explore custom element libraries like Stencil and learn about the Elements Upgrade Strategy for modernization. Get practical tips on setting up Angular Elements, upgrading components, sharing data with services, and handling inputs and outputs. By the end of this talk, acquire the knowledge to effectively modernize large frontends using Web Components, enabling legacy code and modern frameworks to work together seamlessly.

Intro
Choosing the right path is critical.
Modern Frontends
Single Page Applications (SPAs)
DOM Manipulation
What are Web Components?
Use Cases
Micro Frontends
Shared Components
Anatomy of a Custom Element
Selector String
JavaScript Class
Options Object
Bells & Whistles
Lifecycle Methods
HTML Templates
It's complicated...
Custom Element Libraries
Stencil
Modernization
AngularJS to Angular
Why Angular Elements?
Tightly Coupled
Dependency Injection
The Elements Upgrade Strategy
Set Up Bottom-up components Create vanilla j5 services with wrappers Convert routing and remove Elements
Setting Up Angular Elements
Add Angular Elements
Upgrading Components
AngularJS 1.7+ Helpers
ng-custom-element
Tip: Group into Modules
Sharing Data with Services
Off-Roading with JS
Wrap Shared JS Services
Inputs & Outputs
Indirection
Wrapping Up the Upgrade
Add Component Selectors
Switch Routing
Drop Elements