Aura Framework Architecture

When I start with Lightning I had a big mess in my head regarding Aura, Lightning Experience (LEX) and Lightning Components. In case you are in the same point where I was, it could be important to clarify that Lightning Components are based on Aura and LEX is built with Lightning Components.

To know how the Aura, and thus Lightning Components, works is a must. That’s why I will explain in this post how it behaves and some relevant differences with the previous model used by our well known VisualForce (VF).

So, how the server and the browser interact now? What is the main difference between VF architecture and Aura?

When you make a request through VF is the server the one who renders the whole page and return the HTML already processed to the browser. But this has changed with Aura.

Imaging a user navigating to any page in Lightning Experience. The browser will request the app template to the server. The app template is just an HTML file that contains the dependency tree.

AF1

Next step for the browser is to request the Aura Engine, which is a JavaScript library, and the component definitions that were specified in the app template.

AF2

So far, the browser has been just requesting resources to the server. Now that it has all the ingredients it is time to start cooking. So, is the browser the one in charge of rendering the Document Object Model (DOM), deserializing the components definitions and rendering the HTML.

This is the first major difference with VF or classic. Because most of the workload is now in the browser instead of being in the server.

AF3

But even more. What happens if after this first swap of info a user performs an action in the screen that needs an interaction with the server?

With VF or LEX, the browser will make the server request. So far LEX and VF work the same. But while VF will need the server to recreate all the page and send it back completely to the browser, with LEX the server will send back only the minimum data in JSON, and again is the browser the responsible for handling this info and rerender only the needed areas of the page.

AF4

Is in this behaviour, we can find the second major difference. Because again we are relaxing the workload in the server. So, Salesforce will have a bigger capability for handling some other important stuff. And we will be able to build more performant, interactive and modern applications.

 

Thanks for reading!

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.