Frontend UI Components in Magento 2 course image

Frontend UI Components in Magento 2

Build complex user interfaces in Magento by learning one of its most difficult concepts to understand, UI Components.

36 lessons

3h 0m

View enrollment options

The hardest part of Magento? Every developer will give you the same answer. Without a doubt, UI Components!

Months were spent researching UI Components, identifying all of their intricacies, and defining the simplest way possible to explain this complex JavaScript layer in Magento. If you have knowledge of M2 but have had difficulty understanding UI Components, this course will provide you with a solid foundation to build dynamic, reactive client-side components.

Meet Mark, the course teacher

UI Components are friends, not foes

Simply build reactive, dynamic components without hassle.

More JavaScript pain relieved

This course is solely focused on learning Magento's proprietary implementation of "UI Components".

Each lesson in this video course comes with a tech-friendly text translation, as well as full project source code.

  • Learn visually

    By watching the instructor program in front of your eyes, you will learn faster than trying to source and read documentation.

  • Full source code

    After watching the lessons, easily reference the source code on GitHub to build out features for your upcoming projects.

Code example of custom UI Component

Build a real, custom UI Component

What about building a top site banner that pushes free shipping on orders of $100 or more, and that dynamically reacts to shopping cart price changes in real-time?

  • Learn while developing

    Not only will these lessons teach you all about UI Components, but by the end of these lessons you will have a fully-functional, completed module that you can install on any of your client websites.

  • Real, working module

    This "Free Shipping" banner module changes states depending on the shopping cart subtotal, and reacts to changes without ever needing a page refresh.

Screenshot of course demo component

“I just finished studying the UI Components course and wow!!! The content was awesome. Thank you so much, you have no idea how much it has helped me professionally.”  

Course curriculum

Each video lesson can be played back & referenced as many times as you wish at slow or fast speed, tech-friendly closed captions, and includes full source code.

Includes Spanish translations provided by Google Translate

36 lessons

3h 0m

Last updated February 23, 2023

Environment setup

What is a UI Component?
Free preview
What is a UI Component?
Goals of UI Components
Goals of UI Components
Examples, benefits, & whent to use UI Components
Examples, benefits, & whent to use UI Components
Custom module requirements
Free preview
Custom module requirements

Basics of UI Components

Create a module & prep for JavaScript development
Create a module & prep for JavaScript development
Add a block template to the layout
Add a block template to the layout
Style a block template
Style a block template
Create the most basic UI Component
Free preview
Create the most basic UI Component
Alternate UI Conent JSON syntax
Free preview
Alternate UI Conent JSON syntax
uiClass vs uiElement vs uiCollection vs uiComponent
uiClass vs uiElement vs uiCollection vs uiComponent
UI Compnent initialization
UI Compnent initialization
UI Component defaults property
UI Component defaults property
Binding data from UI Components to KnockoutJS
Binding data from UI Components to KnockoutJS
Create a KnockoutJS template
Create a KnockoutJS template
Fallbacks & overrides of UI Component properties
Fallbacks & overrides of UI Component properties

Managing data within UI Components

Debug UI Components with uiRegistry
Debug UI Components with uiRegistry
Get, set & remove UI Component properties
Get, set & remove UI Component properties
Use ViewModel functions for separation of concerns
Use ViewModel functions for separation of concerns
Understand Knockout observables, tracks & reactivity
Understand Knockout observables, tracks & reactivity
Update UI Component with model data
Update UI Component with model data
Use Underscore helper functions
Use Underscore helper functions
Subscribing to Knockout observables
Subscribing to Knockout observables
Access UI Component properties with template literals
Access UI Component properties with template literals
Create computed properties with Knockout
Create computed properties with Knockout

Extending & overriding UI Components

Add or override UI Component methods
Add or override UI Component methods
Override an existing UI Component template
Override an existing UI Component template
Override a UI Component template with static path mapping
Override a UI Component template with static path mapping

Communication between UI Components

Create and render a child UI Component
Create and render a child UI Component
Create and render UI Component regions & children
Create and render UI Component regions & children
Filter and query UI Components
Filter and query UI Components
Import an external property value into a UI Component
Import an external property value into a UI Component
Export a property value to another UI Component
Export a property value to another UI Component
Listen for changes of UI Component properties
Listen for changes of UI Component properties
Change load ordering of UI Components
Change load ordering of UI Components
Implement UI Component dynamic properties
Implement UI Component dynamic properties

Advanced Concepts

Use a dynamic config value in a UI component
Use a dynamic config value in a UI component

Enroll in the course

Start learning M2 today

Choose the best option for you & your team.

This course All courses
Team
$ 747
one-time payment for your team
 

  • Train up to 5 on your team

  • Lifetime access to this course

  • Free updates for life

  • Full source code

Enroll your team
Individual
$ 249
one payment for lifetime access
 

  • License for a single user

  • Lifetime access to this course

  • Free updates for life

  • Full source code

Enroll in this course

“Thank you! This UI Components course was released just in time, as I recently had some very similar tasks to solve. It helped me apply some "gotchas" that really eased by development work.”  

Frequently asked questions

What will I get out of this course?
Upon completing this course, you will have all of the basic knowledge to build UI Components for the frontend of Magento 2. This includes creating your own custom UI Components, interacting with built-in data methods, overriding & extending core UI Components, as well debugging issues with UI Components with the uiRegistry.
What do I need to know to take this course?
This course assumes you have core fundamental knowledge of Magento 2, as well as full understanding of JavaScript Development Fundamentals. If you are not familiar with these topics, you may struggle in following along with this course.
Do I need a development environment setup?
Yes, this course assumes you have a running development environment of Magento setup and running locally. If you don't already have a development environment setup, please set one up before enrolling in the course. M.academy has a free course, Set Up a Magento 2 Development Environment with Docker.
What version of Magento is this based on?
This course was created using concepts featured in Magento version 2.4. If a new best-practice approach is introduced in a future version of Magento 2, the course will be updated appropriately.
Will I receive anything upon course completion?
Upon completion of the course, you'll receive a certificate of completion signed by the course instructor. This demonstrates to potential employees that you have the basic underlying knowledge of frontend UI Components in Magento 2. If your employer offers continuing education stipends, you may also be able to use this certificate to get the cost reimbursed by your employer.
What if I need a business invoice?
Invoices now contain fields for company name and VAT number. As long as you add your company name at checkout, you will automatically receive a business invoice emailed to you after purchase.