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
AGENDA 1 DEFINITION 4 INITIALIZATION PROCESS 2 BASIC STRUCTURE 5 REAL LIFE EXAMPLE 3 USEFUL FUNCTIONS AND PROPERTIES 6 DEBUGGING 4 3
UI components definition
UI COMPONENTS DEFINITION The UI components are: the base for many user interface (UI) elements (buttons, fields, tables, minicart) designed for simple and flexible rendering of user interfaces defined in the module Magento_UI used in Magento frontend and backend 5
UI COMPONENTS DEFINITION BACKEND FRONTEND 6
UI COMPONENTS DEFINITION BACKEND Magento_Ui/js/form/components/fieldset FRONTEND Magento_Ui/js/form/ element/abstract Magento_Ui/js/grid/toolbar Magento_Ui/js/grid/listing 7
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 Magento_Checkout/js/view/minicart 8
Basic structure of UI components
BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass uielement uicollection / uicomponent 10
BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass <UI_Module_dir>/view/base/web/js/lib/ core/class.js uielement <UI_Module_dir>/view/base/web/js/lib/ core/element/element.js uicollection / uicomponent <UI_Module_dir>/view/base/web/js/lib/ core/collection.js 11
BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass uielement <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 uicollection / uicomponent <UI_Module_dir>/view/base/web/js/lib/ core/collection.js 12
MAGENTO 2 UI COMPONENTS - THE JS PART BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass <UI_Module_dir>/view/base/web/js/lib/ core/class.js custom component 1 uielement uicollection / uicomponent <UI_Module_dir>/view/base/web/js/lib/ core/element/element.js use uielement class as base class of your own component, if you won t have child <UI_Module_dir>/view/base/web/js/lib/ core/collection.js components custom component 2 custom component 3 child component other child component other child component 13
MAGENTO 2 UI COMPONENTS - THE JS PART BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass <UI_Module_dir>/view/base/web/js/lib/ core/class.js custom component 1 uielement uicollection / uicomponent <UI_Module_dir>/view/base/web/js/lib/ core/element/element.js use uicollection / uicomponent class as base, if your component will <UI_Module_dir>/view/base/web/js/lib/ core/collection.js contain a collection of child UI components custom component 2 custom component 3 child component other child component other child component 14
MAGENTO 2 UI COMPONENTS - THE JS PART BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass <UI_Module_dir>/view/base/web/js/lib/ core/class.js uielement <UI_Module_dir>/view/base/web/js/lib/ core/element/element.js custom component 1 uicollection / uicomponent <UI_Module_dir>/view/base/web/js/lib/ core/collection.js custom component 2 custom component 3 child component other child component other child component 15
Useful functions and properties
USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation 17
USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation DEPENDENCY 18
USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation INHERITANCE 19
USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation OVERWRITE / EXTEND A METHOD 20
USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES Every component has a defaults object > Declaring properties 21
USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES custom properties 22
USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES a lot of given properties 23
USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES Configuration properties will be available as first level properties this.isvisible 24
USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES A lot of default propertiesand 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 // path to template file this.component this.gettemplate() this.hastemplate() 25
USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Binding data to HTML Elements by data-bind Attribute 26
USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Declaring observable variables 27
USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Declaring observable variables 28
USEFUL FUNCTIONS AND PROPERTIES HANDLING OF CHILDREN The uicollection class (mainly) provides a lot of methods for handling of child components 29
USEFUL FUNCTIONS AND PROPERTIES HANDLING OF CHILDREN The uicollection class (mainly) provides a lot of methods for handling of child components Called for every child component > Child is given as parameter 30
USEFUL FUNCTIONS AND PROPERTIES HANDLING OF CHILDREN The uicollection class (mainly) provides a lot of methods for handling of child components initelement(child) {} this.elems() this.containers this.getchild( nameofchild ) // UI component this.haschild( nameofchild ) // boolean this.insertchild( nameofcomponent ) 31
Initialization process
INITIALIZATION PROCESS All the configurations are translated into json and added to the body 33
INITIALIZATION PROCESS 34
INITIALIZATION PROCESS All the configurations are translated into json and added to the body 35
INITIALIZATION PROCESS All the configurations are translated into json and added to the body 36
INITIALIZATION PROCESS The app calls Magento_Ui/js/core/renderer/layout and passes the UI component s configuration into the layout 37
INITIALIZATION PROCESS layout.js creates instances of UI components and its child components 38
Real life example
REAL LIFE EXAMPLE UI component map-widget 40
REAL LIFE EXAMPLE UI component map-widget 41
REAL LIFE EXAMPLE child UI component productlist productlist could be used in other components as well 42
REAL LIFE EXAMPLE Initialization UI Components JS and Template files 43
REAL LIFE EXAMPLE Parent component Child component 44
REAL LIFE EXAMPLE Parent extends uicollection class initelement(child) {} this.getchild( productlist ) 45
Options for debugging
OPTIONS FOR DEBUGGING Chrome Knockoutjs Context Debugger click on DOM element inside UI component scope 47
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 48
CONCLUSION UI COMPONENTS THE JS PART Advantages easy teamwork standardized programming common procedures and requirements have already been implemented configuring without inline scripting! Disadvantages it takes time to get familiar with sometimes it feels to be restricted in frontend development 49
THANK YOU! http://xxxxxxxxxxxxx/ Slides References: http://devdocs.magento.com/