Introduction to Lightning web Component

Why the Lightning Web component?

Modern browsers are based on web standards, and evolving standards are constantly improving what browsers can present to a user. We want you to be able to take advantage of these innovations.

Lightning Web Components uses core Web Components standards and provides only what’s necessary to perform well in browsers supported by Salesforce. Because it’s built on code that runs natively in browsers, Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.

You’ll find it easier to:

1. Find solutions in common places on the web.
2. Find developers with the necessary skills and experience.
3. Use other developers’ experiences (even on other platforms).
4. Develop your component fast as compare to Aura Component
5. Utilize full-encapsulation so components are more versatile.

And it’s not like web components are new. In fact, browsers have been creating these for years. Examples include <select>, <video>, <input>, and any tag that serves as more than a container. These elements are actually the equivalent of web components. Our goal is to bring that level of integration to Salesforce development.

Benefits of Lightning Web Component

The beauty of adhering to web standards is simplicity. You don’t need to ramp up on quirks of a particular framework. You simply create components using HTML, JavaScript, and CSS. Lightning web component creation is one, two, three steps. I’m not kidding. It’s really that simple. You create (1) a JavaScript file, (2) an HTML file, and optionally (3) a CSS file.

• HTML provides the structure for your component.
• JavaScript defines the core business logic and event handling.
• CSS provides the look, feel, and animation for your component.

Those are the essential pieces of your component.

Here’s a very simple Lightning web component that displays “Hello World” in an input field.

HTML

<template>

    <input value={message}></input>

</template>

The template tag is a fundamental building block of a component’s HTML. It allows you to store pieces of HTML.

JavaScript

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

  message = 'Hello World';

}

We get into the import statement and class declaration details later, too.

CSS

input {

   color: blue;

}

At a minimum, all you really need is an HTML file and a JavaScript file with the same name in the same folder (also with a matching name). You deploy those to an org with some metadata and you’re good to go. Salesforce compiles your files and takes care of the boilerplate component construction for you automatically.

Other Benefits -

1. We can use Dev Hub and Scratch Orgs Scratch orgs are disposable Salesforce orgs to support development and testing. Dev Hub is a feature that manages your scratch orgs. Both are part of the Salesforce DX toolset. Salesforce DX is an integrated set of development tools built and supported by Salesforce.

Lightning Web Programming Model

Lightning Web Components is the Salesforce implementation of that new breed of lightweight frameworks built on web standards. It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond.

Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including:

1. The Base Lightning Components, a set of over 70 UI components all built as custom elements.
2. The Lightning Data Service which provides declarative access to Salesforce data and metadata, data caching, and data synchronization.
3. The User Interface API, the underlying service that makes Base Lightning Components and the Lightning Data Service metadata aware, leading to substantial productivity gains.

Comparison between Lightning Web Component and Aura Component

Lightning Developers have combined the Web Components programming with the Salesforce metadata and services. It allowed them to leverage unprecedented productivity.

Here are some benefits of using Lightning Web Components over the Aura Components, though they can co-exist to offer a better programming practice –

• Performance Hike – Since LWC is built on the top of the Web Component model and no added abstraction is used, the performance of the pages and apps are increased hugely.
• Learning is easy – Lightning Web Component developers need to learn only one skill, that it the Lightning Web Component framer only. They do not need to learn any other framework or Java Script separately like they had to do in the Aura programming model.
• Decreased Proprietary and Increased Standards – As we previously mentioned, the LWC framework uses more standards than the proprietary components. So, there is more customization with LWC than that of Aura Components.
• Use of Reusable Service Components – LWC Components are customizable, reusable, and scalable that may or may not have UI. These service Components can be used anywhere in the application. It helps the code to be optimized and clean.
• Enhanced Security and Browser Compatibility – LWC has built-in security features. Also, it has limited event scope and more CSS, Script, and DOM isolation that offers better security and browser compatibility of the apps.

Coexistence and interoperability

With the addition of Lightning Web Components, there are now two ways to build Lightning components:

• Aura Components, leveraging its own component model, templates, and modular development programming model.
• Lightning Web Components, built on top of the web standards breakthroughs of the last five years: web components, custom elements, Shadow DOM, etc.

Aura components and Lightning web components can coexist and interoperate, and they share the same high level services:

• Aura components and Lightning web components can coexist on the same page
• Aura components can include Lightning web components
• Aura components and Lightning web components share the same base Lightning components. Base Lightning components were already implemented as Lightning web components.
• Aura components and Lightning web components share the same underlying services (Lightning Data Service, User Interface API, etc.).

If you are already developing Lightning components with the Aura programming model, you can continue to do so. Your Aura components will continue to work as before. You can build new components with Aura or Lightning Web Components. Your Aura and Lightning Web Components can coexist and interoperate. Over time, you can consider migrating your Aura Components to Lightning Web Components, starting with the components that would benefit the most from the performance benefits of Lightning Web Components.

If you are new to developing Lightning or if you are starting a new project, we recommend using the Lightning Web Components programming model.

Thanks.