MARIA KERN – NETZ98 GMBH MAGENTO 2 UI COMPONENTSuk.magetitans.com/wp-content/uploads/2017/06/Mage-Titans-Maria-Kerns.pdf · Maria Kern Senior Frontend Architect at netz98 GmbH @maja_kern

MARIA KERN – NETZ98 GMBH

MAGENTO 2 UI COMPONENTSTHE JS PART

Maria KernSenior Frontend Architect at netz98 GmbH

www.netz98.de

@maja_kern

CommerceHero: maria-kern

Magento 2 UI Components – The JS part

netz98 GmbH www.netz98.de [email protected]

1

2

3

4

5

6

DEFINITION

REAL LIFE EXAMPLEBASIC STRUCTURE

DEBUGGING USEFUL FUNCTIONS AND PROPERTIES

INITIALIZATION PROCESS

MAGENTO 2 UI COMPONENTS – THE JS PART

AGENDA

3

4

UI components definitionMAGENTO 2 UI COMPONENTS – THE JS PART



UI COMPONENTS DEFINITION

5

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




6

BACKEND FRONTEND




7

Magento_Ui/js/grid/listing

Magento_Ui/js/grid/toolbar

Magento_Ui/js/form/element/abstract

Magento_Ui/js/form/components/fieldsetBACKEND FRONTEND




8

Magento_Checkout/js/view/cart/totals

Magento_Ui/js/grid/listing

Magento_Ui/js/grid/toolbar

Magento_Ui/js/form/element/abstract

Magento_Checkout/js/view/minicart

Magento_Ui/js/form/components/fieldsetBACKEND FRONTEND

Basic structure of UI componentsMAGENTO 2 UI COMPONENTS – THE JS PART



BASIC STRUCTURE OF UI COMPONENTS

10

uiClass

uiElement

uiCollection /uiComponent

JS DEPENDENCY AND INHERITANCE




11

uiClass

uiElement



<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




12

uiClass

uiElement






the uiClass is an abstract class where all components are extended from


MAGENTO 2 UI COMPONENTS - THE JS PART


13

uiClass

uiElement


custom component 1

custom component 2 custom component 3

child component other child component





other child component

use uiElement class as base class of your own component, if you won’t have child components




14

uiClass

uiElement


custom component 1








use uiCollection / uiComponent class as base, if your component will contain a collection of child UI components




15

uiClass

uiElement


custom component 1








Useful functions and propertiesMAGENTO 2 UI COMPONENTS – THE JS PART



USEFUL FUNCTIONS AND PROPERTIES

17

• extend() implements inheritance of UI components

• initialize() is called during instantiation

EXTEND AND INITIALIZE




18




DEPENDENCY




19




INHERITANCE




20




OVERWRITE / EXTEND A METHOD




21

CONFIGURATION AND FIRST LEVEL PROPERTIES

Every component has a “defaults” object

> Declaring properties




22


custom properties




23


a lot of given properties




24


Configuration properties will be available as “first level properties”

this.isVisible




25

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 // path to template file

this.component

this.getTemplate()

this.hasTemplate()





26

KNOCKOUT JS

Binding data to HTML Elements by data-bind Attribute




27

Declaring observable variables

KNOCKOUT JS




28

KNOCKOUT JS

Declaring observable variables




29

The uiCollection class (mainly) provides a lot of methods for handling of child components

HANDLING OF CHILDREN




30



Called for every childcomponent

> Child is given as parameter




31


initElement(child) {}

this.elems()

this.containers

this.getChild(‘nameOfChild’) // UI component

this.hasChild(‘nameOfChild’) // boolean

this.insertChild(‘nameOfComponent’)


Initialization processMAGENTO 2 UI COMPONENTS – THE JS PART




33

All the configurations are translated into json and added to the body




34




35





36





37

• The app calls Magento_Ui/js/core/renderer/layout and passes the UI component’s configuration into the layout




38

• layout.js creates instances of UI components and its child components

Real life exampleMAGENTO 2 UI COMPONENTS – THE JS PART



REAL LIFE EXAMPLE

40

UI component„map-widget“



REAL LIFE EXAMPLE

41

UI component„map-widget“



REAL LIFE EXAMPLE

42

child UI component„productlist“

productlist could be used in other components as well



REAL LIFE EXAMPLE

43

UI ComponentsJS and Template

files

Initialization



REAL LIFE EXAMPLE

44

Parent component

Child component



REAL LIFE EXAMPLE

45

Parent extendsuiCollection

class

initElement(child) {}this.getChild(‘productlist’)

Options for debuggingMAGENTO 2 UI COMPONENTS – THE JS PART



OPTIONS FOR DEBUGGING

47

Chrome Knockoutjs Context Debugger

click on DOM elementinside UI component scope



OPTIONS FOR DEBUGGING

48

Magento DevTools by MageSpecialist, with Chrome extension

list of all initialized UI components on the actual page with link to inspect theDOM element



CONCLUSION

49

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

UI COMPONENTS – THE JS PART

THANK YOU!

References:http://devdocs.magento.com/

Slideshttp://XXXXXXXXXXXXX/

Documents

MARIA KERN – NETZ98 GMBH MAGENTO 2 UI COMPONENTSuk.magetitans.com/wp-content/uploads/2017/06/Mage-Titans-Maria-Kerns.pdf · Maria Kern Senior Frontend Architect at netz98 GmbH @maja_kern