MARIA KERN NETZ98 GMBH MAGENTO 2 UI COMPONENTS THE JS PART

Transcription

1 MARIA KERN NETZ98 GMBH MAGENTO 2 UI COMPONENTS THE JS PART

2 Magento 2 UI Components The JS part Maria Kern Senior Frontend Architect at netz98 GmbH CommerceHero: maria-kern

3 AGENDA 1 DEFINITION 4 INITIALIZATION PROCESS 2 BASIC STRUCTURE 5 REAL LIFE EXAMPLE 3 USEFUL FUNCTIONS AND PROPERTIES 6 DEBUGGING 4 3

4 UI components definition

5 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

6 UI COMPONENTS DEFINITION BACKEND FRONTEND 6

7 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

8 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

9 Basic structure of UI components

10 BASIC STRUCTURE OF UI COMPONENTS JS DEPENDENCY AND INHERITANCE uiclass uielement uicollection / uicomponent 10

11 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

12 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

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 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

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 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

15 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

16 Useful functions and properties

17 USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation 17

18 USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation DEPENDENCY 18

19 USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation INHERITANCE 19

20 USEFUL FUNCTIONS AND PROPERTIES EXTEND AND INITIALIZE extend() implements inheritance of UI components initialize() is called during instantiation OVERWRITE / EXTEND A METHOD 20

21 USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES Every component has a defaults object > Declaring properties 21

22 USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES custom properties 22

23 USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES a lot of given properties 23

24 USEFUL FUNCTIONS AND PROPERTIES CONFIGURATION AND FIRST LEVEL PROPERTIES Configuration properties will be available as first level properties this.isvisible 24

25 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

26 USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Binding data to HTML Elements by data-bind Attribute 26

27 USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Declaring observable variables 27

28 USEFUL FUNCTIONS AND PROPERTIES KNOCKOUT JS Declaring observable variables 28

29 USEFUL FUNCTIONS AND PROPERTIES HANDLING OF CHILDREN The uicollection class (mainly) provides a lot of methods for handling of child components 29

30 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

31 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

32 Initialization process

33 INITIALIZATION PROCESS All the configurations are translated into json and added to the body 33

34 INITIALIZATION PROCESS 34

35 INITIALIZATION PROCESS All the configurations are translated into json and added to the body 35

36 INITIALIZATION PROCESS All the configurations are translated into json and added to the body 36

37 INITIALIZATION PROCESS The app calls Magento_Ui/js/core/renderer/layout and passes the UI component s configuration into the layout 37

38 INITIALIZATION PROCESS layout.js creates instances of UI components and its child components 38

39 Real life example

40 REAL LIFE EXAMPLE UI component map-widget 40

41 REAL LIFE EXAMPLE UI component map-widget 41

42 REAL LIFE EXAMPLE child UI component productlist productlist could be used in other components as well 42

43 REAL LIFE EXAMPLE Initialization UI Components JS and Template files 43

44 REAL LIFE EXAMPLE Parent component Child component 44

45 REAL LIFE EXAMPLE Parent extends uicollection class initelement(child) {} this.getchild( productlist ) 45

46 Options for debugging

47 OPTIONS FOR DEBUGGING Chrome Knockoutjs Context Debugger click on DOM element inside UI component scope 47

48 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

49 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

50 THANK YOU! Slides References: