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?
Performance
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.
The LWR framework also includes lazy loading, which means only the currently required resources are loaded onto the page, and compression of resources, which means that JavaScript and CSS files are minified to take up less space and load more quickly.
Security
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).
One of LWS’s key improvements is that it runs your components inside an isolated JavaScript environment – which means Salesforce can enforce its security measures without blocking you from including third-party code and accessing useful parts of the in-browser data. Many developers will remember the challenges and limitations with third-party scripts and accessing global data within Lightning Locker – but with LWR, these challenges should be minimized if not a thing of the past.
Flexibility
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.
Accessibility
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.
Second is screen reader support: historically, single page applications (SPAs – which is how LWR storefronts run) have caused issues with screen readers as the page document changes dynamically through JavaScript. LWR gives screen readers the information they need to understand where the user is focused as the page changes.
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.
