The State of Breeze

A few months ago I wrote the first article about Breeze — performant Magento frontend.

Let’s recap the first post in one paragraph. Breeze removes built-in JavaScript files and replaces them with its own implementation. Since API of replaced components is almost the same, everything keeps working as before, but much more faster.

Now, it’s time to shake things up, and show you what we’ve done since then!

Single Page Application

Breeze now provides a SPA experience for the regular Luma theme! Here is a short video that shows how it’s working:

Luma SPA in action. A slow 3G network was used.

There were a few issues to fix to get Breeze working as a SPA application. The first issue was that each time you use the Back and Forward buttons or re-visit some page, Turbolinks was restoring its cache (which already had rendered views), and then Knockout started initialization and rendering. This behavior led to duplicated content for some view components. To fix this issue we’ve added an initial markup state and restore it right before the page is saved to the Turbolinks cache:

initialize: function (name, options, element) {
    this.markup = $(element).html();
},
destroy: function () {
    this.element.html(this.markup);
}

Another issue we had to fix — is to keep an eye on event listeners added by Breeze components to prevent memory leaks and duplicated event observer calls. This one was fixed with more granular event listener initialization and destroy method in every component.

Lazy mixins and widgets

I’m very happy about this simple feature. When doing customizations or writing custom modules you’ll end up with a few mixins and new widgets based on existing code. In earlier Breeze versions developer had to describe these dependencies in XML files so Breeze will add parent js files first and then yours. It was very annoying. Now, you can write your js code and nothing else — Breeze will handle everything regardless of the order of the js files:

// 1. a-vendor/tabs-mixin.js
// 2. b-vendor/mega-tabs.js
// 3. tabs.js - the first two components depends on this one, but
// you don’t need to worry about it. Breeze will process dependent
// components as soon as parent classes will be resolved.
// a-vendor/tabs-mixin.js
$.mixin('tabs', {
    open: function (original) {
        original();
    }
});
// b-vendor/mega-tabs.js
$.widget(‘megaTabs’, ‘tabs’, {
    open: function () {
        this._super();    
    }
});
// tabs.js
$.widget(‘tabs’, {
    open: function () {
        //
    }
});

Bundles invalidation

Breeze js bundles may depend on configuration values. For example, when Paypal is disabled, paypalCheckout widgets are no longer needed and we should not include them in the js bundle:

<item name="paypalCheckout" xsi:type="array">
    <item name="path" xsi:type="string">Swissup_Breeze/js/components/paypal-checkout</item>
    <item name="enabled" xsi:type="helper" helper="Swissup\Breeze\Helper\Config::isAnyEnabled">
        <param name="0">payment/paypal_express_bml/active</param>
        <param name="1">payment/payflow_express_bml/active</param>
    </item>
</item>

Previously you had to deploy static content after each configuration update. Now, Breeze refreshes bundles and you don’t need to remember when to redeploy static content.

PageBuilder integration

We’ve integrated two components from the PageBuilder module so far: Slider and Carousel widgets. Unlike original widgets, we didn’t use Slick Carousel dependency and implemented our own CSS-first carousel with less the 3kB of javascript.

The javascript is used to rebuild pagination on viewport size changes, to determine which page is active right now, and for the next/prev buttons. The scroll itself is CSS-powered and uses the scroll-snap feature.

More integrations

• Bundle products. Breeze is supporting all product types now!
• Magento_Captcha
• Magento_ReCaptcha
• Magento_LoginAsCustomer
• Mirasvit_CacheWarmer
• Argentotheme and 28 bundled modules

Next time we will improve the new slowest part of the Luma theme. Stay tuned.

Demo: https://breeze.swissupdemo.com/

Thanks for reading!