Lightning Web Component Building Blocks

Salesforce have a new technology. Lightning Components look like they’re on the way out, and are being replaced with a new technology ‘Lightning Web Components’. Let us see what is building block of this technology. As name suggests this is web component so most of thing taken from those stacks.

Import Statement

Import is a new addition to Javascript that natively allows us to define the relationships between javascript files within javascript, rather than at the HTML level.

This replaces the use of most ‘script’ tags in traditional Javascript development. For Lightning Web Components, this is used for static resources as well.

Importing modules from the Lightning Web Components framework:

 import { LightningElement, track } from 'lwc';

Importing from Static Resources:

 import { loadScript } from 'lightning/platformResourceLoader’;
 import chartjs from '@salesforce/resourceUrl/chart';

This has allowed Salesforce to split up the framework into smaller components. If you don’t want to access Apex from your web component, then you don’t need to import the part of the framework that enables that capability.
This will make individual components much more lightweight and targeted – only including the capabilities that are required, when they are required.

Binding data on Screen

Any javascript property is visible to the HTML template with binding element {}.
E.g.

 export default class WebAppComponentByMe extends LightningElement {
     contactList;

We can then render this property in the HTML with { contactList }. Much neater, cleaner and more concise.

Trackable Element
@track decorator is used to tack if property is being changed.
E.g.

 export default class WebAppComponentFirst extends LightningElement {
     @track contactList;

Calling Apex Efficiently
One of the big criticisms of Lightning Components was the amount of code you need to write in order to call an Apex method. In Web Components, this is very simple.

In order to connect to Apex, we import the ‘wire’ module, and then import functions into our javascript

 import { LightningElement, wire } from 'lwc';
 import getContactList from '@salesforce/apex/ContactController.getContactList';

The first line imports the wire capabilities from the framework, the second then imports the Apex method as a javascript method, therefore making it available to the component.

We can then connect a javascript property up to the method using the wire decorator:

 @wire(getContactList) contacts;

Or wire up a javascript method:

@wire(getContactList)
 wiredContacts({ error, data }) {
  if (data) {
   this.contacts = data;
  } else if (error) {
   this.error = error;
  }
 }

When the component is initialised, the getContactList method will be executed. If the method has parameters then it values will be passed like below.

 @wire(getContactList, { searchKey: '$searchKey' })
 contacts;

Changing the value of a property causes Apex to re-execute

Having wired up a property as a parameter to an Apex bound Javascript function, any changes to that property will cause the function to be re-executed
For example, if we:
searchKey = ”;

 @wire(findContacts, { searchKey: '$searchKey' })
 contacts;

Whenever the searchKey property changes, the Apex method imported as ‘findContacts’ will be executed and the contacts property is updated.

Summary
The change from Lightning Components to Lightning Web Components is vast. The only real similarities between the two frameworks looks like are:
• Curlies are used to bind things
• The Base Lightning Components are the same
• You need to know Javascript