Lightning Web Components: An ISV Partner Digest

In case you missed it, Salesforce recently announced Lightning Web Components (LWCs) — a new programming model that developers can use in addition to the existing Aura-Based programming model to build Lightning components.

But what do Lightning Web components really mean to Salesforce ISV Partners in terms of benefits to their existing or future UI investments? Here are a few highlights and considerations.

Performance

• Lightning Web Components are extremely fast as they use core Web standards which provide only what’s necessary to perform well in browsers supported by Salesforce.
• Lightning Web Components are built on code that runs natively in browsers, they are lightweight and deliver exceptional performance.
• If you are an ISV Partner that is just starting to build Lightning Components for your app, or if you have already built Aura-based Lightning Components and you feel that some of these components could benefit from a faster performance (render/run-time) you should consider Lightning Web Components to build these custom UIs.

Custom UI Strategy

You may be asking: “Alright, I have started building Aura-Based Lightning Components. Does it mean I have to throw all that investment away and rewrite my Components with LWCs”?

Absolutely not! LWCs and Aura-based Lightning components can co-exist and communicate with each other inside your Lightning Applications. Furthermore, Aura-Based Components will continue to be supported and are not planned to be deprecated anytime soon.

Here is a Decision Matrix with our suggestions on when you should use each programming model for your Lightning Components development:

Aura and LWC Common Services

Aura-Based Components and LWCs use the same layer of high-level services such as Security, Data Services, and most of the same Lightning Base Components under the hood with a few differences that are important to note here:

• Locker Service (powerful security architecture for Lightning components) is enabled by default for all custom Lightning Web components and cannot be disabled. Make sure to test your Lightning Components with the new Locker Console tool to make sure they are compliant with Locker Service before distributing or submitting your apps to Security Review.
• Lightning Data Service. This is one of my personal favorite features of Lightning Web Components as with LWCs we introduce the concept of @Wire Adapters (LWC ships with UI API support in the lightning/ui*Api modules) that allows developers to fetch records from the Salesforce org with CRUD and FLS checks without having to write a single line of Apex. The biggest difference with Lightning Data Service on LWC when comparing with Lightning Aura components is that the new @Wire Adapters allows developers to fetch full collections of records instead of single records like it is currently possible with Aura.
• Lightning Base Components. With Spring ’19, not all Lightning Base Components that are available to be used on Aura-Based Components are available to LWCs. Make sure to check the full list of current Base Components that are available to LWCs on the Lightning Web Components section of the Component Library App to make sure that all the Base Components that you plan to use are currently available.

Styling

• All Salesforce Lightning Design System (SLDS) CSS classes are automatically available by default within the framework so you can simply reference them on your html elements (Lightning Experience and Salesforce Mobile Containers).
• Because of LWCs Shadow DOM Encapsulation, Custom Styles do not cascade down/are applied to child Components so you should add a Custom CSS file to your child Components if you need to add custom styles to them as well (see more details here).
• Developers may use the LWC platformResourceLoader module to import a CSS library from a static resource (more details here).

UI Containers

For the Spring ’19 Release, Lightning Web Components will be available to be surfaced on the Lightning Experience, Salesforce Mobile, Lightning-Based Communities and other UI containers. Please see a list of all UI containers currently supported on the Component Library App on your Spring ’19 orgs.

The ability to surface LWCs on Visualforce Pages, Flows, Console Apps and on external applications using Lightning Out (Eg. Heroku Apps) is planned for future releases so if you need to surface LWCs on these containers today you should wrap them inside Aura Components.

Tooling

To Create LWCs:

