M2 FE - OPV

During layout merging, what is the order in which XML files are merged?

Module files
Sorted according to their module priority (array index of module's position in app/ etc/config.php). If their priorities are equal, they are sorted according to their alphabetical priority)
- Module ❌ files loaded
- Module ❌ files loaded

Theme files
- ❌ files loaded
- ❌ files loaded
- ❌ files replaced

What are additive changes and what are overriding changes during layout merging?

Adding a new block or setting a new argument is considered and ❌ change. Changing the value of an existing argument is considered and ❌ change.

In what order are image properties defined in etc/view.xml?

❌
❌
❌
❌
❌
❌
❌

Explain the differences between the various static files deployment strategies.

When the ❌ strategy is used, all static view files for all packages are deployed.
The ❌ strategy minimizes the time required for deployment when files for more than one locale are deployed.
The ❌ strategy avoids file duplication by storing similar files in base subdirectories.

Which LESS compilation options are available in Magento? How are they different?

1. ❌: less files are compiled with a PHP less library. In developer mode, PHP will generate the CSS files on the fly provided there is not one already. Running static content deploy will also compile the stylesheets
2. ❌: less files are compiled every page load on the client-side. This results in exceptionally slow response times and horrible flash-of-unstyled-text

❌ - Displays before all other elements in its parent node
❌ - Displays before the named element
❌ - The element is considered non-positioned if the value of after is also empty
❌ - Displays after all other elements in its parent node
❌ - Displays after the named element
❌ - The element is considered non-positioned if the value of before is also empty
If both before and after are present, ❌ takes precedence
If both before and after are absent or empty, the element is considered as ❌
If several elements have before or after set to dash (-), all elements display at the top or bottom, but the order is ❌
If the before or after attribute refer to an element that is not located in the parent node, the element displays at a ❌ location

In RequireJS, what is the difference between the define and require methods?

❌ executes immediately.
❌ wraps a module that can be requested and used by other modules. It is only executed when called.

What options are available to configure JavaScript minification and bundling?

❌ JavaScript files
- Concatenate source JS files from an area together into one file.
- Reduces number of JS requests
- A massive JS file is downloaded

❌ JavaScript files
- Groups JS files into bundles
- Downloads several files
- Negatively impacts performance

❌ JavaScript files
- Reduces the JS files' size by stripping whitespace and shortening variable names

How are UI components used in the adminhtml and frontend design areas?

❌
- Configured through layout XML
- The jsLayout argument is used to specify information

❌
- Configured through dedicated XML file (view/.../ui_component/[ui_component_name.xml])
- Included in layout XML with the uiComponent tag

UI Components are a combination of:

- ❌ declaration that specifies the component’s configuration settings and inner structure based on the hierarchy of child UI components
- ❌ inherited from one of the Magento JS framework UI components base classes (UIElement, UIClass, UICollection)
- ❌ using ❌ bindings

Basic UI component config file

* The namespace of the name is global. If the file names in different modules are the same, they are ❌ into a single configuration
* Rules to follow:
* top node must have the name of one of the ❌
* top node must contain a link to the ❌
* Top node can have an ❌ node. Contains the config for that basic UI component. The child nodes of the <argument/> node will be the argument properties that will be passed in to the component (❌ nodes).
* Top node can have nested nodes. Every nested node is regarded as a separate UI component. Nested nodes also contain the <argument/> node.

Define the custom KnockoutJS bindings added in Magento.

❌ - Notifies its subscriber when an associated element is inserted in the DOM
❌ - Automatically highlights the text in an input element when it gets focus
❌- Renders the provided string, as a collection of HTML elements, inside of the associated node. Instantiates all bindings defined for the rendered elements in the scope of the current view model
❌ - Provides methods and properties required for implementing collapsible panels. May include the following properties: as, closeOnOuter, onTarget, openClass
❌ - An adapter for the mage/calendar.js widget
❌ - Performs the gradual change of the element’s visibility
❌ - Used to translate a string according to the currently enabled locale. Creates the necessary elements for the TranslateInline jQuery widget if it’s enabled on the page
❌ - Allows setting up listeners for the keypressevent of a specific key
❌- Adapter for the [data-mage-init]attribute used to initialize jQuery widgets on the associated element
❌ - Decorator for the standard Knockout’s options binding which adds the support of nested options, and renders them as the <optgroup> element
❌ - Allows to subscribe for the click event that happens outside of the boundaries of the associated element
❌ - Adapter for the jQuery UI Slider widget. Implements necessary handlers to work with mobile devices
❌ - Adapter for the jQuery UI Resizable widget.
❌- Binding that allows evaluating descendant nodes in the scope of an object found in the UiRegistry by provided string
❌- Implements the behavior similar to the standard checked binding. Doesn’t change the array of the already selected elements if the value of the associated DOM element changes.
❌- Customization of the existing KO template binding. Used to render a template inside of the associated element. Supports synchronous loading of templates by the provided path instead of searching for them on the page.
❌ - Custom binding for displaying a tooltip. May include the following options: action, center, closeButton, closeOnScroll, delay, position, track, trigger

Identify the base UI component classes:

❌
- An abstract class from which all components are extended. Rarely used as a direct parent for UI components’ classes
- Commonly used methods:
 - extend()- Implements inheritance of UI components
 - initConfig()- Processes the UI component’s configurations.
 - initialize()- Called during instantiation
 - _super()- Calls the parent UI component method with the same name as the _super() caller
- Commonly used properties
 - defaults - Declares the list of properties of a UI component’s instance. Declares communications between components if needed (imports/exports/links)

❌
- Direct successor of uiClass library
- Can be used as a direct parent
- Commonly used methods:
 - initLinks()- Implements component communications
 - initObservable()- Allows declaration of observable variables
 - observe(isTracked, listOfProperties) method is a wrapper for ko.observable() and ko.observableArray()
 - isTracked- defines access usage
 - listOfProperties - {String} - treated as a space-separated list of properties's names
 - listOfProperties - {Array} - List of properties's names
 - listOfProperties - {Object} - List of properties's names
 - track(listOfProperties) - Equal to observe(true, listOfProperties)
 - initModules()- Initializes external UI components’s instances and links them to local variables. Works with the modules section of the config, in which each key is the variable’s name and each value is the instance’s name.
 - getTemplate()- Returns a file path to the UI component’s template
 - hasTemplate() - Verifies that the template property was specified in the config

❌
- Should be used as a base class by any components that contain a collection of child UI components
- Inherits from uiElement
- Commonly used methods:
 - initElement() - Add custom functionality to a child Ui component or to the current UI component at the moment when the child UI component initializes. Gets the child component instance as a parameter
 - destroy() - Removes the following for the child component and itself:
  - link to the component in uiRegistry
  - link to the component is parent component
  - event listeners
 - getChild(childIndex) - Returns an element from the collection of child UI components
- Commonly used properties:
 - elems - Observable property that contains the collection of child components
 - childDefaults - Can be used to set the children defaults
- template:
 - vendor/magento/module-ui/view/base/web/templates/collection.html
 - Performs only one task: renders child templates if they exist

❌
- JS function object used for initializing and configuring UI components
- run(nodes, parent, cached, merge) method is the class entry point represented by uiLayout
- nodes configuration object.
 - name - The name of the property is the shortened name of the component.
 - parent - If the parent component is not yet initialized, uiLayout waits for it to appear in the uiRegistry.
 - template
 - config
 - children
  - isTemplate - if true, uiLayout stores the config in a private templates variable instead of initializing the component
 - nodeTemplate - use store config to create dynamic component instances during runtime by specifying the full name of the configuration
 - provider

Define the various ways to link properties of UI components:

❌
- Used to copy a local value to some external entity
- Object with key (name of the internal property or method that is tracked for changes) and value (name of the property or method that receives the value)

❌
- Used to track changes of an external entity property
- Object with key (name of the internal property or method that receives the value) and value (name of the property or method that is tracked for changes)

❌
- Used for cross tracking property changes: both are tracked and changing one results in changing the other
- Object with key (name of the internal property or method that sends an receives notifications) and value (name of the property or method that sends and receives the value)

❌
- Used to track the changes of a component’s property
- Object with key (name of the observable property or method that is tracked for changes) and value (name of the internal property or method which listens tot he changes)

Define the various types of Knockout observables:

ko.❌() - Creates a basic observable with a value. Works with any data type except arrays. If the observable contains an array or an object, a regular KO observable does not trigger updates when values within the array change.

ko.❌([]) - Should be used when working with arrays

ko.❌(callback) - Observable functions

Use the observable’s ❌() method to listen to changes. The real value of the observable comes out when you bind that to an element in the template.

Demonstrate the process from magento-less files via php preprocessing into real LESS files with extracted @import directives. Where can the intermediate files be found?

Magento’s LESS classes are found in the ❌ namespace

When loading the page, Magento looks for any CSS insertions into the head tag in layout XML. Any CSS file references are changed to ❌ and the search is made for a LESS file with that name. From there mage parses the @❌ and //@❌ instructions and assembles file paths based on the fallback directories

Magento’s Luma and blank themes load in 2 CSS files: ❌. These are the entry points into the LESS file structure. These are also the output files. All LESS files that have been imported by another LESS file are included into one of these 2 files.

The intermediate files are found in the ❌ directory. From there, they are symlinked into the ❌ directory.

Define the primary LESS files found in most modules:

❌ is the main entry point of a module stylesheet. For a module, it can have partials of its own, if desired, and should placed them in a /module directory next to this file. For a theme, this would override the core modules primary stylesheet. As a result, this would be done in cases where a significant portion of the styles are being updated.

❌ should mostly or entirely be empty in modules. For themes, if most of the core modules stylesheets are good and the goal is only to update a few things, the easiest way to do that is to create an _extend.less file. This file is loaded after _module.less and consequently will apply the same selectors.

❌ contains a massive list of abstract selectors that can be extended from and mixins.

What is the purpose of each of the different file types in a theme?
❌ - Describe the theme’s dependencies and some meta information. The autoload.files node informs Composer about the registration.php file.
❌ - Registers the module as a theme with Magento.
❌ - Describes the theme to Magento. Contains the following nodes:
* ❌ (required)
* ❌ (optional)
* media/preview_image (optional)
❌ - This file contains images configuration for all storefront product images and thumbnails.