Speaker: Evgeny Trishin, Senior Magento Developer IT-Delight Host: Andrey Zabara, Magento Tech Lead IT-Delight 🔸 What we talked about: -uilayout - Life cycle of components - Using literals - Linking component properties - Modification of components Link to the webinar recording - https://youtu.be/-Wod_wQfDuI More materials: articles, videos and event announcements can be found in our Telegram community: https://t.me/promagento_channel

2. Инициализация UI-компонента

3. Инициализация UI-компонента
vendor/module-ui/view/base/web/js/core/app.js
vendor/module-ui/view/base/web/js/core/layout.js
vendor/module-ui/view/base/web/js/lib/knockout/bootstrap.js
engine.js, bindings/bootstrap.js

4. Инициализация UI-компонента
uiLayout

5. Инициализация UI-компонента
uiLayout
Свойства аргумента node
● name - имя компонента
● parent - Полное имя родительского компонента
● template - путь к .html шаблону
● config - конфигурация ui-компонента
● children - конфигурационные ноды для дочерних компонентов
● isTemplate - определяет, нужно ли сохранять конфигурацию как шаблон
● nodeTemplate - Полное имя сохраненного шаблона конфигурации
● provider - Полное имя ui DataSource свойства компонента. Если оно
пропущено, то берется из родительского компонента.

6. uiRegistry
Это in-memory хранилище
Данные хранятся в виде ключ-значение
Предоставляет методы: get, set, has

7. uiRegistry

8. Инициализация UI-компонента
uiLayout
Инициализация компонента

9. Жизненный цикл компонента
uiLayout

10. Жизненный цикл компонента
uiLayout

11. Класс uiElement
Код модуля
<Magento_Ui_module_dir>/view/base/web/js/lib/core/element/element.js
Данный класс содержит методы:
● initLinks
● initObservable
● initModules
● getTemplate
● hasTemplate

12. Класс uiCollection
Код модуля
<Magento_Ui_module_dir>/view/base/web/js/lib/core/collection.js
Данный класс содержит методы:
● initElement
● destroy
● getChild
Свойства данного класса:
● elems
● childDefaults

13. Литералы
Примеры:
'${ $.submitUrl }’
'${ $.loadForm($.formUrl) }’
'${ 20 + 13 }’
Литерал для взаимодействия с другим компонентом:
'${ $.provider }:user.theme’

14. Литералы
Свойства, которые будут игнорироваться в литералах:

15. Связывание свойств компонентов
Exports:

16. Связывание свойств компонентов
Exports:

17. Связывание свойств компонентов
Imports:

18. Связывание свойств компонентов
Links:

19. Связывание свойств компонентов
Listens:

20. Модификация js-компонентов
Способы модификации:
● Миксины
● Переопределение через requirejs-config

21. Миксины:
Объявление

22. Миксины:
Переопределение