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.