Why async?
◉ Because of modularity of server side app:- data-mage-init- Layout XML declarations- UI Components XML declarations ◉ Asynchronous JavaScript modules loaders ◉ Many user interactions are asynchronous ◉ Performance considerations
How to maintain async?new MutationObserver ( function(mutations) { // array of MutationRecord });
Browser Chrome Firefox Internet Explorer Opera Safari
Starting from 18 14 11 15 6.0
UiComponent
define(['uiElement'], function (Element) { return Element.extend({…}); });
uiRegistry
define(['uiRegistry'], function (r) { r.get('cmp’, function (c) {};); // sync
var p = reg.promise('cmp'); // async
p.done(function (c) {};);});
component
UiRegistry
component a
component b
component c(source)
Practice 0: remote control
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_columns'); c.insertChild(c.getChild('name'), c.getChild('gender'));});
Practice 1: Apply Filter
require(['uiRegistry'], function (reg) { var c = reg.get('index=listing_filters'); c.setData({"email":”[email protected]"}).apply();});
Practice 1: Apply Filter
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', ’[email protected] ');});
does not work
Practice 1: Apply Filter// hack filters.js (change “exports” to “links”)
require(['uiRegistry'], function (reg) { var c = reg.get('index=customer_listing_data_source'); c.set('params.filters.email', '[email protected]');});
Practice 2: Apply search filter
require(['uiRegistry'], function(r) { r.async("index=fulltext") (function (c) { c.set('value', 'keyword'); }); });
async.js
$.async(‘CSS selector’, function callback);
Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( 'span', function(dom) { dom.style.border='1px solid #ff0000'; } ); });
async.js$.async({…}, function callback);{ "component": 'cms_page_listing', "ctx": 'div', // CSS selector/Element "selector": 'span’ // CSS selector}
Practice 3: DOM modificationrequire( ['Magento_Ui/js/lib/view/utils/async'], function($) { $.async( { "component": "index=related_product_listing", "selector": "span" }, function(dom) { dom.style.border='1px solid #ff0000'; } ); });
Practice 4 (see UiWorkshop module)
Adding ‘goToFirstPage’ and
‘goToLastPage’ buttons to pager
Practice 5 (see UiWorkshop module)
Disable ’save’ button in inline editor
unless something has changed
Practice 6 (see UiWorkshop module)
Improving keyboard navigation on
Categories selection tree