UI Components in Magento 2
UI Components look like a maze of XML. They follow one pattern.
You are confident in Magento's backend, and then a UI Component ticket lands on your desk. Observables, computed values, and a data source that renders from XML you have never seen before.
UI Components are Magento's framework for building grids, forms, and dynamic checkout blocks entirely from configuration and JavaScript. The XML declares the structure, Knockout.js drives the reactivity, and the two only make sense once you can see how a data source hands values to a component and back.
This course rebuilds that layer from a single component up.
The XML declaration first, then a data source, then a custom component with its own template and view model. Each lesson ends with a UI Component you can load and interact with.
This is step one of advanced development. When you finish, Customize the Magento 2 Checkout is next, because the checkout is built entirely from UI Components. It is also included in the University.
You leave able to open any UI Component in Magento and know where every piece of it comes from.
Meet the instructor
Mark Shust has over 25 years of real-life development experience and holds 6 Adobe Commerce certifications. He has helped tens of thousands of developers all over the world learn and improve their Magento skills through courses, lessons and tutorials.
Mark's passion is taking complex topics and simplifying them down into easy-to-understand concepts. He enjoys teaching others, and strives getting you to that "ah ha!" moment as quickly as possible.
My fear is gone and I have started to love UI Components. It's no longer the horrible sweating nightmare it used to be. Thanks for making us understand this in a very easy way.
Foundational excellence
Step-by-step
This course breaks down Magento's complexities into easy-to-understand lessons that teach you exactly what you need to know, when you need to know it.
And you'll also not only get full access to the underlying source code which you can reference for years to come, but also a 24/7 Magento AI tutor to help you out when you get stuck.
Full 30-day money-back guarantee. Learn risk-free.
- Comprehensive understanding of UI Components
- Gain a thorough grasp of UI Components, from basic concepts to advanced implementations, regardless of your current expertise level.
- Practical, hands-on experience
- Build a real, custom UI Component throughout the course, giving you immediately applicable skills for your Magento projects.
- Understand UI Component communication
- Learn how to effectively manage data within UI Components and facilitate communication between them, a crucial skill for complex Magento interfaces.
- Advanced debugging techniques
- Discover how to use uiRegistry and other tools to efficiently debug UI Components, saving you countless hours of frustration.
- Customization and extension skills
- Learn to extend and override existing UI Components, allowing you to tailor Magento's interface to your specific needs.
- Real-world application
- Complete the course with a fully functional "Free Shipping" banner module, demonstrating the practical application of your new skills.
Thanks for the great UI Components course. It was very easy to follow along with all of the concepts and lessons.
Prerequisites
Core knowledge of Magento 2 fundamentals
Solid understanding of JavaScript in M2
Familiarity with KnockoutJS
Knowledge of Magento frontend development
A running Magento 2 dev environment
Everything to succeed
- Magento 2.4+ support
- Commerce 2.4+ support
- 39 step-by-step lessons
- 2h 58m of on-demand video
- Full source code
- Ability to ask tech questions
- Access to Maggie, the AI tutor
- Enhanced lesson transcripts
- Tech-friendly closed captions
- Multi-language support
- Certificate of completion
- Lifetime access
What you'll learn
Each video lesson can be played back & referenced as many times as you wish at slow or fast speed.
Perfect AI-enhanced tech-friendly closed captions available in 9 languages:
🇺🇸 ENEnglish🇪🇸 🇲🇽 ESSpanish🇵🇹 PTPortuguese🇫🇷 FRFrench🇩🇪 DEGerman🇵🇱 PLPolish🇮🇹 ITItalian🇺🇦 UAUkrainian🇷🇸 SRSerbian
The curriculum was expertly curated using our proprietary linear learning methodology. This ensures concepts are taught in the correct order, so you never feel lost or overwhelmed.
Advanced development, step 1
You are here: UI Components in Magento 2. When you finish, the next course on the path is below.
Includes our Magento AI tutor
Get instant, personalized support when you need it most, ...available from any lesson in this course.
- Answers any hour, in 183 languages
- Accessible from every lesson in this course
- Links the related lessons for you
Who should take this course?
Excellent videos! Simple, handy, super interesting course. You just saved me tons of time with fascinating techniques and ways to code UI Components, even though I'm more of a backend developer. This course is totally worth it.
Choose your learning path
Start with this course, or take the whole path with the University.
Team
Up to 5 developers on the same course, one checkout.
- Everything in Individual
- Onboard up to 5 developers
- Save with a team rate
- Priority support
- 30-day money-back guarantee
Individual
Enroll in this course and put these skills to work right away.
- License for a single user
- One payment, keep it for good
- Lifetime updates included
- Full source code
- 30-day money-back guarantee
- Every course, in order, plus every new one as it ships
- Magento AI tutor and Campus
- Over $3,000 of courses and tools, priced individually
- Annual, or pay once for lifetime
Love it or your money back. Risk-free for 30 days.
Ready for the next step on the path? Check out the Customize M2 Checkout course: