Getting Started with Lightning Web Runtime (LWR) for Experience Cloud
A chat between an ISV Partner, Coveo, and Salesforce Experience Cloud product management.
Etienne Rocheleau: As Coveo’s Lead Salesforce Architect, I spend a lot of time connecting with product managers from Salesforce. I wanted to share a chat I had recently with Zach Hawtof, a Product Manager on the Experience Cloud. He told me he was dedicated to helping companies deliver speed, scale, and beautiful consumer-centric experiences to customers. Coveo is a longtime Salesforce partner and we recently took a journey through Salesforce’s newest frontend platform, Lightning Web Runtime. But let’s start from the beginning — when Zach was first introduced to Coveo.
When Zach met Coveo
Zach Hawtof: Coveo has been using Aura and the Lightning Platform for over six years to deliver powerful and personalized solutions for their customers. When Lightning Web Components (LWC) were first introduced, you can bet Etienne was first in line, eager to adopt the performant, standards-based component framework. Immediately, Etienne and his team were able to embrace not only productivity gains, but Coveo’s product was able to see performance gains to enable even better consumer-facing experiences.
But some customers asked even more out of Etienne! They wanted the performance of rocket ships not racecars, they needed to be able to take Coveo’s LWC components and embed them into their own, and they requested all Aura be removed from the page so their React and Angular engineers could ramp up quicker than ever. How was Etienne going to achieve this?
Well, it just so happened it was perfect timing. Here at Salesforce, we’ve been working on a new standards-based runtime framework to enable 100% LWC experiences that are versatile, performant, and allow for new functionality not previously available. Welcome Lightning Web Runtime (LWR). We listened to what Coveo needed and we delivered.
Now, let’s go meet Etienne Rocheleau, Coveo’s Lead Salesforce Architect, and learn more about how he was able to solve his customer’s problems with the power of LWR.
So Etienne, what was your first experience with LWC as a web developer?
Etienne Rocheleau: I was really impressed with how simple it was to transition my knowledge from other frameworks to LWC. The framework is very easy to understand and developers with experience in React, for example, will find their bearings quickly, recognizing that LWC are components with almost no overhead and with a common lifecycle:
- Component’s constructor is called
- Component is inserted in the DOM
- Component’s connectedCallback is called
- Component’s renderedCallback is called
This simplicity and transferable knowledge helped us onboard new members to the team who were able to start developing immediately with LWC.
The tooling built around LWC is also very impressive, something we didn’t have with Aura:
- My favorite thing is the LWC Local Development Server. This feature saves loads of time by letting us see the updated component every time there is a code change! We’ve adapted our development practices around it.
- We use Jest to write unit tests for our components. It was almost impossible with Aura components to write unit tests for our components.
- The Salesforce CLI (sfdx) is super powerful and it enables us to iterate a lot faster than before when developing, releasing, and testing our code. That includes working with scratch orgs, which is extremely appreciated in the team.
- The suite of VSCode extensions, especially the features around auto-completion of LWC code, has helped us better embrace CSS classes from the Lightning Design System.
With all of these new Lightning Web Components, what was the experience of using them on the new Experience Cloud Lightning Web Runtime?
Etienne: The pages loaded so fast our initial reaction was to think we’d made a mistake! But our LWC were working as designed. We’ve witnessed enormous performance gains in our components with the introduction of LWR, where Aura has been completely removed from the equation. With Aura we spent a lot of time optimizing how we would load resources, bundle server-side calls, and, using the tools provided by Salesforce, analyze page performance. So the performance of LWR was a huge time saver being already so fast.
The site above was built with drag and drop components in the Experience Builder, the search results component is a built-in Coveo component, and I edited the header code to include our search box component. It took me less than 2 hours total to build this. It was made with a fork of this LWR Experience Site demo and I added the search page. From the first page load to the Last Contentful Paint this site renders in less than a second!
Having more control over the whole Experience Site and its navigation opens up a lot of possibilities for us to create components to satisfy every customization our customers want. Our search UI team has developed a new framework which decouples the state management from the UI integration. Creating a LWC integration of that new framework has been a breeze and allowed us to give a lot of freedom to our customers using our components.
All this lets us improve on our offer to our customers. We can now offer a super flexible experience in terms of design thanks to LWC, and a blazing fast browsing and searching experience for their customers thanks to LWR.
I know your team also creates components embedded directly in your customer’s components, so let’s chat about everyone’s favorite topic, cross-namespace communication. Tell us more about your experience there.
Etienne: The composition of LWC across namespaces is a huge win for our customers! Our customers have always wanted to fully customize our components to build tailored experiences in their Experience Sites. We can now offer them exactly that! We’re currently developing all the building blocks to create these relevant digital experiences in LWC.
Currently our components are published as open-sourced building blocks. Once we have built everything, we will also publish them in a drag-and-droppable format just like with Aura components. So our customers will be able to choose between a no-code option, or a 100% customizable experience thanks to cross-namespace LWC composition with code if it is their preference. Allowing our customers to wrap our LWC and control them almost entirely is our solution for anyone who prefers code to no-code to have more control!
You’ve been an LWC developer almost since the beginning. For someone just getting started, what’s one killer lesson you’ve learned along the way?
Etienne: Here are two common challenges when designing an application and how are we solving them:
- Centralized State Management
- Synchronization between decoupled components in a page
I believe those are problems that many developers have faced when creating a web application. Especially when components have to be aware of each other on the page but do not belong to a common parent component. We’ve faced that challenge within our new framework and we can share our solution.
First, we used a Redux state store under the covers to solve that centralized state management problem. Each component on the page registers a method that is called when their reduced state changes. Here is an example in a gist of a simple component that uses this, our Pager Component.
These variables in the updateState() are tracked by LWC to re-render the component when the state gets modified, like when a new query gets executed.
Second, in order to make components aware that others are on the page, we decided to rely on an initialization loop that uses a debounce function. That way, once the last component is loaded we can proceed with the first query.
With these two things, we can ensure a centralized state and that decoupled components are able to communicate. This is the tip I wanted to share and hope it may help others along their journey!
Thank you again for meeting with us today Etienne. It’s awesome to see the exciting roadmap your team has with intelligent search alongside the Salesforce Platform.
About the Authors
Etienne Rocheleau is a Software Engineer at Coveo’s Service Integration team in Quebec, Canada. He builds product demos that showcase the best of Coveo’s features as well as contributing to the product itself. He has been working with Salesforce technologies for 6 years, starting with Visualforce and the first iteration of Aura components and now LWC. He is passionate about the visual design as well as offering the best possible user experience in his projects. Check his GitHub projects @erocheleau as well as the new Quantic project. Or find him on LinkedIn.
Zach Hawtof is a frontend engineer turned product manager to save enterprise from painstakingly slow websites. For 5 years, Zach has been at Salesforce Experience Cloud wholeheartedly developing content management systems and digital experience platforms. When he is not dreaming about pixel-perfect B2B2C solutions, he eats adventurous dishes, scrolls through Netflix comedy specials, and convinces his car-owning friends to take him snowboarding. You can find him on LinkedIn.
