Communicate b/w Parent-Child Component using LWC

    What is Event in LWC?

• Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser.
• Lightning web components dispatch standard DOM events.

Some different types of web events :

• Mouse event : example - mousedown, mouseup, click, dblclick
• Touch event: example - touchstart, touchmove
• Keyboard event : example -keydown, keypress, keyup
• Form event: example -focus, blur, change, submit
• Window event :example - scroll, resize, hashchange, load, unload

Let us discuss here how to use the lightning web component events to communicate between components.

How to  create events, using the CustomEvent interface and dispatch an event in lwc?

To create an event, use the CustomEvent() constructor.

 Example  : this.dispatchEvent(new CustomEvent('myTxt'));

 Note : CustomEvent constructor has one required parameter which is string that denotes event type.

 To dispatch an event, call the EventTarget.dispatchEvent() method.
where EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.

• EventTarget.addEventListener()

        Registers an event handler of a specific event type on the EventTarget.

• EventTarget.removeEventListener()

         Removes an event listener from the EventTarget.

• EventTarget.dispatchEvent()

       Dispatches an event to this EventTarget

Here is my sample lwc receipe. It divided into 3 sections: 

1. Basic form to add the contact detail (on adding the record it will refresh the contact list records)
2. Show the list of contact records
3. Show the contact details.

 Basically in the receipe I have created 2 main component and apex class(Parent - child).
1. ContactListContainer - this is my parent component.
2. Add contact and contactList is my child component.
3. Apex class
Here I will add the contact detail in the list of contact records without refreshing the page(Using refreshApex here) and on clicking the contact record it will further show the contact full detail.

Check the video of this sample recipe. Its time to code in lwc :

contactListContainer.html

	<template>
	<lightning-layout>
	<lightning-layout-item flexibility="auto" padding="horizontal-medium" style="width:50%;">
	<c-add-contact onaddcontact={addContactHandler}></c-add-contact>
	</lightning-layout-item>
	<lightning-layout-item flexibility="auto" padding="horizontal-medium" style="width:50%;">
	<lightning-card title="List of Contact Records" icon-name="standard:groups" if:true={conList.data}>
	<template for:each={conList.data} for:item="con">
	<c-contact-list key={con.Id} contact={con} onselected={handleSelectedContact}></c-contact-list>
	</template>
	<template if:true={conList.error}>
	<div>no data available</div>>
	</template>
	</lightning-card>
	</lightning-layout-item>
	<lightning-layout-item flexibility="auto" padding="horizontal-medium" style="width:50%;">
	<lightning-card icon-name="standard:contact" if:true={selectedContact} >
	<p class="slds-truncate">Name : {selectedContact.Name}</p>
	<p class="slds-truncate">Email : {selectedContact.Email}</p>
	<p class="slds-truncate">Phone No : {selectedContact.Phone}</p>
	</lightning-card>
	</lightning-layout-item>
	</lightning-layout>
	</template>

view raw contactListContainer.html hosted with ❤ by GitHub

contactListContainer.js

	import { LightningElement, wire, track } from 'lwc';
	import getContactList from '@salesforce/apex/addNewContact.getContactList';
	import { refreshApex } from '@salesforce/apex';
	export default class ContactListContainer extends LightningElement {
	@track selectedContact;
	@wire(getContactList) conList;
	addContactHandler() {
	refreshApex(this.conList);
	}
	handleSelectedContact(event) {
	const contactId = event.detail;
	this.selectedContact = this.conList.data.find(contact => contact.Id === contactId);
	//Console.log('@@selectedContact==' +JSON.stringify(this.selectedContact));
	}
	}

view raw contactListContainer.js hosted with ❤ by GitHub

contactListContainer.js-meta.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contactListContainer">
	<apiVersion>45.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw contactListContainer.js-meta.xml hosted with ❤ by GitHub

