Lightning Web Components striking it!

Salesforce has taken Lightning Web Components one step forward. Finally, developers were given the power to use the standard functionality and API of standard web components inside Salesforce. This has opened up new possibilities when it comes to application design and building, that are much more aligned with today’s best practices and frameworks, such as AngularJS, React, Vue.js, etc. Excited? Just keep reading!

What are Web Components?

Let’s take a look at one very good definition of a web component, shall we?

“Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML”  

Source: Webcomponents.org

Confused? Let us simplify this definition for you. We can extend the model of HTML to define, encapsulate, use and reuse our own tags, aligned with the necessities and requirements of the application and their restrictions in terms of look and feel, and usability.

What do Web Components mean to Salesforce?

By applying Web Components to Salesforce, we can design lightning web applications the same way we do with React or AngularJs Applications! So, we can only expect huge improvements in terms of quality and speed of our Salesforce Web Applications implementation.

To have a clearer idea on this, let’s compare the following models of Web Stack in 2014 and 2019:

As we can see, the web stack looks very different today from what it did in 2014. Today’s web standards include many functionalities that in 2014 were frameworks. So, these days, many of what used to be frameworks five years ago, are now out-of-the-box web standards. Now, developers have more free time to actually develop business applications for clients. And, these applications have much better chances to be on schedule and aligned with the expectations of the stakeholders. Finally, the developer also benefits from the fact that web standards are better aligned to support functionalities the best way possible, mitigating conflicts between them and its application.

What is a Lightning Web Component?

To truly understand what Lightning Web Components are, let’s have a look at the definition by Salesforce Developers!

Lightning web components are custom HTML elements built using HTML and modern JavaScript. Lightning web components and Aura components can coexist and interoperate on a page. To admins and end-users, they both appear as Lightning components.

Source: Salesforce Developer – Component Library

Putting it in simple terms, a Lightning Web Component is the term used to refer to the Salesforce implementation of the new framework built on web standards, as we have in 2019. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond (source: https://developer.salesforce.com/blogs/2019/05/introducing-lightning-web-components-open-source.html). The same way as the specification of the standard web components define.

The new model of the Lightning Web Component is specified as we can see in the following image:

Lightning Web Component programming model combines Web standards + metadata. And, it provides a layer of specialized Salesforce services on top of the core stack, such as Base Lightning Components,  Lightning Data Service (declarative access to Salesforce data and metadata, data caching, and data synchronization) and User Interface API (the underlying service that makes Base Lightning Components and the Lightning Data Service metadata-aware).

For example, the code below creates a Combobox that has two values and one button. The button knows how to find dynamically the Combobox and retrieve its value. Afterwards, the button changes dynamically the DOM of the page in order to show the value selected in the Combobox.

app.html

<template>
<divclass="slds-p-around_x-large">
<h1class="slds-text-heading_large">{state.title}</h1>
<divclass="slds-p-around_medium"></div>
<pclass="slds-text-heading_medium">My First LWC!!!</p>
<lightning-comboboxdata-id="combo1"options={options} value=""></lightning-combobox>
<lightning-buttononclick={handleClick} label='Click Me'icon-name="action:announcement">
</lightning-button>
<lightning-helptextcontent="This is a help message!">
</lightning-helptext>
<br/>
<p>The value is:<b><spanlwc:dom="manual"data-id="result"></span></b></p>
</div>
</template>

Editable Code: app.js

import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class App extends LightningElement {
@track
state = {
title: 'Welcome to Lightning Web Components - Example!',
};
get options() {
return [
{
label: 'Label1',
value: 'Label1',
},
{
label: 'Label2',
value: 'Label2',
},
];
}
handleClick() {
// Display the save status
let combo1 = this.template.querySelector('[data-id="combo1"]')
console.log(combo1.value)
let result = this.template.querySelector('[data-id="result"]')
result.innerHTML = combo1.value
console.log(result)
}
}

The Output:

This example has two main points that are important to highlight, which are:

• The possibility to access directly to the component by the javascript function querySelector which is a standard function of Web APIs.
• The possibility to access properties of HTML Element such as Value for the case of the Combobox and innerHTML for the case of span tag – use it, to show the value selected in the Combobox.

For the property innerHTML is necessary to use this property lwc:dom=”manual” – this directive lwc:dom="manual" allows the developer to add an empty native HTML element. Thus, the owner of the component can manually manipulate that element to insert dynamically DOM in the component, for instance.

As we can see, this example shows how we now have the capabilities to manipulate the DOM of the HTML component in Salesforce, as we do with other web standards frameworks.

When should we move from Lightning Aura to Lightning Web Components?

Start using Lightning Web Components (LWC) in projects that are not very critical and in which you have some free room to do it. Maybe, a good suggestion is for you to use them in internal pet projects, as we do at our company. In that way, your team will gain experience and security, becoming more comfortable to apply LWC in real projects.

At Stellaxius, we have fortunately been improving our productivity since we are using Lightning Web Components. As a matter of fact, we are even developing core LWC to be made available for our clients, in order to reduce the time to prototype and develop the applications that our clients need.

LWC brought a new world of possibilities to our company’s internal development and DevOps model.

Summary

With Lightning Web Components, we face a new programming model paradigm. One that is built natively for the 2019 web stack and, at the same time, works perfectly with our existing code in Salesforce. With this innovative model, we achieve a new level of capacity and power to develop the best applications for our clients!

We are very excited for the future of Lightning Web Components and Salesforce. Please, Stay Tuned in with us to know how we are exploring the best potential and capacities of LWC. Drop us a comment or ask us a question in case you are still left with doubts! We’re glad to answer you! 🙂