Download to read offline
Mage Titans - Magento 2 Frontend Framework - UI Components
- 2. Building pretty anything withMagento 2 frontend framework Vitaliy Korotun, Magento, Architect complex forms UI Components
- 3. 853 PRs closedand 277+1 open Open-source software may be developed in a collaborative public manner
- 4. JS: 386 VS12K PHP: 12K VS 24K XML: 4K VS 4K Files
- 5. JS: 165K VS250K PHP: 930K VS 1.8M XML: 915K VS 727K LOC
- 6. Standardization MODULAR RequireJS GRANULAR 386VS 12K CONFIGURABLE RequireJS EXTENSIBLE RequireJS + Module Interceptors REUSABLE UI Components + (no inline JS) DI RequireJS + Module Interceptors aka mixins
- 7. Sync Async Shared Private Server-sideClient-side Classic Single Page One-Flush Progressive Backend Storefront PHTML (X)HTML Unification AND
- 8. WHAT WHERE WHEN devdocs.magento.com Developers -> UIComponents Guide
- 9.
- 10. Isolation No standard <form>tag Each component instance in separate namespace Bare HTML includes are allowed (“data-form-part” attribute is required)
- 11. Interaction 2-way Data Binding(with KnockoutJS) uiRegistry – is a components locator. Methods: get/set/has/promise Comprehensive linking capabilities (with links/imports/exports/tracks properties)
- 12. Performance Collapsed tabs areinitialized but 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
- 13. Extensibility UIC XML declaration/configurationfiles 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
- 14. Down the road XMLLayout Blocks PHTML Templates Inline JavaScript Course grain JavaScript XML UIC Layout UI Components Unified Templates Modular JavaScript Fine grain JavaScript
- 15. Futureability PHTML | XHTML| TWIG | ELSE LESS | SASS | POST CSS | ELSE REACT | ANGULAR2 | AURELIA | ELSE REQUIREJS | WEBPACK | ELSE ES6 + NODE JS | NOTHING ELSE
- 16.