Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Futureability
PHTML | XHTML | TWIG | ELSE
LESS | SASS | POST CSS | ELSE
REACT | ANGULAR2 | AURELIA | ELSE
REQUIREJS | WEBPACK | ELSE
ES6 + NODE JS | NOTHING ELSE
Q&A
devdocs.magento.com
Vitaliy Korotun, Magento, Architect
Related Documents
