November 22, 2019

Comparative Study on Lightning Web Components for Aura Developers PART-2


In this blog post, we will learn about how Aura components and Lightning web components can work together. When should we consider migrating an Aura component to a Lightning web component? How we can use markup in aura component & LWC? So lets find out all these answers in this article. Let's get started.


Prerequisites:

Before you dive into this article, check out Lightning Web Components Basics blog post that I have written earlier. Also check out how to create a Hello World Lightning Web Component. I am assuming you are familiar with Aura component programming model.

Aura Initializers Become Lifecycle Hooks

IN AURAIN LWC
use the init event in an Aura component to initialize a component connectedCallback() lifecycle hook fires when a component is inserted into the DOM 
<aura:handler name="init" value="{!this}" action="{!c.onInit}" />

export default class PropertySummary extends LightningElement {
    ...
    connectedCallback() {
        // initialize component
    }
}

Use Third-Party JavaScript Libraries

IN AURAIN LWC
use the <ltng:require> tag in markup to load the static resource import the static resource in JavaScript 
<ltng:require scripts="{!$Resource.resourceName}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

import resourceName from '@salesforce/resourceUrl/resourceName';

Parent Component (c-parent)

Parent is the component that owns the template. Parent component can contain other components.

The parent component can:
  • Set public properties on composed components.
  • Call public methods on composed components.
  • Listen for any events fired by the composed components.

Parent and Child Component Relationship

When one component contains another component and forms the containment hierarchy. It is called as parent- child component relationship.

IN AURAIN LWC
Use a colon to separate the namespace, c, from the component name. Use a dash to separate the namespace, c, from the component name
Use the camel case component name, childCmp. Change the camel case name, childCmp, to a kebab case (dash-separated) reference
Self-closing tags are allowed in Aura markup so we use <c:childCmp /> Self-closing tags are not allowed. 
<!-- parent.cmp -->
<aura:component>
    <aura:attribute name="fName" type="String" />
    <c:childCmp firstName="{!v.fName}"/>
</aura:component>

<!-- parent.html -->
<template>
    <c-child-cmp first-name={fName}></child>
</template>

Aura CSS Becomes Standard CSS

IN AURAIN LWC
THIS class is used in style.css before tag Standard css writing is used 
.THIS .lower-third > p {
    padding: 0;
    margin: 0;
}
.THIS .truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lower-third > p {
    padding: 0;
    margin: 0;
}
.truncate {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
By
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)