Frontend UI Components

Build complex user interfaces by learning UI Components, the most difficult part of Magento.

Magento Frontend UI Components hero image

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 your friend

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 for sharing your knowledge of Magento 2. The work you are doing is very helpful, and helped explain the right way of doing things & hard to understand concepts, all in one place.”  

Course curriculum

Last updated November 26, 2020

The first 24 lessons below have been published and are instantly available upon enrollment. Completing this initial batch of lessons results in you creating your own Magento module with a custom dynamic UI Component, while also teaching you all of the basic fundamentals of UI Components.

Signup to get
4 free preview lessons.

or, Enroll Now to start the course!

Two additional sections which will total another 10 lessons or so are currently under development, and will cover more advanced concepts. The ETA on these two remaining sections is delivery by the end of December. Once those sections are published, the price will assume standard pricing of $229.

Enroll in the course

Start learning UI Components today

Enroll now and save $30 on the final price of this course.

One-Time Payment

$ 229 199 USD
also available for 2 payments of $109
  • Price available for a limited time

  • Lifetime access to the course

  • Free updates for life

  • Full source code

  • 30-day satisfaction guarantee

Enroll in the University

Subscription

$ 39 USD
per month, billed yearly
  • Immediately access all premium courses
    (currently valued at $597, savings of $129!)

  • 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

Complete solution

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
  • Premium content
  • Corporate rate
  • All lessons & courses
  • M.academy Snippets
  • 30-day guarantee
How many students do you wish to enroll?

Price

$ 39 USD /month
per student, billed yearly

Enroll now
Additional students can be added on for $32/month.

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

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