In the previous post, I talked about Web Components in general. But Salesforce released at TrailheadDX 2019 a new open source technology called Lightning Web Components, aka LWC. Basically, LWC is a set of tools, including a compiler, a runtime engine, some build utilities that you can use to create both reusable components and applications.

Why a tool for creating Web Components?

Actually, Web Components are defined through a set of new browser specifications, so they don't require any framework. There are many examples showing how to create such reusable components just using the bare APIs!

If this is correct, you'll quickly find out that these APIs are very low level. As a result, creating an even moderately complex component requires a bunch of boilerplate code: you need to maintain the synchronization between HTML attributes and JavaScript properties, you need to keep the DOM up-to-date on data changes, ... and many other boring stuff!

That's the reason why several technologies appeared in the past years: they provide you an easier experience with Web Components. They are kind of lightweight frameworks on top of the Web Components APIs. They are often called "invisible" frameworks as, once the components are created, the technology used to create the components is not apparent. As a consumer of the components, you don't really care what has been used behind the scene to create them.

What does LWC bring on the table?

Enterprise ready

LWC is an enterprise ready technology, designed to support Salesforce business in the long term. When I think about it, I can find a lot of similarities between Salesforce and Lotus/IBM: my latest Notes client can still execute applications from the '90, and so Salesforce can execute apps built with older releases (or seamlessly convert them). Such a backward compatibility is critical for businesses! It is even more emphasized with cloud architectures, as the customers are upgraded automatically without the choice to stay on an older release. From an LWC standpoint, it means that every feature added to the tool will have to be supported "forever" and thus is carefully evaluated with a risk assessment. Any new feature has to go through an RFC, see: lwc-rfcs.

ES6+/Typescript

We are in 2020 now, I can't see myself back using ES5 and JQuery. I believe you're on the same boat! LWC eases the use of ES6+, making your code future proof even when staging features like decorators are involved. It is using Babel behind the scene, for which Salesforce Engineering is a proud sponsor.

*Browser support *

If the latest "evergreen" browsers natively support the Web Components specification, older browsers should use polyfills and/or the compiler should generate specific code for these browsers. LWC does a bit of both, including some tailored polyfills to achieve performance goals. @lwc/synthetic-shadow is a good example of such a polyfill.

Templating

LWC provides a template engine that renders markup from an HTML template. Somehow, it is similar to lit-html, except that it is compiled to Javascript at build time, for a faster execution. In that respect, it is similar to the JSX compiler.

Reactivity

If the template syntax supports one-way data binding, the component reactivity comes from observable-membrane, which is another Salesforce open source project. In a nutshell, it allows objects to be observed for changes. Typically, Components are redrawn when at least one of their properties is changed (can be the root property, or another object referenced by that property).

Data Binding

Associated with the above membrane is the notion of wire adapters. Basically, a wire adapter streams data to a component and makes it re-render when needed. It can be used similarly to React hooks. More information here: wire adapters, superseded by the wire-reform.

Performance

Performance is a key characteristic of LWC. It is constantly, and deeply, tuned to provide the best client side performance.

Static analysis

For advanced users, the LWC compiler can be used to extract meta-data from the components. For example, a plugin could extract the data sources being accessed and generate some initialization code.

And several others, like matching attribute and properties, ...: a set of goodies that makes your life easier as a developer!

The flavors of LWC

Well, if there is one LWC technology, there are two deployments:

• Salesforce platform The Salesforce platform handles many things for free, like the LWC compilation, so you don't have to manage rollup/webpack builds, nor you have to maintain package.json. On the other hand, it runs within the constraints of the Salesforce platform, including Locker and other differences.
• Open source, aka LWC OSS (Github) LWC can be used similarly to any other Javascript technology. To get started, you can use the nice lwc-create-app tools from Rene Winkelmeyer (@muenzpraeger), that some of you know from our prior IBM life. This is LWC unleashed! The differences are detailed here, thanks again to Rene.

And what next?

Now that I introduced the LWC technology (I hope it got you hooked!), it is time to get our hands dirty. I'm not going to provide any tutorial or getting started document because they already exist. I'll rather focus on some specific aspect of Web Components and LWC.

By the meantime, you can get started here: Introducing Lightning Web Components or here: lwc.dev.