During a DevExchange round-table at Imagine 2017, various developers talked about how to make the area of JS components more understandable to others. This lead quickly to the conclusion that there needed to be some guidance, tips & tricks, best practices. This write-up is meant as a way to open up discussion on this.
As I see it, best practices should not be something that is dictated by Magento, but should come to realization through community effort. So if you any thoughts on JS components, make sure to share your opinion here in this thread.
Areas of discussion
- Getting started
- Definition of UiComponents
- Performance
- Recommended resources
Getting started
When you are diving into the JS world of Magento 2, things can be overwhelming at first. Make sure to go through the official devdocs to get an impression of how KnockoutJS and RequireJS are integrated into Magento 2. Also, make sure to checkout the project sites of KnockoutJS and RequireJS as well.
The more you can familiarize with similar JS frameworks the better. Working with other JS frameworks (like Angular, Ember, Vue.js) definitely is a benefit.
As a fundament, make sure you are familiar with XML layout and PHTML templating. If you have experience with Magento 1 and are new to Magento 2, make sure to grasp the XML layout differences with Magento 1 first.
Definition of UiComponents
When we speak of UiComponents, we can refer to one of two things: First of all, a UiComponent can be used to identify a JS component (a standalone AMD-compliant JS library) that extends from the parent class UiComponent, thus including for instance Magento 2 KnockoutJS behaviour. Second, we can use the term UiComponent to refer to JS components that extend from the original Magento UiComponent class.
PERFORMANCE
JavaScript profilers
When testing out JavaScript code, make sure to profiler your code. For instance, the Chrome DevTools include a CPU Profiler for this. Other good alternatives are Safari Web Inspector and Firefox + Firebug.
JavaScript optimization
In the backend configuration, there are various settings that allow you to merge and combine JS files. Do not use those settings in the Developer Mode. If you want to test those settings, make sure to switch to Production Mode.
Solving conflicts Working with shims
Whenever you want to create a JS library into Magento 2, the preference is to have that JS library be AMD-compliant, which allows for easy integration with RequireJS. If the library is not AMD-compliant, it can be either made AMD-compatible (by modifying its code) or it can be added through a shim. It can be useful to apply shims to AMD-compliant libraries as well, for instance, to fix ordering issues or loading issues.
RESOURCES
Recommended resources
Hopefully this is just a beginning. If anyone else has something to share, please do!
