Tuesday 26 March 2019

Create Lightning Web Components - Basic - Key Points

You can learn creating a simple lightning web component from the below trailhead module,

I wanted to highlight the key points from the above modules,
  • You can use if:false and if:true conditional directives within your template to determine which visual elements are rendered. Similar to rendered in the visualforce page or aura:if in the aura components. 
  • Lightning web components use common JavaScript ECMAScript 8 methods and syntax.
  • The JavaScript file for a Lightning web component must include at least this code, where MyComponent is the name you assign your component class.

  1. import { LightningElement } from 'lwc';
  2. export default class MyComponent extends LightningElement {
  3. }

  • The export statement defines a class that extends the LightningElement class. As a best practice, the name of the class usually matches the file name of the JavaScript class, but it’s not a requirement.
  • Decorators are often used in JavaScript to extend the behavior of a class, property, getter, setter, or method.
    • @api: Marks a property as public for use in your template or other components.
    • @track: Marks a property for internal monitoring. A template or function using this property forces a component to rerender when the property’s value changes. Use this to store values locally, especially as a user interacts with your component.
    • @wire: Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org
  • But, be aware, apply only one Lightning Web Component decorator to a property at a time. For example, a property can’t have @api (public reactive) and @track (private reactive) decorators at the same time.
  • Respond to any of these lifecycle events using callback methods. For example, the connectedCallback() is invoked when a component is inserted into the DOM. The disconnectedCallback() is invoked when a component is removed from the DOM.

What is Lightning Web Component Playground?

Salesforce introduced a interactive code editor to test the Lightning Web Components. By using Playground you can Write JavaScript, HTML, and CSS code, and preview the output as you develop.

Playground documentation:
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.install_playground


Playground Code Editor URL:
https://developer.salesforce.com/docs/component-library/tools/playground

What is Lightning Web Component in Salesforce?

Lightning Web Components is a new programming model for building Lightning components. 

The Lightning Web Components programming model is focused on both the developer and user experience. Because we’ve opened the door to existing technologies, you use the skill you’ve developed outside of Salesforce to build more performant Lightning web components. All of this is available to you without giving up what you’ve already accomplished with Aura components.

It uses web standards breakthroughs, can coexist and interoperate with the Aura programming model, and delivers unparalleled performance.

To create and develop Lightning Web Components and use their powerful features and performance benefits, you need to set up Salesforce DX.

Lightning Web Components consist of three files,

.html file --> Html code for designing.
.js file     --> Javascript logic.
.css file   --> External style. (Not mandatory)

Reference:
Salesforce DX
Basic Lightning Web Component

Activities: Assign Tasks to a Queue Salesforce Lightning

Salesforce announced to assign Tasks to a Queue beginning from Spring'20 release. How does it work? In Setup, enter Queues in th...