addContact.html

	<template>
	<lightning-card title="Add Contact detail" icon-name="standard:contact">
	<div class="slds-p-horizontal_small">
	<div class="slds-media__body" >
	<lightning-input label="FirstName" type="text" value={fname} onchange={fnamechange}></lightning-input>
	<lightning-input label="LastName" type="text" value={lname} onchange={lnamechange}></lightning-input>
	<lightning-input label="Email" type="Email" value={email} onchange={emailchange}></lightning-input>
	<lightning-input label="Phone Number" type="text" value={phoneNo} onchange={phoneNochange}></lightning-input>
	<div>
	<lightning-button label="Submit" onclick={submitContactDetails}> </lightning-button>
	</div>
	</div>
	</div>
	</lightning-card>
	</template>

view raw addContact.html hosted with ❤ by GitHub

addContact.js

	import { LightningElement,track } from 'lwc';
	import saveDetails from '@salesforce/apex/addNewContact.myContactDetails';
	import {ShowToastEvent} from 'lightning/platformShowToastEvent';
	export default class MyContactList extends LightningElement {
	@track fname;
	@track lname;
	@track email;
	@track phoneNo;
	@track error;
	fnamechange(event){
	this.fname = event.target.value;
	}
	lnamechange(event){
	this.lname = event.target.value;
	}
	emailchange(event){
	this.email = event.target.value;
	}
	phoneNochange(event){
	this.phoneNo = event.target.value;
	}
	submitContactDetails()
	{
	saveDetails({
	fname: this.fname,
	lname: this.lname,
	email:this.email,
	phoneNo:this.phoneNo
	})
	.then(result => {
	this.fname ='';
	this.lname = '';
	this.email = '';
	this.phoneNo = '';
	this.dispatchEvent(new ShowToastEvent({
	title: 'success',
	message:result+'Contact created successfully. ',
	variant: 'success'
	}));
	const saveConEvent = new CustomEvent('addcontact');
	this.dispatchEvent(saveConEvent);
	})
	.catch(error =>{
	this.error = error;
	})
	}
	}

view raw addContact.js hosted with ❤ by GitHub

addContact.js-meta.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="addContact">
	<apiVersion>45.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw addContact.js-meta.xml hosted with ❤ by GitHub

contactList.html

	<template>
	<a href="#" onclick={handleSelectedContact}>
	<div class="slds-p-around_medium lgc-bg">
	<lightning-tile type="media" label={contact.Name}>
	<lightning-icon slot="media" icon-name="standard:contact" ></lightning-icon>
	<p class="slds-truncate">
	<lightning-formatted-email value={contact.Email}></lightning-formatted-email>
	</p>
	</lightning-tile>
	</div>
	</a>
	</template>

view raw contactList.html hosted with ❤ by GitHub

contactList.js

	import { LightningElement,api } from 'lwc';
	export default class ContactList extends LightningElement {
	@api contact;
	handleSelectedContact(event){
	event.preventDefault();
	const selectEvent = new CustomEvent('selected',{detail:this.contact.Id});
	this.dispatchEvent(selectEvent);
	}
	}

view raw contactList.js hosted with ❤ by GitHub

contactList.js-meta.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contactList">
	<apiVersion>45.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view raw contactList.js-meta.xml hosted with ❤ by GitHub

Apex Class: addNewContact.cls

	public with sharing class addNewContact {
	@AuraEnabled(cacheable=true)
	public static list<Contact> getContactList(){
	list<Contact> conList = [select Id,Name,FirstName,LastName,Phone,Email from Contact Order by CreatedDate Desc];
	return conList;
	}
	@AuraEnabled
	public static String myContactDetails(String fname,String lname,String email,String phoneNo){
	Contact con = new Contact();
	con.firstname = fname;
	con.lastname = lname;
	con.Email = email;
	con.Phone = phoneNo;
	insert con;
	return con.firstname;
	}
	}

view raw addNewContact.cls hosted with ❤ by GitHub

Happy Learning :) .Please share your views and suggestions.

Lightning Web Component

What is Lightning Web Component?

It's new programming model built on the modern web standards. LWC is the Salesforce implementation of that new breed of lightweight frameworks built on web standards.
It leverages custom elements, templates, shadow DOM, decorators, modules, and other new language constructs available in ECMAScript 7 and beyond.
Lightning Web Components provides a layer of specialized Salesforce services on top of the core stack, including base lightning components,Lightning Data Service and User Interface API.

