Back to All Events

Custom Apps at Scale with LWCs in Experience Cloud - Melissa Hansen

As the Lightning Web Components framework matures, delivering fully featured standalone apps is within reach even for small teams and moderate budgets. This use-case demonstrates the power and flexibility of delivering those apps via Experience Cloud with a well designed domain layer in Apex.


The scenario:

A small technology team, working for a medium-sized nonprofit with a tight timetable to deliver a community organizing app for use initially by employees, with an eventual rollout to volunteers. The app should be intuitive for users and require minimal training. The app will be branded to the organization and will not be obviously a Salesforce app, but it will share a domain layer and business logic with users operating in the standard Salesforce UI.

Below I will walk you through the basic architecture and approach, highlighting techniques that worked well for this project.


The solution:

Designed from the bottom up, this application uses an Apex domain layer, managing business logic with object-oriented classes that expose data and functions that can be accessed by the LWC app, as well as the Standard Salesforce UI and integrating apps.

The app itself uses base Lightning Web Components whenever possible, extending those components as needed to add custom functionality. When the desired functionality can’t be achieved with base components, we build fully custom components, using the Salesforce Lightning Design System to maintain visual continuity.

Components read and write data chiefly via imperative calls to Apex using the Async/Await pattern. This pattern was used rather than the wire service for several reasons, the primary being that the domain layer deals with abstracted objects rather than SObjects. Objects are passed between Apex and Javascript controllers as JSON strings, allowing greater flexibility in the structure and methods available. For that same reason, along with the need for bulk handling, the Lightning Data Service was not used.

As developers with strong experience in Apex, and less experience with Javascript, the async/await pattern is straightforward and easier to understand than the standard callback syntax.

Finally, Experience Cloud serves as the container for the app, handling user management, logins etc. This is a pattern the nonprofit client has used with great success on earlier projects that exposed apps to a large audience such as public school teachers nationwide. The app in this project is not public-facing, but many of the staff accessing the app do not need full Salesforce user licenses and this allows us to keep them on Experience licenses. Additionally, a future phase will roll out access to a larger volunteer base who will also be non-Salesforce users.

The lessons:

By taking advantage of Lightning Web Components and the Salesforce Lightning Design System, you can build an intuitive, highly customized UI for audiences well beyond your core Salesforce licensed users. Building with a shared domain layer in Apex ensures that business logic and rules are consistent across your platform, whether the consumer is a custom app, Salesforce UI or even externally integrated tools and platforms. Experience Cloud provides an accessible and convenient delivery platform for LWC apps that need to be exposed outside of the standard Salesforce UI, made available as public-facing, or both.

Deliver fully featured standalone apps even for small teams and moderate budgets; a case study with LWC and Experience Cloud.