It’s been a while since Lightning Web Components UI framework is generally available. In this post, we are going to discuss what is a lightning web component and how it is different from Aura Component.
“Lightning web components are custom elements built using HTML and modern javascript“
If you have worked on HTML, you must be aware of standard HTML tags/elements and each of these tags have their own purpose. For example, <h1> for heading, <video> for displaying video, <img> for displaying image and etc.
What if we want to create our own element ? May be something like this ?
<myelement> </myelement>
Here comes the concept of Custom Element. Custom Elements are one of the key features of Modern Web Standards, to encapsulate your functionality on HTML Page.
In simple terms, using custom elements, we can create our own HTML tags or extend the existing components. It brings a web standards-based way to create reusable components using nothing more than vanilla JS/HTML/CSS. The result is less code, modular code, and more reuse in our apps.
Lightning web components are such custom elements built using HTML and Javascript. We do not have to write a bunch of logic to create these custom elements. We just create a component with template as root tag and our framework does all in the background.
On the other hand, Aura Components are based on Aura UI framework to create reusable functional units, also called as components. This framework is not fully built on Modern web standards. It just acts as a abstraction layer between the code the developer has written and the browser. This is also a powerful framework but not as LWC, as LWC is directly built on web standards.
To understand the difference between LWC and Aura Components, Lets review the following example:
helloWorldAura.cmp
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute name="firstname"
type="String"
default="Brahmaji"
description="To store the first name" />
<b>Aura Example:</b> <br/>
FirstName: {!v.firstname}
</aura:component>helloWorldLWC.html
<template>
<b>LWC Example:</b> <br/>
First Name: {firstname}
</template>helloWorldLWC.js
import { LightningElement } from 'lwc';
export default class Example extends LightningElement {
firstname = 'Brahmaji';
}
Both of these components just display defaulted text i.e my first name – Brahmaji. Let’s see in action how do they appear in DOM
In general, all the components that are rendered in the DOM are bunch of HTML elements. But it is not anymore.
LWC component is created as a custom element and the name is converted to kebab case (Each special character (capital letter, space & etc) are separated by hyphen character (-)) by appending the name space where as Aura component is wrapped inside div element and name of the component is added as a property to div element.
This is the main difference between LWC and Aura component in DOM. I will write a new post on benefits of LWC over Aura.
Thanks for reading the post.
Resources:
