Autoplay
Autocomplete
Previous lesson
Complete and Continue
Frontend UI Components in Magento 2
Overview of UI Components
What is a UI Component?
Preview
2:48
Goals of UI Components
2:03
Examples, benefits, & when to use UI Components
2:56
Custom module requirements
Preview
3:09
Basics of UI Components
Create a module & prep for JavaScript development
6:23
Add a block template to the layout
3:58
Style a block template
4:11
Create the most basic UI Component
Preview
7:21
Alternate UI Component JSON syntax
Preview
4:23
uiClass vs uiElement vs uiCollection vs uiComponent
5:13
UI Component initialization
2:42
UI Component defaults property
2:02
Binding data from UI Components to KnockoutJS
3:13
Create a KnockoutJS template
6:10
Fallbacks & overrides of UI Component properties
2:45
Managing data within UI Components
Debug UI Components with uiRegistry
3:31
Get, set & remove UI Component properties
2:24
Use ViewModel functions for separation of concerns
4:45
Understand Knockout observables, tracks & reactivity
5:45
Update UI Component with model data
9:16
Use Underscore helper functions
4:20
Subscribe to Knockout observables
3:16
Access UI Component properties with template literals
5:57
Create computed properties with Knockout
7:15
Downloadable archive of Free Shipping Promo module
Extending & overriding UI Components
Add or override UI Component methods
8:43
Override an existing UI Component template
4:26
Override a UI Component template with static path mapping
4:08
Communication between UI Components
Create and render a child UI Component
11:34
Create and render UI Component regions & children
6:00
Filter and query UI Components
3:03
Import an external property value into a UI Component
7:31
Listen for changes of UI Component properties
3:05
Export a property value to another UI Component
8:06
Change load ordering of UI Components
4:40
Implement UI Component dynamic properties
3:12
Downloadable archive of Checkout Messages module
Advanced Concepts
Use a dynamic config value in a UI component
9:49
Completion
Course feedback & certificate for the Frontend UI Components course
Create the most basic UI Component
View source code
Complete and Continue
Extra lesson content locked
Enroll to access all lessons, source code & comments.
Enroll now to Unlock