MARIA KERN – NETZ98 GMBH
MAGENTO 2 UI COMPONENTS
THE JS PART
Magento 2 UI Components – The JS part
Maria Kern
Senior Frontend Architect at netz98 GmbH
www.netz98.de
@maja_kern
CommerceHero: maria-kern
MAGENTO 2 UI COMPONENTS – THE JS PART
UI components definition
MAGENTO 2 UI COMPONENTS – THE JS PART
UI COMPONENTS DEFINITION
The UI components are:
•
the base for many user interface (UI) elements
(buttons, fields, tables, minicart)
•
designed for simple and flexible user interface rendering
•
defined in the module Magento_UI
Magento uses knockout js as javascript library especially for
binding data to html elements.
They are used in Magento frontend and backend
4
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
UI COMPONENTS DEFINITION
BACKEND
5
netz98 GmbH
www.netz98.de
FRONTEND
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
UI COMPONENTS DEFINITION
BACKEND
Magento_Ui/js/form/components/fieldset
Magento_Ui/js/form/
element/abstract
Magento_Ui/js/grid/toolbar
Magento_Ui/js/grid/listing
6
netz98 GmbH
www.netz98.de
[email protected]
FRONTEND
MAGENTO 2 UI COMPONENTS – THE JS PART
UI COMPONENTS DEFINITION
BACKEND
Magento_Ui/js/form/components/fieldset
FRONTEND
Magento_Checkout/js/view/cart/totals
Magento_Ui/js/form/
element/abstract
Magento_Ui/js/grid/toolbar
Magento_Ui/js/grid/listing
7
netz98 GmbH
www.netz98.de
[email protected]
Magento_Checkout/js/view/minicart
MAGENTO 2 UI COMPONENTS – THE JS PART
Basic structure of UI components
MAGENTO 2 UI COMPONENTS – THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
9
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
10
netz98 GmbH
www.netz98.de
[email protected]
<UI_Module_dir>/view/base/web/js/lib/
core/class.js
<UI_Module_dir>/view/base/web/js/lib/
core/element/element.js
<UI_Module_dir>/view/base/web/js/lib/
core/collection.js
MAGENTO 2 UI COMPONENTS – THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
11
netz98 GmbH
www.netz98.de
[email protected]
<UI_Module_dir>/view/base/web/js/lib/
core/class.js
the uiClass is an abstract
class where all components
are extended from
<UI_Module_dir>/view/base/web/js/lib/
core/element/element.js
<UI_Module_dir>/view/base/web/js/lib/
core/collection.js
MAGENTO 2 UI COMPONENTS - THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
custom component 1
custom component 2
other child component
child component
12
netz98 GmbH
www.netz98.de
[email protected]
<UI_Module_dir>/view/base/web/js/lib/
core/class.js
<UI_Module_dir>/view/base/web/js/lib/
core/element/element.js
use uiElement class as parent
(base class) of your own
component, if you won’t have
<UI_Module_dir>/view/base/web/js/lib/
child components
core/collection.js
custom component 3
other child component
MAGENTO 2 UI COMPONENTS - THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
custom component 1
custom component 2
other child component
child component
13
netz98 GmbH
www.netz98.de
[email protected]
<UI_Module_dir>/view/base/web/js/lib/
core/class.js
<UI_Module_dir>/view/base/web/js/lib/
core/element/element.js
use uiCollection /
uiComponent class as
parent, if your component will
<UI_Module_dir>/view/base/web/js/lib/
core/collection.js
contain a collection of child
UI components
custom component 3
other child component
MAGENTO 2 UI COMPONENTS - THE JS PART
BASIC STRUCTURE OF UI COMPONENTS
JS DEPENDENCY
AND INHERITANCE
uiClass
uiElement
uiCollection /
uiComponent
custom component 1
custom component 2
other child component
child component
14
netz98 GmbH
www.netz98.de
[email protected]
<UI_Module_dir>/view/base/web/js/lib/
core/class.js
<UI_Module_dir>/view/base/web/js/lib/
core/element/element.js
<UI_Module_dir>/view/base/web/js/lib/
core/collection.js
custom component 3
other child component
MAGENTO 2 UI COMPONENTS – THE JS PART
Useful functions and properties
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
EXTEND AND INITIALIZE
•
extend() implements inheritance of UI components
•
initialize() is called during instantiation
16
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
EXTEND AND INITIALIZE
•
extend() implements inheritance of UI components
•
initialize() is called during instantiation
DEPENDENCY
17
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
EXTEND AND INITIALIZE
•
extend() implements inheritance of UI components
•
initialize() is called during instantiation
INHERITANCE
18
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
EXTEND AND INITIALIZE
•
extend() implements inheritance of UI components
•
initialize() is called during instantiation
OVERWRITE / EXTEND A
METHOD
19
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
CONFIGURATION AND FIRST LEVEL PROPERTIES
Configuration properties will
be available as “first level
properties”
this.isVisible
20
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
CONFIGURATION AND FIRST LEVEL PROPERTIES
A lot of default properties and methods are already set by the base classes, e.g.:
this.index // name of component
this.name // full name of component including parents
this.template
this.component
this.getTemplate()
this.hasTemplate()
21
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
REAL LIFE EXAMPLE
TRACKS AND INIT OBSERVABLES
For Knockout JS binding:
this.tracks
initObservable()
22
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
USEFUL FUNCTIONS AND PROPERTIES
INIT ELEMENT AND HANDLING WITH CHILDREN
The uiCollection class (mainly) provides a lot of methods for handling with child
components, e.g.:
initElement(child) {}
this.elems()
this.containers
this.getChild(‘nameOfChild’) // UI component
this.hasChild(‘nameOfChild’) // boolean
this.insertChild(‘nameOfComponent’)
23
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
Initialization process
MAGENTO 2 UI COMPONENTS – THE JS PART
INITIALIZATION PROCESS
All the configurations are translated into json and added to the body
25
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
INITIALIZATION PROCESS
•
The app calls Magento_Ui/js/core/renderer/layout and passes the UI component’s
configuration into the layout
26
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
INITIALIZATION PROCESS
•
layout.js creates instances of UI components and its child components
27
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
Real life example
MAGENTO 2 UI COMPONENTS – THE JS PART
REAL LIFE EXAMPLE
UI component
„map-widget“
29
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
REAL LIFE EXAMPLE
UI component
„map-widget“
30
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
REAL LIFE EXAMPLE
child UI component
„productlist“
productlist could be used in other components as well
31
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
Options for debugging
MAGENTO 2 UI COMPONENTS – THE JS PART
OPTIONS FOR DEBUGGING
Chrome Knockoutjs Context Debugger
click on DOM element
inside UI component scope
33
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
OPTIONS FOR DEBUGGING
Magento DevTools by MageSpecialist, with Chrome extension
list of all initialized UI components on
the actual page with link to inspect the
DOM element
34
netz98 GmbH
www.netz98.de
[email protected]
MAGENTO 2 UI COMPONENTS – THE JS PART
CONCLUSION
UI COMPONENTS – THE JS PART
Advantages
•
easy teamwork – standardized programming
•
common procedures and requirements have already been implemented
•
configuring without inline scripting!
Disadvantages
•
need time to get familiar with
•
sometimes you feel restricted in frontend development
35
netz98 GmbH
www.netz98.de
[email protected]