ECMAScript 2016 has introduced a new keyword ‘class’ in client side controller..in an attempt to make JavaScript at least appear to work like a class-based language..
Visualforce is a tag based markup language and with a controller. Whenever we click a button, usually some kind of method will be executed in apex and return the results on to the page through getters and setters and interaction between page and DB used to happen that way…
While learning the lightning components from in 2014.. we got used to 2 controllers (i.e., Client-Side and Server-Side) and a front-end page architecture..
Where server side controller is in Apex (object-oriented) and it can have constructors, static methods, instance methods, getters and setters etc., more or less, mentally, In general, whenever we come across ‘controller’ keyword a class flashes in our mind..
On the other hand, client side used controllers used to have javascript functions..
As days passed on…with the advancement / Standardization of JavaScript, ECMAScript 2016 has introduced a new keyword ‘class’ in client side controller..in an attempt to make JavaScript at least appear to work like a class-based language..
It is important to note that even though we will start using this class keyword in client-side controller.. the underlying object is still a function..
Somehow.. we feel comfortable in writing these class based controllers, and from now, we write these class based controllers in JavaScript for lwc as well..
as per ECMAScript 2016, JavaScript classes also have the following features..
- constructors
- getters and setters
- static methods
- Instance Methods
- Inheritance
coming back to the point..
let us observe this class…
import { LightningElement, track, api, wire} from 'lwc';
export default class JsProperties extends LightningElement {
@track Name;
@api Email;
@wire DOB;
LeadSource;
constructor() {
LeadSource = 'Phone Inquiry'
}
}As a beginner, by observing the above class we may feel the following things..
- We have a class with name JsProperties
- There might be a package / Module with name ‘lwc’ from which we are importing a class called LightningElement.
- We are extending our current class with LightningElement.
- Few keywords where also included, and they were used later on in the code..
- It has 4 member variables Name, Email, DOB, Address.
- we have a constructor, that initializes the member variables / properties of the class
Oh..!, wait… we find something before the member variable like @api, @track and @wire.. what are they..
In lwc people call them as decorators, when this article was written, there are only there decorators in lwc.
- @api
- @wire
- @track
But the property LeadSource doesn’t seems to have any annotation or decorator in-front of it.. So what does it indicate..?
People call these kind of.. un-annotated variables like LeadSource as Private non-reactive Properties.
Private in the sense, these type of variables can be used only in same javascript class where they are declared, and in its corresponding html template.
Non-Reactive in the sense, Whenever the value of this variable change due to some reason in the js controller, component refresh do not happen in the front end page..
Now, you might get a doubt, Are there any properties / variables ..? in lwc whose values if changed (due to some reason in the js controller), will auto-refresh the component in the front endpage..??
The Answer is Yes..!
In the above class, Name is a private – reactive property
lets discuss about these annotation in the next article… Its a quite lengthy story.. 🙂
