Aura Component in Lighting

Aura components are the self-contained and reusable units of an app. They represent a reusable section
of the UI, and can range in granularity from a single line of text to an entire app. Event-driven
programming is used in many languages and frameworks, such as JavaScript and Java Swing.

Aura is an open-source UI framework built by Salesforce for developing dynamic web apps for mobile
and desktop devices. The lightning component framework is not different from the Aura framework
rather it is a subset of the Aura framework. The Lightning Component framework is built on the
open-source Aura framework.

What is the difference between lightning component and aura component?

Salesforce Lightning Component is a user interface (UI) based framework for developing single-page
mobile/desktop/web-based applications. Using the Lightning Component along with these tools, you can
customize and deploy new apps in mobile devices easily and effortlessly. Aura components are reusable
units of the app

1. Aura-based Lightning components are built using both HTML and JavaScript, but LWC is built
directly on the Web stack.
2. Web components can easily interact with the Aura component and can handle the events of one
another
3. A developer who works on LWC is not only using coding skills on a particular framework but in
other frameworks like React or Angular, which are based on the Web Stack.
4. In addition to the latest features, LWC still embraces the features like the Security, Lightning Data
Service, and Base lightning components from Aura.
5. Creating an LWC is fast as it no longer requires the user to download the JavaScript and wait for
the engine to compile it before rendering the component.
6. It is possible to include LWC in Aura, but not the other way around as the generic elements
cannot be added to the custom components.

Module 1- Create a simple aura component

Open the developer console->new->lighting component

Component– A markup language is used for configuring the layout of the component.

Controller– A JavaScript Controller is used for handling client-side processing or an apex

controller is preferred for server-side processing.

Design File– A design file is used for describing the design-time behavior of the component being
used in Lightning pages or in Lightning App Builder.

Documentation File– A documentation file is used to provide reference documents or sample

code to users who have received your component.
 Helper– A helper aims at storing reusable JavaScript functions that are handled by the controller.

SVG File– An SVG File enables you to include custom icons that can be used for reference
further.

Module 2- View Aura component

To view this we need to create the aura application.New->lighting application

Module 3- Aura Interfaces

Interfaces determine a component’s shape by defining its attributes. Implement an interface to allow a
component to be used in different contexts, such as on a record page or in Lightning App Builder.

ex: flexipage:availableForRecordHome,force:hasRecordId

Module 4- Attributes

This is nothing but a kind of variable in the lighting component which we use to flow the data. It has two
mandatory parameters Name and type. Access denotes the access of variables.

Note: v is a value provider and c is an action provider.

Module 5- Flow of data using Attributes

We use the attribute to flow the data

Note Every aura: handler has attributes it needs to work: name and value (for component events), or
event (for application events), and action. Name is a predefined name for system events like init or
change. This tells aura: handler which event to attach to. The event specifies an event to attach, which
might actually be a custom event. The value specifies what the event is attached to for an init, it will be
the current component (“{!this}”);

Events:
An event is an action that is performed by the user, while interacting with an app. Based on that event a
developer can decide to perform some manipulation in his code. The events may or may not be triggered
by user interaction.

The framework uses event-driven programming. You write handlers that responds to the interface events
as they occur.

In the Lightning Component Framework, events are fired by the JavaScript controller actions. Events can
contain attributes that can be set before the event is fired and read when the event is handled.

Events are declared by the aura:event tag, and they can have one of two types:

A: Component Event
A component event is fired from an instance of a component. A component event can be handled by the
component that fired the event or by a component in the containment hierarchy that receives the event.

There are two parts of a component event :-

1. the component that registers the event and

2. the component that handles the event.

To understand it first we need to create a component event as follows: