Advanced Concepts on Lightning Components

This TrailheaDX session by Christophe Coenraets explains concepts like how to cache data efficiently, how to build for performance, Data Binding, Lightning Data Service, Service Lightning Components etc.

Below are some of the key points discussed in the video:

1. Cache data on the client side whenever possible. Go to server only as a last resort. Consider the example of paginating through data in a lightning component. It is a bad approach to go to server to fetch the data every time Next or Previous button is clicked although a particular page data was viewed just a while ago.

The solution is using Storable Actions. Simply use action.setStorable(); to enable storing the result of the action callback in client cache. Only use setStorable in non-mutable function (functions that do not update data in the database).

The video also explains in detail about refreshAge (30 sec) and expirationAge (900 sec) and what happens when we try to retrieve the data after these times have passed.

Note: Do not use JavaScript Promises with Storable Actions.

***************************
Update: Winter'19 Release: API Version 44.0
***************************

Now you can mark the Apex method as storable (cacheable) and get rid of any setStorable() calls in JavaScript code using @AuraEnabled(cacheable=true) annotation.

2. Data Binding: Bound Expressions vs Unbound Expressions.

Bound Expressions - Two way data binding or bi-directional data binding.
{!contact.FirstName}
Unbound expressions - one-time data binding (not one-way!)
{#contact.FirstName}

Unbound expressions works well with iterations (<aura:iteration>) because we already have the object array and we are looping through the array to display the data.

Why is Bound Expressions called Two-way binding and Unbound Expressions called One-time data binding? Check the video for detailed explanation.

3. Service Lightning Components

Lightning Components that have no UI. They can be used as reusable services.
<aura:method> is used to defined the method name that a parent component can call.

4. Three types of  Events: Component Events, Application Events and Platform Events.
The video briefly explains when to use what type of event.



0 comments:

Post a Comment