• Salesforce suggests developers to use VSCode with the amazing high-productive SalesforceDX to create Lightning Web Components but developers may also use other metadata/tooling API based models to create LWCs as well if needed. All ISV Partners already have the SalesforceDX Devhub enabled on their Partner Business Orgs so your team should be all set to start using it.
• If you haven’t switched SalesforceDX yet, take this opportunity to experience this amazing new Development Experience that takes your team Productivity, testing and automation needs to a whole new level.
• Even if you are still not ready to switch your entire team and Apps metadata to SalesforceDX model you can still create Lightning Web components today by using the SalesforceDX Devhubs enabled on free Developer Edition orgs to create your Lightning Web components on Scratch orgs and deploy them to your packaging and test orgs using the Salesforce CLI.
• To Debug LWCs, use standard web tools such as Chrome DevTools. The Lightning Inspector Chrome Dev Tool does not support LWCs with Spring’19 but LWC support is planned for future releases (Safe Harbor).
• Component Reference: Use it to look at all the Lightning Base Components (building blocks) available for LWCs, check LWC and Aura SDK Documentation, LWC Developer Guide, Locker Console, Locker API Viewer, Playground and more (more details here).
• Playground: Use it to prototype LWCs. The new Cloud-Based Playground App interactive code editor lets developers save Playground apps with LWCs and share them with other developers (more details here).

Packaging

Lightning Web Components Packaging support is available with the Spring ’19 release. As an ISV Partner, you can create LWCs and add them to your Packages (Packaging 1.0 and Packaging 2.0) by adding the LightningComponentBundle Metadata Type to your manage Packages. LWCs can also be added to Unlocked Packages.

IMPORTANT: Please note that you may only submit Managed Packages with LWCs for Security Review after March 1st, 2019 so please plan accordingly.

Skillset

Because most of the code needed to create Lightning Web components is standard JavaScript and HTML, the developer skillset needed for your technical team is less framework-specific and resources are generally easier to find when comparing to the skillset usually required to support applications built with Javascript Frameworks such as Aura, React or Angular.

FAQs

Can I use 3rd Party JS Libraries (Eg. ChartJS, D3, Angular, React) inside LWCs?
Our recommendation is to try to avoid using 3rd Party JS frameworks as much as possible and to try to build components with the LWC SDK as you will get the best performance, support and we cannot guarantee that external libraries will be compliant with Locker Service. However, if there are UIs that you can’t easily build with LWCs (example: Animations) you may upload 3rd party JS libraries as Static Resources and import them into your LWC JS code. You should test if your external libraries are compliant with Locker Service using the Locker Console tool and implement manual Rendering to initialize those libraries inside your LWCs.


How can I share Javascript Code among different LWCs?
You can create Service LWCs (that don’t render any UI) with common helper functions and import them on other LWCs inside your package (within the same namespace scope) to share common helper functions.

When can I submit packages with Lightning Web components for Security Review?
After March 1st, 2019.

Do we have to be using SalesforceDX to use/create Lightning web components?
No, SalesforceDX is recommended but LWC supports tooling/metadata APIs and is available in non-scratch orgs as well.

Lightning web components are in the early stages of their release. Would you advise a large org to begin using them now in their current state? Do you know if they are subject to change in the coming releases?
Before GA’ing, Salesforce piloted LWC for a year. Over 100 ISVs, SIs, and Customers took part in the pilot spanning over 500 developers. For the containers supported we absolutely recommend using LWC today. We will continue to make innovations but not breaking changes.

What happens with my existing Aura-based Components? Will they continue to be supported in the Lightning Experience in the near future (1–5 years)?
LWC is the latest programming model for Lightning Components based on web standards which Salesforce is driving by being part of the TC39 and W3C committees. Because of this, the focus will be on innovating LWC. We will support Aura for the long term, your existing investments in Aura will not only be supported but are also interoperable with LWC.

How can I write documentation for my custom LWCs?
Custom Documentation for LWCs is still not available on Spring’19. You may write your custom Documentation for your LWCs off platform for now (eg. using JSDoc) as we plan to provide instructions on how to publish LWC Documentation on future releases.

How can I write unit tests for my LWCs?
Developers can write local unit tests for LWCs using Jest.

Getting Started Resources

Introducing Lightning Web Components

Lightning Web Components Developers Guide

Get Started with Lightning Web Components — Trailmix

Build Lightning Web Components — Trailhead Trail

Trailhead Module — Quick Start: Lightning Web Components (Please note: your ISV Dev team should use the SalesforceDX DevHub enabled on your Partner Business Orgs after Spring’19 is live).

Sample Gallery — Recipes and E-Bikes apps (Collection of sample code to perform different tasks/use-cases using LWCs).