What is Salesforce Lightning Web Components?

Today we will learn about Salesforce Lightning Web Components. In the previous article I had talk about How to become a Salesforce Developer.The Lightning Component framework is a UI framework for developing web apps for mobile and desktop devices. It’s a modern framework for building single-page applications with dynamic, responsive user interfaces for Lightning Platform apps. It uses JavaScript on the client side and Apex on the server side. 

Introducing Lightning Web Components

Now you can build Lightning components using two programming models: Lightning Web Components, and the original model, Aura Components. 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. Salesforce Lightning Web Components.

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.

Salesforce is committed to developing open web standards and is a member of the World Wide Web Consortium (W3C). Salesforce Lightning Web Components.

Base Lightning components are available as Aura components and as Lightning web components. The Component Reference includes documentation, specifications, and examples for both. See Base Components: Aura Vs Lightning Web Components for differences between them.

Create Lightning Web Components

A Lightning web component is a reusable custom HTML element with its own API.

Define a Component

A Lightning web component that renders UI must include an HTML file, a JavaScript file, and a metadata configuration file. The files must use the same name so the framework can autowire them. A service component (library) must include a JavaScript file and a metadata configuration file.

HTML Templates

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it.

CSS

To style components, use Lightning Design System or CSS.

Reactivity

Reactivity is a system at the core of the Lightning Web Components framework. The framework observes changes to the values of fields and properties. When it observes a change, it reacts. It reevaluates all the expressions used in the template and rerenders the component, which displays the new values.

Composition

You can add components within the body of another component. Composition enables you to build complex components from simpler building-block components.

Fields, Properties, and Attributes

Declare fields in your component’s JavaScript class. Reference them in your component’s template to dynamically update content.

JavaScript

Every component must have a JavaScript file. JavaScript files in Lightning web components are ES6 modules.

Access Static Resources, Labels, Internationalization Properties, User IDs, and Form Factors

Lightning components can access global Salesforce values, such as labels, resources, and users.

Component Accessibility

Accessible software and assistive technologies enable users with disabilities to use the products you build. Develop your components so that all users can perceive, understand, navigate, and interact with them.

Component Lifecycle

Lightning web components have a lifecycle managed by the framework. The framework creates components, inserts them into the DOM, renders them, and removes them from the DOM. It also monitors components for property changes. Generally, components don’t need to call these lifecycle hooks, but it is possible.

I hope you like this blog, Salesforce Lightning Web Components. To learn more visit HawksCode and Easyshiksha.

Share Post

Related reading

Tips for Better PHP Web and Application Development

Tips for Better PHP Web and Application Development A few...

SaaS: What is it? Why it is so important?

SaaS: What is it? Why it is so important? SaaS...

SaaS, PaaS, IaaS: Definition, Difference, Compare Cloud Service

SaaS, PaaS, IaaS: Definition, Difference, Compare Cloud Service We all...

Master Hadoop Ecosystem and Their Components

Master Hadoop Ecosystem and Their Components Hello everyone! In this...