Lightning : Share common code across multiple components

With more and more complex components being built into lightning, it becomes quite important to understand how we can improve our codebase and ensure that we use best practices.

When it comes to building lightning components, they are expected to be pretty much self-contained. It works well when creating standalone components serving specific business function. But, often in enterprise arena we build components having some of common functionality. For e.g. need to validate email or address or a specific business rule validation.

A direct approach is to copy and paste the method within helper files of lightning component. But, it is definitely not an advisable approach. So, we have a problem to solve.

Lightning provides capability to load external javascript files (static resources) and use it's code. In this article i'll give a quick and simple glimpse of this capability

Step 1 - Create a javascript helper file

Create a javascript file to contain required shared code for e.g.

[CODE 1]

1 2 3 4 5 6 7 8 9 10

window.CommonHelper = (function(){ var helper = { roundCurrencyValue : function(value){ return ( Math.round(value * 100) / 100); }, }; return helper; }());

Step 2 - Upload javascript helper file as static resource

Upload the file as a static resource, to be used in subsequent steps. For this post, let's name the static resource as CommonHelper.

Step 3 - Embed javascript helper file within lightning component

Embed this common reusable javascript within your lightning components by using ltng:require component.

[CODE 2]

1	<ltng:require scripts="{!$Resource.CommonHelper}"/>

Step 4 - Use helper file methods

That's it. Now you can use your code/ methods within your lightning component's javascript code. for example

[CODE 3]

1	CommonHelper.roundCurrencyValue(234.23453);