Magento2 ui component in deep

From this tutorial i will show you how to get info from some main component in magento 2 by javascript

All components defined in below file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml

If you work with components in magento you possible may related with uiregistry. This is ultility component allow you access to specific component.

Playground for work with component from browser

Go to product list page of magento in admin dashboard
Open chrome browser > Console tab

requirejs('uiRegistry').get('%componentName%');

componentName is string name of component.

1 Listing component

Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/grid/listing.js

There is alot place magento use this component such as: Product listing, Order listing, cms page listing

Example

var productrows = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').rows

Above will return current object contain rows of products

[{product1},{product2},so on]

OR

var productrows = requirejs('uiRegistry').get('product_listing.product_listing_data_source').data['items']

var components = requirejs('uiRegistry').get('product_listing.product_listing.product_columns').elems()

2 Form component

Source file
https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Ui/view/base/web/js/form/form.js

Continuing...