Aura Framework – An Introduction

What is Aura?

Aura is a open source UI framework for developing apps for mobile, tablet and desktop devices. In existence since 2013, Aura enables developers to build apps that are independent of data that resides in Salesforce. Aura also optimize applications as per device automatically.

While the open source Aura framework underlies the Salesforce Lightning Component Framework, it also includes components that are not available in Lightning.

Aura supports partitioned multi-tier component development that bridges the client and server. It uses JavaScript on the client side and Java on the server side.

Salesforce developers build Lightning components that are based on the open source Aura framework.

Why Use Aura?

Aura comes with a rich and extensible component set to kick start building apps. You don’t have to spend your time optimizing your apps for different devices as the Aura framework take care of that for you.

The framework intelligently utilizes your server, browser, devices so you can focus on the logic and interactions of your apps. Aura supports latest browsers and UI technology like HTML5, CSS3 etc.

The framework uses a stateful client and stateless server architecture. Client side it uses javascript and server side Apex. It uses JSON to exchange data between the server and the client.

The framework uses event driven architecture for better decoupling between components.

Aura Vs Angular

Component based framework like Aura is suitable for building software components which are highly reusable with distinct features. Also, Components are slightly heavy weight in terms of number of artifacts involved in each component.

On the other hand, JavaScript MVW Framework AngularJs is still a superior framework for building extraordinary Single Page Applications as it supports Two-way data binding and Dependency injection.

Main Components of Aura Framework

App

App is the main UI that user sees when they run the Apps. App contains of one or more components.

Component

Components are self contained and reusable units of an app. They represent a reusable section of the UI and can be a single line out put or entire app. Aura Framework includes some prebuilt components, that can be used or you can create a brand new components. These components are finally produce HTML output in the browser.

Event

When the user interacting with the UI then event fires, so components must register the events. Event are fired from javascript controller actions. Event can be two types component events or application events. Event handlers are written in javascript controller actions.

How Aura App looks like:

An app is a special top-level component whose markup is in a .app file. It can contain text, markup or references to other components

<aura:application>
<div>
<header>
<h1>MySample App</h1>
</header>
<!–Other HTML tags or components here–>
</div>
</aura:application>

How Aura Component looks like:

Component files contain markup tags like html and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component.

A simple example below in a helloWorld.cmp component. Components supports most of the HTML markup tags.

<aura:component>

<div class=”container”>

Hello World!
<!–Other HTML tags or components here–>

</div>

</aura:component>

Main files in a Component Bundle:

A component bundle contains a component or an app and all its related files.

Component or Application: – file name like Mysample.cmp or sample.app, it is the only required component in bundle.

CSS Styles: – file name like Mysample.css, it comtains CSS style for the component and app.

Controller: – file name like MysampleController.js, it contains client-side controller methods to handle events in the component.

Renderer: – file name like MysampleRenderer.js, it is a client-side renderer to override default rendering for a component.

Helper: – file name like MysampleHelper.js, it contains helper methods that are shared
by the controller and renderer.

Model: – file name like MysampleModel.js, it is JSON model to initialize a component.

Aura GitHub Repositories:

https://github.com/forcedotcom/aura

Aura Framework Documentation Home Page:

http://documentation.auraframework.org/auradocs

Gopal Das
Follow me

Leave a Reply

Your email address will not be published. Required fields are marked *