Walking through sample applications is a great way to learn new languages and frameworks. In this article, I share a Mutual Fund Explorer sample application that illustrates standard coding practices and solutions to common problems when building applications with the Lightning Component Framework.
It’s not necessary to be familiar with the financial services industry to use this application. At a high level, a mutual fund is a product, and the Mutual Fund Explorer works like a typical Product Explorer.
The list of coding practices illustrated in this application includes:
Watch the video to see the Mutual Fund Explorer in action.
Import sectors:
Import funds:
Take a look at the Data Management Trailhead module if you want to learn more about importing and exporting data.
Storable actions make it easy to implement client-side data caching, which is one of the most impactful things you can do to improve the performance of your Lightning components. Check out the FundTileList component. A storable action is used to retrieve funds from the server and cache the response at the client-side. Read this blog post for more information.
In addition to storable actions, you can also build your own custom cache solution. For example, for data that never (or rarely) changes, you can build a custom cache that retrieves the data from the server once, caches the response, and never goes back to the server. Check out the DataCache static resource (File > Open > Static Resource > Data Cache in the developer console) for an example. And then check out the SectorSelector and AssetClassSelector components to see how it’s used to cache the list of sectors and asset classes. Read the Modularizing Code in Lightning Components blog post for more details, and for different strategies to implement a custom cache.
Creating a dropdown box from picklist values is a common requirement. Take a look at the AssetClassSelector component for an example. The AssetClassSelector also uses the custom cache solution described previously to ensure that picklist values are only retrieved once from the server.
Creating a dropdown box from a list of records is also a common requirement. Take a look at the SectorSelector component for an example. Like AssetClassSelector, SectorSelector uses the custom cache solution described previously to ensure that the list of sectors is only retrieved once from the server.
When working with lists, letting events bubble, and registering a single event listener on a parent element instead of a separate event listener on every list item can significantly reduce the number of event listeners in your application, which can have a positive impact on performance. Check out the FundTileList component, and see how a single onmousemove event listener is registered on the list element (<ul>
) instead of a separate listener on every list item (<li>
) (inside the FundTile component).
Application events are used for coarse-grained application-level communication, such as communication between components added to pages in App Builder. For example, in the Mutual Fund Explorer:
Component Events are used for finer grained child-to-parent communication. For example, in the Mutual Fund Explorer:
To implement parent-to-child communication, you can either:
<aura:method>
) in the child componentCheck out the FundInfoPopup component for an example of using <aura:method>
:
<aura:method name="showPopup" action="{!c.showPopup}"> <aura:attribute name="fund" type="Fund__c"/> <aura:attribute name="x" type="Decimal"/> <aura:attribute name="y" type="Decimal"/> </aura:method>
The MutualFundExplorer uses the noUiSlider library to display a double slider. NoUiSlider is lightweight and doesn’t have dependencies (in particular, no jQuery dependency). Check out the PercentReturnRange component to see how it’s used.
In the Mutual Fund Explorer sample application, components created inside <aura:iteration>
use unbound expressions to avoid the proliferation of event listeners. Check out FundTileList and FundTile for an example.
<c:FundTile fund="{#fund}" index="{#index}"/>
When possible, make your components configurable using design attributes. Design attributes are exposed in App Builder and make your components more reusable by enabling admins to configure them for specific situations. For example, in the Mutual Fund Explorer page, the PercentReturnRange component is used three times, configured differently each time to filter the list using different criteria: the year-to-date return, the one-year return, and the five-year return of the fund.
The Mutual Fund Explorer sample application includes several coding techniques that are useful when building Lightning Components. Install it in your own org, and find out how it’s built.