Share Code Between Lightning Components Using JS Library

You have always build Lightning Components which are self-sufficient to handle all tasks. However, there are certain scenarios where you do want to share some data on the client side or maybe you want to write common JavaScript methods which can be used by multiple components.

In this post, we will learn how you can share common JavaScript code between components.

Use Case

I have identified a few operations that you generally do in almost every Lightning Component. Like:

  • Almost every Lightning Component makes an action call to server-side methods.
  • Almost every Lightning Component shows toast messages based on user actions.

Do you want to write this piece of code again and again in each component or would you like to write this code once and just reuse it in every Lightning Component.

Create JavaScript Static Resource
  • To share common code between components, you need to create a JavaScript static resource which will have all common methods.
  • You need to attach your methods to the window object. These methods will be attached to Secure Window object automatically, which means their scope exist within a namespace. If you do not attach your methods to the window object, you may face error due to Locker Service in place.
  • You need to include the static resource in your component in order to use these methods.

Below is the JavaScript static resource code which has 2 methods:

  1. callServer – Call server side methods and on response execute the callback method
  2. showToast – Show toast messages.

BaseJS.js – Static Resource



How to use this within a Lightning Component?
  • To use it within a Lightning Component, you need to include the static resource file.
  • You can call static resource methods similar to the normal methods from the controller or helper file.

Below is the code of SubComponent.cmp lightning component which is using above static resource.

SubComponent.cmp – Component File



SubComponentController.js – Controller File



SubComponentHelper.js – Helper File



How it can be useful
  • This way you will make your code more centralized, which means in future if any changes need to be done, you have to make those changes in one place and all component will have changed the code.
  • This would make debugging easier in case of multiple components are using the same code on the same page.
  • Maintenance would be easier as you need to maintain the changes in common JavaScript static resource file.
  • The code can be upgraded without touching you lightning components. This means less component to deploy at the time of release.

This is a simple way how you can shift most of common JavaScript Code to a Static Resource file and can use it multiple times from multiple components.

(Visited 911 Times)

3 thoughts on “Share Code Between Lightning Components Using JS Library

    1. Manish Choudhari Post author

      Thanks, Shamina.
      There are certain use cases where inheritance (component extension) results in bad performance and I am writing a post about it. It will be published this week. Consider this one as a preliminary post for upcoming post 🙂

      Reply
  1. Kamaal

    Hello Manish,
    I have also started blogging by following you. One student asked me about lightning interface.
    Can you please write a blog for that with a simple example.Because i didn’t work with that.

    Reply

Leave a Reply

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