Salesforce’s newly-released Lightning Web Runtime (LWR) template for B2B Commerce brings the latest web development standards and most performant Experience Cloud features and functions to B2B at last.
As you configure and use your storefront with the LWR template, you’ll notice significant performance improvements, better mobile responsiveness, and several new and/or changed components and features. What you might not notice – but is happening behind the scenes – is improved security. But before we dive into these details, let’s take a step back and review what LWR is.
Lightning Web Runtime is the latest web application development framework from Salesforce. It is based on modern web development standards and uses Web Components to structure the applications that developers build and deploy. Until now, Salesforce has offered the Aura framework (which allowed for use of both Aura and Lightning Web Components) – but performance and security were limited by Aura.
The release of LWR allows us to make use of all the latest and greatest improvements in web development – all without having to make significant changes to the custom Lightning Web Components (LWCs) we’ve already spent time building.
What are the major benefits to LWR?
LWR is faster than Aura for a few reasons: first, it renders pages on the server-side rather than the client-side, which means the client (browser) has less work to do. The impact of this change for administrators and developers is that you can no longer see real-time changes to the LWCs within your storefront when you deploy them.
Instead, you must re-publish the entire storefront within Experience Builder to preview your changes. That’s because the resources and files that comprise your store pages are now cached, and the cache only resets every 150 days or when the store is re-published.
You may be familiar with “Lightning Locker,” which was the security architecture used in the Aura framework. LWR no longer uses Lightning Locker, and instead uses “Lightning Web Security” (LWS).
LWR makes customizations easier through increased flexibility. For example, you now have full control over the head markup within LWR, and can add or remove items as needed. Previously, in the Aura template, items could only be added.
LWR also provides what Salesforce calls “–dxp Styling Hooks”, which allow developers to adjust site-wide styles in a simplified manner. –dxp Styling Hooks are used in Salesforce’s provided base LWCs, and can also be used in custom LWCs – which means that now, it’s easy to adjust styling for both types via the use of these hooks. Even better: each of these hooks corresponds to a configurable property within Experience Builder – so once a developer includes them in their custom LWC code, an administrator can handle future adjustments.
LWR includes improvements to a couple of key accessibility features. First is F6 navigation support, which allows users (via keyboard or screen reader) to move between page regions instead of simply tabbing between elements.
Additionally, Salesforce has generated great developer documentation for ensuring that these accessibility improvements can easily be included in custom developed components.
Of course, a brand new framework means that not everything we used within the old framework will continue to work without changes. The LWR template for B2B Commerce is brand new, and while Salesforce has provided several standard components and pages, they didn’t give us everything.
Development of custom components will be required in almost every case to meet business needs. Fortunately, Salesforce has provided sample code to kickstart component development, and custom components developed for the previous Lightning B2B (LB2B) template can be re-used with minimal adjustment. Avionos has already begun the process of upgrading our reusable quick-start LB2B components to be LWR-compatible.
LWR’s improvements will be seen by administrators, developers, and users alike. The new LWR template is lean and includes only the pages and components needed for each site – rather than the dozens of unused pages and components the prior template included.
Administrators will appreciate the resulting cleaner configuration interface.
Developers will appreciate the modular approach to page and component design, Lightning Web Security flexibility, and simplified styling hooks.
Users will appreciate the performance improvements – particularly if they are used to a Classic B2B on VisualForce (formerly CloudCraze) storefront, but also if you are currently running an LB2B storefront using the Aura template.
In fact, Avionos performed an initial analysis of site performance between the Aura-based and LWR-based templates. We found that LWR provided 4x faster page load speeds compared to the Aura pages of similar complexity.
If you are currently running your storefront on Lightning B2B, you should consider what it will take to move your site to LWR to take advantage of its performance, security, flexibility, and accessibility improvements. Unlike the migration from Classic to Lightning B2B, this will not involve any data model changes or transformations.
A move from LB2B to LWR B2B should start with an evaluation of your existing site, where you will map your current components to LWR’s components (or identify gaps that will need to be filled with custom development and/or flows).
If you are currently on Classic B2B, now is the best time to get your migration scheduled. The platform has come a long way since Salesforce made the move from Visualforce to Lightning. Check out our blog about Why Now is the Right Time to Upgrade from Classic to learn more information.
Avionos can help your company perform this assessment and build a roadmap to getting your site upgraded to the latest and greatest storefront template. Schedule a discussion or demo here.