Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Modernizing Large Frontends with Web Components

NDC Conferences via YouTube

Overview

Limited-Time Offer: Up to 75% Off Coursera Plus!
7000+ certificate courses from Google, Microsoft, IBM, and many more.
This course teaches learners how to modernize large frontends using Web Components. The learning outcomes include understanding the Web Components landscape, evaluating their use for legacy frontend migrations, and overcoming architectural challenges in large-scale refactoring. The course covers topics such as creating custom reusable elements, using Angular Elements for migrating from AngularJS to Angular, and sharing data between components. The teaching method involves a mix of theoretical concepts and practical examples. The intended audience for this course is enterprise software developers and teams looking to bridge the gap between legacy and modern frontend code.

Syllabus

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

Taught by

NDC Conferences

Reviews

Start your review of Modernizing Large Frontends with Web Components

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.