Before we understand more about lightning web components we have to know about ECMA.

ECMA is an organization which develops standards for web technologies. They provide the specification for new features which has to implement in web technologies (HTML, CSS, javascript).
ECMA - European Computer Manufacturer’s Association.

• ECMAScript is a Standard for a scripting languages.
• JavaScript is a subset of ECMAScript. JavaScript is basically ECMAScript at its core but builds upon it.Languages such as Action Script, JavaScript, JScript all use ECMAScript as its core. As a comparison, AS/JS/JScript are 3 different cars, but they all use the same engine each of their exteriors is different though, and there have been several modifications done to each to make it unique.
• ECMAScript is a specification for javascript and the latest version is 7 and it has features like  Modules, promises, custom elements and shadow DOM which we can use to build the components instead of using a framework.

Journey of Web Stack Transformation from 2014 to 2019

In 2014 when aura framework was launched.At that time Web Standards had limited functionality and various framework came to fulfil the gaps like ReactJS,CommonJS,AngularJS etc.

• Aura framework ,Angular,React these all framework became languages.
• There was time when web developers rely heavily on frameworks. 

But something very different happened to web browsers in the four years since the introduction of Aura.Google began to champion a new concept known as Web Components to the internet community. The idea was to scrap the decades-old limitations of what web browsers were capable of and agree to a new set of standards that would be more flexible and powerful to web developers.

Why LWC actual come in picture after 2014?
Web Components was released to Google’s Chrome browser in 2014 and then it made its way through various committees within the tech community.
After some revisions and feedback from other companies such as Salesforce, the specifics were ultimately agreed upon and implemented.

• Now all major web browsers such as Mozilla Firefox, Apple Safari, and Microsoft Edge support the new standards, thus making the new technology widely available to the masses.
• A lot of the functionality that Salesforce had built into the Aura framework could now be taken out of their processes and offloaded onto the browser itself using Web Components. 

Salesforce created the Lightning Web Component framework to do so.
LWC are able to utilize the new standards while still having the ability to access Salesforce data and work within the existing Lightning Experience UI.
This results in faster speeds and processing of Salesforce applications because the web browser has a more direct access to the processing capability of your computer. Salesforce can now focus their resources on Salesforce-specific functionality and not just creating a webpage for you.


4 Pillars of  Web Component :

1. Import : to import a class, function, or variable declared in a module.                           eg:import { LightningElement } from 'lwc' (here  LightningElement is a custom wrapper of the standard HTML element.)
2. Template : writing markup inside <template> tag.
3. Custom Element: create a custom HTML tag.
4. Shadow DOM : encapsulate structure and style from other elements.

                                        Key Concept of LWC

LWC = HTML (UI Interface) + JavaScript (to handle events) + CSS + meta XML file(target where to place the component eg:lightning__AppPage/lightning__RecordPage/lightning__HomePage)

Coexistence and Interoperability of LWC and Aura Component 

1.Aura Components, leveraging its own component model, templates, and modular development programming model.

2.Lightning Web Components, built on top of the web standards breakthroughs of the last five years: web components, custom elements, Shadow DOM, etc

• An interoperability layer enables Lightning web components and Aura components to work together in an app.
• Lightning web components and Aura components can work together, but there are limitations that you must understand.
• Aura components can contain Lightning web components. However, the opposite doesn’t apply. Lightning web components can’t contain Aura components
• Lightning Components will continue working and being supported by Salesforce.

• Here the blue blocks( in above image) represents the custom layers running on top of browser (javascript engine) to make a  lightning components work. 
• In middle-left you can see a big chunk which represents Aura framework (custom).
• On middle-right, the orange block(in above image), represents the web component implementation within Browsers (native)

Advantage of using Lightning Web Component :

 Lightning web components utilize more of native browser features and capabilities they are:

1. Compliant to web standards
2. Lightweight
3. Memory efficient
4. Fast
5. Easier to learn 

  

    Happy learning :) and stay tuned will come up with lightning web component series.