mage titans - magento 2 frontend framework - ui components

Building pretty anything with Magento 2 frontend framework

Vitaliy Korotun, Magento, Architect

complex forms

UI Components

853 PRs closed and 277+1 open

Open-source software may be developed in a collaborative public manner

JS: 386 VS 12KPHP: 12K VS 24KXML: 4K VS 4K

Files

JS: 165K VS 250KPHP: 930K VS 1.8MXML: 915K VS 727K

LOC

Standardization

MODULAR RequireJS

GRANULAR 386 VS 12K

CONFIGURABLE RequireJS

EXTENSIBLE RequireJS + Module

Interceptors

REUSABLE UI Components + (no

inline JS)

DI RequireJS +

Module Interceptors

aka mixins

Sync

Async

Shared

Private

Server-side

Client-side

Classic

Single Page

One-Flush

Progressive

Backend

Storefront

PHTML

(X)HTML

Unification

AND

WHAT

WHERE

WHEN

devdocs.magento.comDevelopers -> UI Components Guide

WHAT

WHERE

WHEN

4400 vs 19403

everywhere

anytime

IsolationNo standard <form> tag

Each component instance in separate namespace

Bare HTML includes are allowed (“data-form-part” attribute is required)

Interaction2-way Data Binding (with KnockoutJS)

uiRegistry – is a components locator. Methods: get/set/has/promise

Comprehensive linking capabilities (with links/imports/exports/tracks properties)

Performance

Collapsed tabs are initializedbut not rendered

JavaScript files bundling

Optimized rendering flow both for forms (>2.1.3) and grids (>2.0.0)

Values updated but not base grid markup

Extensibility

UIC XML declaration/configuration files merged across all modules and themes

RequireJS “Mixins” (aka Module Interceptors) to customize original modules constructors

$.async to manipulate with DOM within the asynchronous rendering environment

Down the road

XML Layout

Blocks

PHTML Templates

Inline JavaScript

Course grain JavaScript

XML UIC Layout

UI Components

Unified Templates

Modular JavaScript

Fine grain JavaScript

Q&A

devdocs.magento.com

Vitaliy Korotun, Magento, Architect

mage titans - magento 2 frontend framework - ui components

Internet