While understanding code snippets provided by Salesforce. There are a few things which were confusing.
Like what is @api, @wire.
I googled for them, came to know they are called decorators. Responsible for 'import' things. Means wiring up the functionality with current logic.
I am actually finding what is the use of @api, @wire …etc. Is it defined somewhere that where to use which decorators?
Lightning web components (LWC) are a new programming model for the Lightning Component Framework that is slated to be released in the Spring 19 release. This programming model was architected with three principles in mind.
LWC is compliant with most ES2015 (aka ES6) and later standards that have seen good adoption across modern browsers. JavaScript APIs such as Class, Module, Shadow DOM, CustomComponent, decorators, mix-ins, and many more figure heavily into the architecture, as do modern HTML and CSS features. This brings a great deal of benefit for the developer. First, the main body of knowledge and skill required is modern JavaScript. It also brings a much simplified component bundle structure and developer experience where a given component is comprised solely of an HTML template, a JavaScript module, and a CSS file (where required).
Here's a screen shot of the component bundle (no CSS) in a project in VisualStudio Code.
Here's an example of the code from a Lightning web component:
<template>
<lightning-card title="RecordEditFormDynamicContact" icon-name="standard:contact">
<div class="slds-m-around_medium">
<lightning-record-edit-form
object-api-name="objectApiName"
record-id="recordId">
<lightning-messages></lightning-messages>
<lightning-input-field field-name="Name"></lightning-input-field>
<lightning-input-field field-name="Title"></lightning-input-field>
<lightning-input-field field-name="Phone"></lightning-input-field>
<lightning-input-field field-name="Email"></lightning-input-field>
<div class="slds-m-top_medium">
<lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
</div>
</lightning-record-edit-form>
</div>
</lightning-card>
</template>
import { LightningElement, api } from 'lwc';
export default class RecordEditFormDynamicContact extends LightningElement {
@api recordId;
@api objectApiName;
}
While this is a very simple component that simply surfaces two attributes (the @api decorated properties), you can already see how the JS code reflects modern standards in the import statement for including other JS modules, the export of the class of this module, the use of the class and extends syntax, and the use of JavaScript decorators.
In designing a new programming model for the Lightning Component framework, interoperability with existing Aura-based components is a must. With the GA of LWC, any component built using the LWC programming model can be used in an existing Lightning Component page. To prove this model, Salesforce have used LWC to build Lightning base components for the last year. Any of your existing Lightning Web Components that use a lightning:xxx base component is already using LWC.
Salesforce has yet to publish any benchmarks or performance data related to Lightning Web Components. But look for upcoming blog posts from the LWC engineering team.
Anecdotally, as more and more of the Lightning Experience UI has become composed of LWC over the past year, many customers have reflected back to Salesforce an experience of better performance.
For more details about LWC, please see the introductory blog post on the Salesforce developer blog which has many links to documentation, sample code and applications, and of course, Trailhead.
No problem. Just go to this quick start project on Trailhead and get the badge.
It doesn't work because you don't have the right to mutate the value associated with a class field decorated with api. The LWC engine will only react for changes when the value is set by the component owner. This can be done by updating the property via the template or manually setting the value on the custom element.
While Aura leverages 2 ways data-binding, LWC encourages props down/events up pattern popularized by modern javascript framework. Allowing to mutation your properties from inside your component would go against this props down/events up principle.
Best Answer
There are 3 decorators specific to lightning web components:
@api : To expose a public property(Think of properties as your aura attributes), decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of a reactive property changes, the component’s template rerenders any content that references the property.To expose a public method, decorate it with @api. Public methods are part of a component’s API. You can use a JavaScript method to communicate down the containment hierarchy. For example, an owner calls a method on a child component that it contains.
@track : To track a private property’s value and rerender a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
@wire : To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.
There is lot more documentation you can read about decorators and how to use them in the developer guide available in the component library.