Aura is an open source UI framework used to create dynamic web apps for all devices on Salesforce platform. It is its modularity approach that makes it popular as you can break your web app development into various components that can interact with each other. Therefore, you can divide a project into different team members and develop a complex application conveniently. There are so many components and features pre-built that will enhance the development time to the least. Most importantly, you do not have to optimize your web apps for different devices. Aura framework comes in two versions. One version runs on Java backend and it is called Aura OSS. The second variant is for Salesforce1 platform and it is called Aura On The Platform(AotP).By Aura framework, people generally refer to AotP.

A Brief Tutorial On Aura Framework –

Before you get started with Aura framework, make sure you create a custom Salesforce domain name.

Namespace Convention –

Aura framework follows the namespace convention of <YourNameSpace: Component>. For example, for an input field, you have to use ‘ui’ as in <ui:inputFieldText> but for the rest, you have to use ‘aura’ as in <aura:event>. But Aura provides you the opportunity to change the namespace conveniently.

Developer Console –

Since Aura framework works inside Salesforce, you have to open Developer console from Admin User menu. Then you have to create a new application from File>New. You know that Aura contains various pre-built components and these components are nothing but a collection of files which are called Aura Bundle. Aura Bundle is more like a package in other programming languages. One of the reasons to use Aura framework is also that you can create independent apps that are free of your data in Salesforce.

Creating Components –

Using a framework is all about modularity and hence, instead of using a code repeated in different files, you can create a component on Aura and call it from another file to use it seamlessly. For that, all you have to do is write your code inside <aura:component> Code Here </aura:component> part. To embed the component in another file, you have to use the tag <aura:application> Call here </aura:application>. It is important to remember that you can add or integrate one component into another but you cannot add one app inside another. An app is a collection of multiple components.

Creating Events –

In Aura framework, there are two different types of events – component event and application event. Events are mainly used to pass data using <aura:attribute>.  You can create an event from File>New>Aura Event. You have to specifically and explicitly mention event type. For example, if it is an application event, you have to write <aura:event type=”APPLICATION”> code here </aura:event>. If it is a component event, you can to replace APPLICATION by COMPONENT.

Creating Objects and Tabs–

Objects are used in Aura framework to store records and data like a small database. You can create an object from Create>Objects> New Custom Objects. After creating it, you can add the field name and type as per requirement.

To show the records stored in an object, you need a Tab. You can create Tab from Create> Tabs> Custom Object Tabs> New. Then a wizard will launch where you have to select the object and the style of the Tab.

Loading External JavaScript and CSS files –

While most of the component-based framework never allows you to load external CSS or JavaScript files, Aura is an exception. It provides the developers the required flexibility to take their application to the next level by integration external CSS and other required files. You have to load the external scripts to Static Resources. You have to go to Setup> Develop> Static Resources and upload the external JS, CSS, or even ZIP file containing the external files by specifying the resource name.

Note: You can create your own CSS while creating an app. The option is available in the sidebar once you create a new Aura application from File> New > Aura application.

Some Common Warnings – There are some common warnings associated with if and iteration in Aura framework. There are scenarios when they occur and you should know the exact reason for their occurrence. Clean unrendered body warning occurs you use if statement unnecessary and you are not really using them yet they are consuming rendering time. Similarly, multiple items set warning is common when you change attributes multiple times in a rendering cycle to affect the speed of rendering unknowingly.

Summary Of How To Go About –

First, you have to create an app on Aura framework with .app extension. Then you have to design your app with components and each component can have nested components. Then you have to create app template either by explicit styling or by including external scripting files. You can use JavaScript for client-side code but you need to validate strongly. On the other hand, you should use Apex for server-side coding. Use Lightning data service for managing records without Apex code. Use access system attribute to control your application. You can use third-party frameworks too in Aura using Lighting container.

Kitty Gupta
Latest posts by Kitty Gupta (see all)