The Front End Experience: Aura

Migration strategies and proven methods for using the Salesforce programming framework, Aura.

In 2014, Salesforce released the Aura programming framework. Also known as Lightning Components (not to be confused with similar-appearing Lightning Web Components), the Aura programming framework plays an important role in Salesforce and allows developers to build large-scale applications. However, it has its limitations, and Web development standards have evolved since it was introduced.

Lightning Web Components (LWC) was introduced in 2019 and incorporates the modern Web standards. As a result, advantages include improved performance, faster loading due to the lightweight framework, and fewer proprietary concepts.

Migration strategy

Migrating an Aura component to a Lightning Web Component cannot be done line by line. The programming models for LWC and Aura are fundamentally different. Below is a general overview of how the Aura programming model maps to the LWC programming model.

Component bundle files

The controller, helper, and renderer files map to one JavaScript file in LWC. There is no LWC equivalent to auradoc and svg files. Access controls specified in the Aura component’s markup (e.g. implements = “flexipage:availableForAllPageTypes”) are mapped to the LWC configuration file <isExposed> tags. Apex controllers specified in the aura component’s markup (e.g. controller = “sampleController”) are mapped to the LWC JavaScript file with each method imported using the following syntax: import apexMethod from ‘@salesforce/apex/Classname.apexMethod’.

Migrating attributes

Aura attributes from markup tags are migrated to the LWC JavaScript file as properties.

Aura expressions are migrated to HTML expressions. In LWC, the properties do not have the exclamation point or value provider (v.) syntax.

Migrate iterations

Aura tags with aura:iteration are migrated to LWC using for:each. In LWC, a unique key must be assigned to each item in the list. List options can be initialized in the Aura markup but not in LWC. List options for LWC must be initialized in the JavaScript file.

Migrate conditionals

The aura:if tags in Aura are migrated to if:true and if:false in LWC. Expressions cannot be used in LWC. (See section below: Migrate expressions.)

Migrate expressions

Expressions cannot be used in LWC. Instead, if:true and if:false conditionals are used. All conditional logic are in the JavaScript file, not in the markup.

Migrate initializers

Aura init event handlers are replaced with LWC’s JavaScript connectedCallback() method.

Migrate base components

Aura and LWC base lightning components have different syntax. Aura uses the syntax lightning:componentName while LWC uses the syntax lightning-component-name. The colon after the namespace is replaced with a dash, and the camel-case component name is replaced with a dash-separated component name. Aura can have self-closing tags, but LWC requires full closing tags.

Migrating events

When creating events, Aura uses the Event object, while LWC uses the standard Event or CustomEvent objects. To fire events, the Aura event.fire() method is replaced with the standard this.dispatchEvent(myEvent) in LWC. For both Aura and LWC, a component can declare a handler action when it references another component in its markup. The LWC event name in the markup handler is prefixed by “on”. Lastly, LWC uses event.detail to retrieve the event payload.

Aura best practices

An important rule to remember is that Aura components can contain Lightning Web Components but the other way is not currently possible. Therefore, it is often a good idea to migrate Aura Components to LWC. However, not all Aura components can be migrated to LWC at this time. For example, components that are launched by buttons/actions, components that integrate Einstein Analytics dashboards, components that embed Lightning flows, among others. In these cases, below are best practices regarding development in the Aura framework.

Component names

A component name must follow these naming rules:

• Must begin with a letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores

Best practices

• For naming components: start with an uppercase letter and follow the CamelCase convention instead of kabobs (ex. ‘componentName’ instead of ‘component-name’).
• For naming methods and variables: start with a lowercase letter and follow the CamelCase convention.
• Use the complete method parameter names (component, event, helper) rather than shorthand (cmp, evt, etc.)
• Use the lightning namespace, such as <lightning:button> instead of the ui namespace such as <ui:button>
• For performance best practices, see below.

Performance

• Pass data between components (using attributes, events, or methods) rather than retrieving the same data in different components.
• When making server calls, limit the columns and rows of the result set by only selecting the columns needed and setting a limit on the query while providing a paging or lazy loading mechanism.
• Don’t preload data that the user may never ask for.
• Filter and sort retrieved data on the client side rather than calling the server side to filter and sort data that was already retrieved.
• Consider combining several requests in a single request.
• Cache data when possible using Storable Actions and Lightning Data Service.
• Use aura:if to defer creation and rendering until the condition is fulfilled.
• For lists, register a single event listener on a parent element instead of using a separate event listener on every item.
• Minimize the number of times the component is being rendered.

About Cervello, a Kearney company
Cervello, a Kearney company is a data and analytics consulting firm and part of Kearney, a leading management consulting firm. We help our leading clients win by offering unique expertise in data and analytics, and in the challenges associated with connecting data. We focus on performance management, customer and supplier relationships, and data monetization and products, serving functions from sales to finance. We are a Salesforce partner and help our clients implement, customize, and optimize the platform into the best solution for their needs.