Source: Baoji SEO
UI components overview
Magento UI components are used to display different UI elements, such as tables, buttons, dialog boxes, and so on.
They are simple and flexible interface for rendering. Components interface being used to render a result, provide further interaction with the server components and javascript.
Magento UI components are implemented as a standard module called Magento_UI.
Want to use in your UI Components module inside, you need to add a dependency on Magento_UI in your composer.json file inside.
XSD file contains all of the following Components (components) common rules and restrictions.
<your module root dir> /Magento/Ui/etc/ui_definition.xsd
plug-in (extension) to develop XSD can not be extended nor introduce new components, but you can customize existing components.
General structure
Magento2 there are basic and auxiliary UI components (components).
Base components are:
1. The list of components (Listing Component)
2. form component (Form component)
other components are ancillary components.
Basic components in the page layout files in the declaration, the ancillary components declared in the configuration file in the top-level component instance.
All components can be thought Admin and storefront configuration.
When to use UI components.
Use Magento, you may use different ways to achieve UI elements:
1. There PHTML template of embedded javascript
2. PHTMl templates in XML layout associated JavaScript statement of
3.JQuery the widget
4.Magento the Component 2 UI
What is UI components
UI components consist of the following:
1. Identify the components and set the internal structure of the XML declaration statement
2. Javascript class inherits from magento javascript framework UI component class
3. relevant template
XML declaration (XML declaration)
XML is widespread in the Magento2 use this approach greatly facilitates developers to reuse existing methods and add your own customization.
Compared with the XML layout, UI component uses more semantic methods for declaring and configuring a user interface.
Examples of UI components is typically based on a hierarchy of sub-UI component.
E.g:
- Form component has set of fields (Fieldsets), tabs (Tabs) and internal fields (inner fields)
- List of components that have a filter (Filter), columns (Columns), bookmarks and other components.
Javascript class
screenshot below shows the class Javascript UI components of how it is implemented. 
Template (the Templates)
using KnockoutJS UI component can be bound to one or more HTML templates.
Configuration UI component a
UI component is mainly defined by the specific examples below:
1. <Magento_Ui_module_dir> /view/base/ui_component/etc/definition.xml: default component configuration. It can be inherited in a custom module.
2.UI component's XML declaration. (UI assembly XML declaration)
3.Backend / the PHP modifiers
internal class configuration 4.Javascript
UI components in the design area with the front
arranged by XML layout
jsLayout parameter is used to specify the information.
<block name="block-name" template="Magento_Module::path_to_template.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
...
</item>
</argument>
</arguments>
</block>
UI components using Adminhtml region
configured (view / ... / ui_component / [ ui_component_name.xml]) dedicated XML file
into the layout XML tags by uiComponent
things when using UI components to keep in mind
UI components have different settings :
different configuration UI components are different; the configuration includes constants, required and optional. UI developers need to treat each component separately.
Beware of XML configuration errors
Surprisingly, most of the problems are due to the XML configuration UI components of typos and other errors that occur. Naming is important because there is a lot of cross-references between UI components.