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.
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!
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.
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.
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.
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).
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 is a key characteristic of LWC. It is constantly, and deeply, tuned to provide the best client side performance.
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!
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.
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.