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

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 LWC component bundle file structure differs from Aura 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. 

Component Composition

You can use Lightning Web Component in Aura Component but you can not use Aura Component in Lightning Web Component. If you’re building a Lightning web component that expects other subcomponents in its body, those subcomponents must also be built as Lightning web components. 

Important to Note

Aura components can contain Lightning web components.

Lightning web components can’t contain Aura components.

Migration Strategy

An Aura Component whose performance is critical can be migrated to a Lightning Web Component. But Before you migrate an Aura component, evaluate the component’s attributes, interfaces, structures, patterns, and data flow.

How LWC Component Bundle File Structure differs from Aura Component?

• The component bundle file structure is different for an Aura component and a Lightning Web Component. Here’s how the files map between the two types of component.
• An HTML File, a JavaScript File & a Configuration File should be present in Lightning Web Component. Css File and Other JavaScript file can be optional.
• Separate Controller, Helper & Renderer files in Aura Component is equivalent to one JavaScript file in LWC.

Resource	Aura File	Lightning Web Components File
Markup	helloWorld.cmp	helloWorld.html
Controller	helloWorldController.js	helloWorld.js
Helper	helloWorldHelper.js
Renderer	helloWorldRenderer.js
CSS	helloWorld.css	helloWorld.css
Documentation	helloWorld.auradoc	Not currently available
Design	helloWorld.design	helloWorld.js-meta.xml
SVG	helloWorld.svg	Include in HTML file or upload as a static resource

Comparison Table for Aura Component Markup and Lightning Web Component Markup

Sr. No.	Aura Component	Lightning Web Component
1.	<aura:component>	<template>
2.	aura:if	if:true or if:false directives
3.	Component Events	Custom Event
4.	private	@track decorator
5.	Marker Interface	Metadata file 'targets'
6.	aura:id + find()	querySelectorAll
7.	global/public	@api, isExposed = true
8.	facet(Aura.Component[])	slot
9.	aura:iteration	for:each directive
10.	myEvent="{!c.doStuff}"	onMyEvent = {doStuff}
11.	aura:handler name="myEvt"	addEventListener(myEvt)
12.	component.set("v.count", 10)	this.count = 10

How to migrate markup from Aura to LWC?

IN AURA	IN LWC
An Aura component contains markup in a .cmp file. The file starts with an <aura:component> tag and can contain HTML and Aura-specific tags.	A Lightning web component contains markup in a .html file. The file starts with a <template> tag and can contain HTML and directives for dynamic content.
<aura:component> </aura:component>	<template> </template>

Attributes Become JavaScript Properties

IN AURA	IN LWC
We use <aura:attribute> tag in markup file (.cmp) of Aura Component.	We use JavaScript properties in in the JavaScript file (.js) of Lightning web component.
<!-- speakerSummary.cmp--> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="speaker" type="Speaker__c" />	//speakerSummary.js import { LightningElement, api, track } from 'lwc'; export default class SpeakerSummary extends LightningElement { @api recordId; @track speaker; ... }

Decorators in LWC

Decorators	Description
@api	Marks a property as public for use in your template or other components
@track	Marks a property as private reactive property, also known as a tracked property.
@wire	Gives you a way to get and bind data. This implementation simplifies getting data from a Salesforce org.

Basic Aura Expressions Become HTML Expressions

IN AURA	IN LWC
In Aura Component expression, we use exclamation (!) and value provider (v) i.e. {!v.total}	In Lightning web component we simply use expresion. So, {!v.total} becomes {total}
<!-- speakerPaginator.cmp--> <aura:component > <aura:attribute name="total" type="integer"/> <div class="centered">{!v.total}</div> </aura:component>	<!-- speakerPaginator.html--> <template> {total} </template> } //speakerPaginator.js import { LightningElement, api } from 'lwc'; export default class SpeakerPaginator extends LightningElement { /** The total number of items in the list. */ @api total; }

References:

• Lightning Web Components for Aura Developers