Introduction

The Lightning Web Components (LWC) framework has quite a bit of usage when it comes to Salesforce and making single page apps. But it's not widely used in static websites which do have some benefits over SPAs, notably speed and simplicity. Let's explore how LWCs can transform static websites and the benefits they bring.

Benefits of Using LWCs in Static Websites

Familiar framework

The primary advantage of using LWCs is if you are a Salesforce developer, you are already familiar with it.The benefit here of course is reduced/no learning curve allowing you to speed up the development process. There is of course the benefit that LWC and Web Components have as a whole, reusable components.

• The reduced learning curve allows for quicker development as there is less to learn.
• Reusable components is the primary benefit of LWCs and Web Components as a whole. You can develop as you normally do and can re-use your components as you please.
• Salesforce provides a large repository of examples and recipes and a lot of Components Blueprints to inspire you to create your own component if you use the LWC stylesheets.

Automated UI Testing

While jest has some great benefits, it allows for testing the handling of events, errors and other operations within your component. An understated benefit would be UI Testing without any mocking other than the various endpoints that might be utilized, each component rendered on the top level. This is especially true for cases where a component uses a third party library for rendering to ensure everything rendered as expected and it behaves as expected. This is especially beneficial during dependency updates.

If you don't know about UI testing, it renders a HTML document on a headless browser and makes assertions that it has properly rendered as expected. Some frameworks allow a replay actions and be displayed throughout the test, so should a test begin to fail for whatever reason, be it a change or a dependency upgrade, we can visibly see why it has not behaved as expected. For example Playwright supports multiple browsers and can be run in headed mode to see the test running in real time.

Implementation

The implementation of LWCs in static websites is quite straight forward, here here is a fairly simple example of it being setup with nothing but it and a HTML document. All that needs to be done is to define the top level component as a Web Component and define the file where the LWC components are imported and defined as the input in rollup.js.config. It can be used in conjunction with templating engines as well in the same way. All that is really needed is rollup and lwc rollup-plugin. After that, it's a simple case of importing the the javascript, keep in mind its important to preload it as it needs to be loaded before the components are used.