Flexible UI rendering in Magento 2 is possible due to the usage of UI components. By utilizing them, you configure every page of your eCommerce website. Find a brief description of basic Magento 2 UI components in document.

1. Overview of UI components - Magento 2 Developer Documentation
Visit Us: www.eglobeits.com

2. Magento 2 UI Components
Basic Components
● Listing component
● Form component
1. Breadcrumbs 2. Pagination
3. Buttons 4. Popups
5. Drop-downs 6. Ratings
7. Forms 8. Sections
9. Icons 10. layout
11. Tabs and accordions 12. Tables
13. Loaders 14. Tooltips
15.Messages 16. Actions-toolbar

3. Magento 2 UI Library
Magento UI Library
Magento UI library is located under `/lib/web/` folder
➢ Lib
➢ Web
➢ css
➢ Fonts
➢ Images
➢ Jquery
UI library provides the ability to customize and reuse the user interface elements and properties.

4. Liberation Scans
● simple and flexible UI rendering.
● standard module and can be found under MagentoUI namespace.
● providing/supporting interactions of JavaScript components and server
● Vendor
● Magento
● Module-ui
–View
●Base
●ui_component
●Etc
●Definition.xml (UI components base declaration)
●Templates
●Container
●Export
●Form
●Default.xhtml (<uiComponent/> rendering html)
●Listing
●Default.xhtml
●Web
●Js
●Templates
●Form
●Element
●Button.html
●Input.html
The actual rendering of the interface element in the browser is handled by KnockoutJS.

5. Definition.xml
<form class="MagentoUiComponentForm">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/form</item>
</item>
<item name="template" xsi:type="string">templates/form/default</item>
</argument>
</form>

6. Magento 1 -Adding Product Editing form to a Page
<adminhtml_catalog_product_new>
<update handle="editor"/>
<reference name="content">
<block type="adminhtml/catalog_product_edit" name="product_edit"></block>
</reference>
<reference name="left">
<block type="adminhtml/catalog_product_edit_tabs" name="product_tabs"></block>
</reference>
<reference name="js">
<block type="adminhtml/catalog_product_edit_js" template="catalog/product/js.phtml"
name="catalog_product_js"></block>
<block type="core/template" template="catalog/wysiwyg/js.phtml"/>
</reference>
</adminhtml_catalog_product_new>

7. <editor>
<reference name="head">
<action method="setCanLoadExtJs"><flag>1</flag></action>
<action method="addJs"><script>mage/adminhtml/variables.js</script></action>
<action method="addJs"><script>mage/adminhtml/wysiwyg/widget.js</script></action>
<action method="addJs"><script>lib/flex.js</script></action>
<action method="addJs"><script>lib/FABridge.js</script></action>
<action method="addJs"><script>mage/adminhtml/flexuploader.js</script></action>
<action method="addJs"><script>mage/adminhtml/browser.js</script></action>
<action method="addJs"><script>prototype/window.js</script></action>
<action method="addItem">
<type>js_css</type><name>prototype/windows/themes/default.css</name>
</action>
<action method="addCss">
<name>lib/prototype/windows/themes/magento.css</name>
</action>
</reference>
</editor>
Magento 2 -adding product editing form to a page
<uiComponent name="product_form"/>

8. Add New Tab in product edit page in Magento 2 admin
Code / [namespace] / [your module] / View/ui_components / product_form.xml
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="product.packages">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Product Package</item>
<item name="sortOrder" xsi:type="number">200</item>
</item>
</argument>

9. <field name="customFieldName">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="prefixName" xsi:type="string">customFieldName</item>
<item name="label" xsi:type="string" translate="true">Package Label</item>
<item name="component" xsi:type="string">Magento_Catalog/js/form/element/input</item>
<item name="template" xsi:type="string">Magento_Catalog/form/element/input</item>
</item>
</argument>
</field>
</fieldset>
</form>

10. Default.xhtml
<div data-role="spinner" data-component="{{getName()}}.areas" class="admin__data-grid-loading-mask">
<div class="spinner">
<span/><span/><span/><span/><span/><span/><span/><span/>
</div>
</div>
<div data-bind="scope: '{{getName()}}.areas'" class="entry-edit form-inline">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>

11. Thank You