Monday 13 February 2023

LWC key Features #Salesforce



Lightning Web Components (LWC) is a new programming model for building web components on the Salesforce platform. It’s a modern, lightweight, and fast alternative to Aura components and offers a number of new features and benefits to developers.

Here are some key features of LWC:

Modern Web Standards: LWC is built on modern web standards like ES6, HTML, and CSS. This makes it easy for developers who are already familiar with these technologies to get started quickly with LWC.


Reusable Components: Components can be easily reused across multiple pages and applications in Salesforce. This helps reduce duplication of code and saves time for developers.


Lightning-Fast Performance: LWC uses a shadow DOM to encapsulate component logic and styles, which helps ensure lightning-fast performance.


Easy Integration with Apex: LWC components can easily integrate with Apex code to access server-side functionality. This enables developers to create complex applications that can scale to meet business needs.


Strong Security: LWC components are secure by design, which helps prevent XSS attacks and other types of security vulnerabilities.

Let's look at a simple example of how to create an LWC component in Salesforce.

Here’s a component that displays a greeting:

php
<template> <p>Hello, {greeting}!</p> </template> <script> export default class Greeting extends LightningElement { @track greeting = 'World'; } </script>


In this example, we’re using the <template> tag to define the HTML template for our component. The <p> tag displays the greeting, which is stored in a property called greeting.

The <script> tag contains the JavaScript logic for our component. We’re using the export default statement to make our component available to other parts of our application. The LightningElement class provides the core functionality for our component, and the @track decorator is used to indicate that the greeting property should be reactive, meaning that any changes to its value will automatically be reflected in the HTML template.

And that’s it! With just a few lines of code, we’ve created a fully functional LWC component that can be used in a Salesforce application.

In conclusion, LWC is a powerful and modern way to build web components for the Salesforce platform. With its modern web standards, reusable components, lightning-fast performance, easy integration with Apex, and strong security, it’s a great choice for any Salesforce developer.


Saturday 14 January 2023

Life Cycle Hooks in LWC #salesforce

Lifecycle Hooks A lifecycle hook is a callback method triggered at a specific phase of a component instance’s lifecycle.


There are five types of callback functions :
  1. Constructor()
  2. connectedCallback()
  3. disconnectedCallback()
  4. render()
  5. renderCallback()

constructor()
  1. Called when the component is created.
  2. This hook flows from parent to child, which means that it fires in the parent first. 
  3. You can’t access child elements because they don’t exist yet. Properties aren’t passed yet, either. Properties are assigned to the component after construction and before the connectedCallback() hook.

connectedCallback()

  1. Called when the element is inserted into a dom.
  2. This hook flows from parent to child.
  3. You can’t access child elements because they don’t exist yet.

The connectedCallback() hook can fire more than one time. For example, if you remove an element and then insert it into another position, such as when you reorder a list, the hook fires several times. If you want code to run one time, write code to prevent it from running twice.


The connectedCallback() hook is invoked with the initial properties passed to the component.


renderCallback()

  1. Called after every render of the component.
  2. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.
  3. This hook flows from child to parent.

render()
  1. Call this method to update the UI.
  2. It may be called before or after connectedCallback().
  3. It’s rare to call render() in a component. The main use case is to conditionally render a template. 


disconnectedCallback()
  1. Called when the element is removed from a document.
  2. This hook flows from parent to child.
  3. Use disconnectedCallback() to clean up work done in the connectedCallback(), like purging caches or removing event listeners.

errorCallback()

  1. Called when a descendant component throws an error.
  2. The error argument is a JavaScript native error object, and the stack argument is a string.
  3. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification.


Thank you!