With the announcement of Lightning Web Components (LWCs) in mid-December of 2018, there has been a flurry of conversation around what this means for the future of Salesforce development and understanding the use cases for building with the Lightning Web Components model versus the Aura Components model.

We’re going to take a look at the background behind web components, explore how LWCs will implement better standards, and finally offer a high-level comparison between LWCs and Aura Components.

Web Components

In 2014, Salesforce launched the Lightning Component framework and the Aura programming model to provide “large scale client-side application development on the web.” While this was a significant step forward, there were still some core challenges in development. Many companies adopted this framework approach — React, Angular, Lightning Component, Vue, Ember, Aura, etc. While each of these frameworks provided new levels of interaction and solved many issues, the frameworks were disparate — so much so they nearly felt like different languages. This made it difficult to transfer skills between frameworks and required longer ramp times for developers. Additionally, apps and components written with different frameworks were not interoperable.

All these factors led to a need of standardization — much of which was spearheaded by the W3C/WHATWG and the ECMAScript Technical Committee (TC39). One of these standards were Web Components. At their core, Web Components provide four key benefits:

  • Reusability — Imports, Exports, and Templates allow developers to reuse components
  • Composition — Breaking components down to smaller chunks of code
  • Encapsulation — Usage of shadow DOM
  • Standardization — Part of W3C specs and supported by the majority of browsers

With this standardization, the dynamics between frameworks are changing. Frameworks now only need to provide a layer of specialized services rather than filling in gaps. Standardization creates a common component and programming models as well as more overlap with the skills learned on one framework, which results in a smoother ramp up for developers.

Lighting Web Components

The Lightning Web Components framework brings much of the power and benefits of Web Components while being built on modern web standards. At their core, Lighting Web Components are comprised of 3 key pieces:

  • Base Lighting Components — a set of 70+ UI components built as custom elements
  • The Lightning Data Service — provides declarative access to Salesforce data and metadata, data caching, and data synchronization
  • The User Interface API — the underlying service that makes Base Lighting Components and the Lightning Data Service metadata-aware

As we take a more in-depth look at Lightning Web Components, we see that there are some differences between standard web components.

  • LWCs have polyfills to support IE 11
  • No need to use the attachShadow() or appendChild() methods. They also support browsers that do not implement shadow DOMs
  • LWCs are protected by Lightning Locker (formerly known as Locker Service) for additional security
  • Support both App Builder and Community Builder
  • Have a special renderedCallback() method to perform logic after the component has rendered
  • There are also special linting rules particular to LWCs. Refer to the repo here for more details

Aura Components and Lightning Components

The new Lightning Web Components framework brought about new naming conventions as well. Lighting Components that use the Aura framework are now called Aura Components. One area of concern for developers was the impact LWCs would have on applications currently in development. Fortunately, Aura components and LWCs can coexist and interoperate (LWCs can exist within aura components, but the other way round is not possible).

Let’s take a look at the actual differences in syntax between Lighting Web Components and Aura Components.

Building Blocks Lighting Web Components Aura Components
Attributes and properties @api myproperty @track properties <aura:attribute name=”myproperty”>
Expression Syntax {myattribute} {!v.myattribute}
Event Handling Event handling using native DOM events Javascript – 

Const customEvt = new CustomEvent();

Markup tags like
<aura:handler> and <aura:register> required
CSS Syntax .myclass() .THIS.myclass {}
Facets slot aura:facet
Base Components Syntax lightning-layout-item lightning :layoutitem

As you can tell, the syntax for LWCs is more straightforward and looks much closer to javascript.

As with any newly released Salesforce feature, proceed with caution for the first release. It is important to note that packages with Lighting Web Components cannot be submitted for Security Review until after March 1st.

Let CodeScience be you Salesforce experts. Learn how to get started at www.codescience.com/services.