Magento Frontend UI Components hero image

Frontend UI Components

Build complex user interfaces by learning UI Components, the most difficult concept in M2.

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

Months were spent researching UI Components, finding out all of their intricacies, and then defining the simplest way possible to explain this complex part of the JavaScript layer. If you have knowledge of Magento 2 but have had hardships understanding UI Components, this course will provide you with a solid foundation to build dynamic, reactive client-side components with as little noise as possible.

Meet Mark, the course instructor

UI Components are friends, not foes

Learn to build reactive UI Components, simply & without hassle.

More JavaScript pain relieved

This is the second course in the Demystifying JavaScript in Magento series, and is solely focused on learning Magento's proprietary implementation of "UI Components".

This is a screencast course, and each lesson comes with full text translation, full inline source code of the code presented in the lesson.

  • 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.

Build a real 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.

“Thank you! The 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.”  

Course curriculum

35 easy-to-consume video lessons included, yours to playback & reference forever.

Last updated January 18, 2021

Signup to get
4 free preview lessons.

or, Enroll Now to start the course!

Included screencasts

Each screencast video can be played back at slow or fast speed, comes with tech-friendly closed captions, and includes full source code via Snippets and downloadable archives.

Overview of UI Components

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

Basics of UI Components

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

Managing data within UI Components

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

Extending & overriding UI Components

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

Communication between UI Components

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

Enroll in the course

Start learning UI Components today

Choose the best payment option for you or your team.

One-Time Payment

$
also available for 2 payments of $

M.academy supports Parity Purchasing Power

If you need to unlock the above price, use promo code:
  • Lifetime access to the course

  • Free updates for life

  • Full source code

  • 30-day satisfaction guarantee

Enroll in the University

Subscription

$
/month
billed once yearly at $

M.academy supports Parity Purchasing Power

If you need to unlock the above price, use promo code:
  • Immediately access all premium courses

  • Save 30% vs. purchasing courses separately

  • Early access to new lessons & courses

  • Unlimited pass to M.academy Snippets

  • Members-only premium content*

  • Get everything without needing to pick & choose

  • 30-day satisfaction guarantee

M.academy University

A complete solution to train your entire team

Solve your biggest problem
Are your developers struggling with Magento 2? Get your team up to speed with simple lessons to quickly learn M2.
Path to certification
Once your team understands the fundamentals, your company will be on their way to certification badges.
Continuous improvement
Already certified & know the fundamentals? New topics are constantly added to keep developers up to speed.
Foster a culture of learning
Provide access for your developers to strive to improve, boost morale, and foster a culture of learning.
  • Unlimited access
  • All lessons & courses
  • Premium content
  • Corporate rate
  • M.academy Snippets
  • 30-day guarantee
How many students do you wish to enroll?

Price

$ 39 /month
per student, billed yearly

Enroll now
Additional students can be enrolled for $32/month.
Interested in just this course?
Enroll your entire team in Frontend UI Components with a single payment.

M.academy is trusted by
thousands of students

Total Students
3,000+
Active Slack Members
300+
Satisfaction rate*
95%
*Based on actual survey results from students enrolled in a premium course.

Frequently asked questions

This course assumes you have core fundamental knowledge of Magento 2, as well as full understanding of RequireJS & JavaScript Components. If you are not familiar with these topics, you may struggle in following along with this course.

If you are interested in learning these topics first, please check out the Magento 2 Coding Kickstart course and the RequireJS & JavaScript Components course, respectively.

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.

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 it up before purchasing the course. Checkout Mark's free course on how to Setup a Magento 2 Development Environment with Docker.

You can use any coding editor or IDE you wish, however it is strongly preferred to use PHPStorm due to its intelligent "click into" functionality so you can easily go deep into variables and parent classes. PHPStorm's debugging tools are second to none.

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, the course will be updated appropriately.

As a member of the University, you will get full unrestricted access to all of the content available on M.academy. This includes all premium courses, early access to new lessons & courses as they are created, all available Snippets, and members-only premium content which is currently under development. This content will include access to private webinars, PDFs, premium mini-courses, & more.

If you are an agency, joining the University is most likely the best option for you and your team. You will be able to setup each developer at your company with access as a student. This puts a lot of great content into the hands of your entire team, so they have access to one of the only continued learning programs available for Magento.

Upon completion of the course, you'll receive a certificate of completion in your name, signed by the course instructor. This certificate will demonstrate 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 can also use this certificate to get the cost reimbursed from your employer.

Enrolling in the M.academy University as an Agency provides the number of students purchased with access to the course. After enrolling, fill out the request to add students to a course form.

If they already have accounts at M.academy, the course will then be assigned to their existing account. If they do not yet have an account, one will be set up for them with the email address provided. Note that you don't need to assign all of the students right away, but can't change the assignment of a student once they have started progress if purchased with the one-time payment option.

Re-assigning students is only available for members of the University. Each subscription includes full access to M.academy. If a member of your team no longer needs access because they have moved on, you can re-assign their access to another student. To do so, contact M.academy with the names & emails of your new & former employees, and we will re-assign access.

Contact M.academy if you have more than 30 developers needing access.

No worries! Your invoice will be emailed to you after purchase, but if you are purchasing this course on behalf of a business and the default invoice doesn't work for you, just reply back to your enrollment email. Send in your company name, address, and any other billing info you need to show up on the invoice. A manual PDF invoice will be generated and emailed back to you.

Meet the instructor

Mark Shust
Mark Shust

Hi there! I'm Mark 👋

My passion over the last decade has revolved entirely around Magento. Starting with the early days of Magento 0.8, I've had a heavy interest in the Zend and Magento Frameworks, and have been devoted to eCommerce & PHP for even longer (over 20 years!). I've held all positions within many organizations, ranging from junior developer to chief solution architect.

During this time I've spoken at conferences such as Magento Imagine and Meet Magento New York, and my LAMP stack programming expertise has paved the way for me to become a Zend Certified Engineer and Adobe Certified Magento Developer. I love open-source software, and have maintained docker-magento, the most popular development environment for Magento since the release of Magento 2.

I'm married to my wonderful wife Juliann, and we are the proud parents of twin girls Lily and Brielle. I live in Northeast Ohio and love eating chipotle burritos, solving Rubik's cubes, driving my 240sx, and watching Cleveland Browns games.

Read more about Mark & M.academy

© 2021 M.academy. All rights reserved.
Privacy Policy · Terms of Use